Danh sách bài viết theo tags #j2team_tutorials
#j2team_share #j2team_programming #j2team_tutorials
Lâu lắm rồi mới viết lại một bài mới. Tình hình là vừa mới viết xong một template workflow đơn giản sử dụng Gulp4 để cắt PSD cho nó nhanh, phù hợp cho các bạn đã biết về SASS, SCSS, PUG, các bạn hay làm freelance về cắt PSD.
Mình thấy hiện nay thì nhiều người dùng Webpack(chắc mình sẽ build version này sau) nhưng cũng có nhiều người dùng Gulp cho nên mình build cái template workflow này cho anh em ai cần thì dùng. Có vài điểm chính trong template này là sử dụng SCSS để build ra CSS, PUG để build ra HTML, JS có hỗ trợ es6 với babel-preset-env, browser-sync, watch file khi có thay đổi tự động load lại trang, cấu trúc thư mục khá ổn, build toàn bộ ra thư mục public và nhiều tính năng khác ...
Chỉ cần tải về chạy lệnh `npm install` rồi sau đó chạy lệnh `npm run dev` để chạy. Nếu có lỗi như Gulp command not found thì các bạn có thể fix bằng cách cài package gulp. Mình có note trong file readme luôn.
p/s: Nhớ cài đặt NodeJS, npm đồ mới chạy được nha các bạn ^^. Chúc các bạn cuối tuần vui vẻ.
Video hướng dẫn đơn giản: [https://www.youtube.com/watch?v=wawca789sAQ](https://www.youtube.com/watch?v=wawca789sAQ)
Link: https://anlink.top/v/84y2032313/ | #protect@84y2032313@
Password: j2team
Thống kê:
#j2team_share #j2team_programming #j2team_tutorials Kế tiếp phần 2 hướng dẫn viết Theme Wordpress toàn tập, nay tranh thủ viết ít ít cho phần 3 cho các anh em học tập tiếp. Chúc các bạn học tập tốt
Thống kê:
#j2team_share #j2team_tutorials #j2team_programming
Chắc nhiều anh em newbie cũng đang học hoặc đang code SASS/SCSS trong quá trình làm website khi đi làm nhỉ, và vẫn chưa tận dụng được hết khả năng của SASS để làm sao code nhanh hơn như những co-workers khác.
Và một trong những tính năng giúp cho quá trình code SASS/SCSS được nhanh hơn đó chính là Mixins. Cho nên mình có viết bài về sử dụng Mixins trong SASS. Hi vọng sẽ giúp ích được phần nào cho anh em newbie.
Thống kê:
#j2team_tutorials
Có thể bạn chưa biết!!!
✔ Facebook có tính năng xem chung nhưng nhiều bạn vẫn chưa biết làm sao để thêm video xem chung nếu tìm bằng từ khóa mà livestream hoặc video không hiển thị.
✔ Bạn có thể thay từ khóa bằng link của livestream hoặc link video nhé.
P/s: Ngoài ra cách dùng link cũng có thể áp dụng vào phần giới thiệu công việc trong trang cá nhân nếu tìm fanpage bằng tên không hiển thị.
Thống kê:
#j2team_share #j2team_tutorials
Có thể bạn đã biết.
Các bạn thường thấy ở một số trang họ làm background chéo bằng transform: skewY(-10deg) chẳng hạn ở block header rồi sau đó dùng margin số âm(margin-top: -100px) để đẩy cái background lên cho nó mất khúc đầu để hiển thị mỗi khúc chéo ở dưới mà thôi(hình 1)
Các bạn có thắc mắc tại sao lại -100px mà không phải -50px không ? Mình xin mạo muội giải thích như sau
Khi transform: skewY(-10deg) của một hình chữ nhật có độ rộng là 400px, mình cần tìm X thì trong tam giác vuông(hình 2) để tìm X mình có chiều rộng 400px * tan(abs(-10deg)) ta được = 70.5px(làm tròn lên ta được 71px) sau đó chia 2 ra ta được 35.5px từ đó nếu dùng margin-top: -35.5px thì sẽ lấp đầy khoảng trống.
Demo codepen cho các bạn: https://codepen.io/anon/pen/dwXzGE
X là khoảng cách được tạo ra khi dùng transform: skew, chia cho 2 là vì khi dùng transform skew nó ảnh hưởng trên dưới(skewY).
Updated phát: Nhiều người nói clip-path ngon hơn, thì các bạn nên google caniuse trước nhé, nó không được hỗ trợ nhiều lắm đâu. IE hay Edge đều chết và vài thiết bị khác Nếu nói nó ngon hơn thì hãy chứng minh chứ đừng nói suông nhé.
Thống kê:
Cũng lâu rồi không biết các bác đã biết cách tự tạo frame cho ảnh đại diện và hiệu ứng máy ảnh chưa... nếu chưa thì tham khảo thử nha :3
#j2team_share #j2team_tutorials
