Chào các bạn, Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm. Từ đó sẽ dẫn tới việc không đúng ý của người upload image. Chính vì vậy, ở bài viết này mình...
HTML frontend CSS3
I. Function: Function là một trong những khái niệm cơ bản nhưng được sử dụng nhiều trong Javasript. Hôm nay mình xin được phép chia sẻ với các bạn một số thông tin bên lề của Function trong Javascript nhé. A JavaScript function is a block of code designed to perform a particular task. Một phương thức là 1 tập hợp câu lệnh để thực hiện 1 nhiệm vụ cụ thể. Với định nghĩa trên, chúng ta có cú pháp cơ bản...
JavaScript frontend
Xin chào mọi người, hôm nay mình xin tiếp tục chia sẻ cho các bạn về những gì cơ bản nhất của Vuejs, để trở thành 1 Fresher chính hiệu ^^ , hãy ghé qua các bài viết trước của mình ở đây nhé. Và lần này mình xin giới thiệu về một thư viện bé nhỏ khi các bạn làm việc với đa ngôn ngữ. Đó là Vue I18n, hãy cùng tìm hiểu về thư viện này thôi! Cài đặt Đơn giản thôi, các bạn có thể cài...
Happy New Year JavaScript frontend
Bạn đã có bộ câu hỏi cho developer chưa? Đây là lần đầu tiên bạn phỏng vấn, bạn lo lắng không biết như thế nào để trả lời tốt các câu hỏi từ nhà tuyển dụng? Bộ câu hỏi cho developer qua các vòng phỏng vấn Câu hỏi cá nhân Giới thiệu sơ lược về bản thân: giới thiệu ngắn gọn thông tin về bản thân của mình (tầm 2-3 phút) Kể thêm về một số dự án bạn đã từng tham gia, những...
database Git frontend Backend Developer
Chào các bạn! Bài viết hôm nay có thể là khá ngắn nhưng có lẽ sẽ có nhiều người gặp phải trường hợp này. Mới đây thôi, trong 1 dự án mình làm cũng gặp phải case này nên muốn chia sẻ cho các bạn cùng tham khảo. Bài toán được đặt ra ở đây là như thế này: Page có 1 group tabs (4 tab nhỏ). Trong mỗi tab đều có slick carousel. Tất nhiên 3 carousel này chỉ sử dụng chung 1 class và gọi chung 1...
frontend CSS3 jQuery slickjs Boostrap
1. Client encode file (base64) rồi gởi về backend 200Lab đã từng thấy nhiều bạn backend developer yêu cầu phía frontend làm như vậy. Cách này nhược điểm là xử lý rất nặng ở cả 2 phía. Vì frontend phải encode mà backend cũng phải decode. Trong cách này nếu backend không decode để tái tạo lại file mà lưu hết base64 string vào DB sẽ là một sai lầm rất nghiêm trọng. Khi ấy DB chúng ta rất nặng vì chứa cả...
frontend Backend upload file
Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình chữ nhật bằng rect, với chiều rộng 200px, chiều cao 100px: <svg width='300' height='200' style='background: cyan'> <rect width='200' height='100' /> </svg> Hình chữ nhật có mặc định màu đen ở góc trên bên trái, bắt đầu tại điểm tọa độ x = 0, y = 0. Mình sẽ...
HTML CSS frontend rectangle svg
Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình tròn bằng circle, với bán kính là 40px: <svg width='300' height='200' style='background: cyan'> <circle r='40' /> </svg> Hình tròn có mặc định màu đen ở góc trên bên trái và tâm đường tròn nằm tại điểm tọa độ x = 0, y = 0. Mình sẽ di chuyển hình vào vị trí...
HTML Web frontend svg circle
Đầu tiên, mình sẽ tạo một khung bao bằng svg như sau: <svg width='300' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình ellipse với bán kính trục tung là 40px và bán kính trục hoành là 80px: <svg width='300' height='200' style='background: cyan'> <ellipse rx='80' ry='40' /> </svg> Hình ellipse có mặc định màu đen ở góc trên bên trái và tâm đường ellipse nằm tại điểm tọa độ x = 0,...
HTML Web frontend svg ellipse
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ <svg> như sau: <svg width='200' height='100' style='background: cyan'></svg> Sau đó, mình sẽ vẽ các đoạn thẳng bằng thẻ <line/>, với điểm kết thúc của đoạn thẳng trước là điểm bắt đầu của đoạn thẳng tiếp theo: <svg width='200' height='100' style='background: cyan'> <line x1='10' y1='5' x2='50' y2='25' stroke='orange' stroke-width='4'...
Animation Web frontend svg LINE
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='200' height='200' style='background: cyan'></svg> Tiếp theo, mình sẽ tạo hình đa giác bằng thẻ polygon, với điểm bắt đầu tại điểm x = 65, y = 50 và đi đến các điểm còn lại: <svg width='200' height='200' style='background: cyan'> <polygon points='65,50 135,70 150,150 50,150'/> </svg> Cuối cùng, mình sẽ thêm một số thuộc tính màu...
HTML Web Polygon frontend svg
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width='300' height='200' style='background: #B71C1C'></svg> Tiếp theo, mình sẽ tạo hình ngôi sao bằng thẻ polygon, tại điểm bắt đầu là x = 150, y = 30: <svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165' stroke='#FFD600'/> </svg> <svg width='300' height='200' style='background: #B71C1C'> <polygon points='150,30 105,165...
HTML Web frontend svg star
Trọng tâm của hướng dẫn này, mình sẽ đưa bạn để cách làm dễ nhất và có thể bắt tay vào làm ngay. Do đó, mình không cố để viết một bài chi tiết hay nặng về lý thuyết. Bạn có thể tìm hiểu sâu thêm từ internet. Trước khi đi vào bài viết, mình có để lại link bài viết về cách tạo SVG được sử dụng trong bài viết này. https://naututs.com/svg-rectangle/ Mình sử dụng Codepen để demo các...
Animation Web frontend rectangle GSAP
Trọng tâm của hướng dẫn này, mình sẽ đưa bạn để cách làm dễ nhất và có thể bắt tay vào làm ngay. Do đó, mình không cố để viết một bài chi tiết hay nặng về lý thuyết. Bạn có thể tìm hiểu sâu thêm từ internet. Trước khi đi vào bài viết, mình có để lại link bài viết về cách tạo SVG được sử dụng trong bài viết này. https://naututs.com/svg-circle/ Mình sử dụng Codepen để demo các...
Animation Web frontend circle GSAP
Đầu tiên, mình sẽ tạo một khung bao bằng thẻ svg như sau: <svg width="200" height="200" style="background: #B71C1C"></svg> Sau đó, mình sẽ tạo các đường kẻ bằng thẻ path, lưu ý là M xuất hiện ở tọa độ điểm đầu tiên: <svg width="200" height="200" style="background: #B71C1C"> <path stroke='white' d='M20,20 180,20'/> <path stroke='white' stroke-width='2' d='M20,40 180,40'/> <path stroke='white' stroke-width='3'...
HTML Web frontend svg stroke
Frontend và backend là gì? Đây là một câu hỏi từ một bạn trên Hoovada - nền tảng hỏi và đáp chuyên nghiệp trên nhiều lĩnh vực khác nhau giúp giải đáp thắc mắc của mọi người. Đáp án đến từ bạn Nguyễn Phúc - một thành viên của Hoovada sống tại TPHCM Front End và Back End: Frontend và Backend là hai thuật ngữ phổ biến nhất được sử dụng trong phát triển web, tuy trái ngược nhau nhưng đều vô...
frontend Backend
Trường hợp lỗi hiển thị Ví dụ khi chúng ta muốn hiển thị giá trị trong object ra template <template> <p>{{ data.user.name }}</p> </template> Trong trường hợp này nếu thuộc tính user không tồn tại, trình duyệt sẽ báo lỗi Error in render: "TypeError: Cannot read property 'name' of undefined" Và nó có thể khiến cho một một số component của thư viện UI không hiển thị, vậy nên có một cách đó là...
Front-end JavaScript frontend VueJS Webpack
Tại sao cần sử dụng Khi chúng ta muốn hiển thị giá trị trong object ra template <template> <p>{{ data.user.name }}</p> </template> Trong trường hợp này nếu thuộc tính user không tồn tại, trình duyệt sẽ báo lỗi Error in render: "TypeError: Cannot read property 'name' of undefined" Và nó có thể khiến cho một một số component của thư viện UI không hiển thị, vậy nên có một cách đó là check if...
Front-end JavaScript frontend VueJS Webpack
Tại sao cần sử dụng Khi chúng ta muốn hiển thị giá trị trong object ra template <template> <p>{{ data.user.name }}</p> </template> Trong trường hợp này nếu thuộc tính user không tồn tại, trình duyệt sẽ báo lỗi Error in render: "TypeError: Cannot read property 'name' of undefined" Và nó có thể khiến cho một một số component của thư viện UI không hiển thị, vậy nên có một cách đó là check if...
Front-end JavaScript frontend VueJS Webpack
Tại sao cần sử dụng Khi chúng ta muốn hiển thị giá trị trong object ra template <template> <p>{{ data.user.name }}</p> </template> Trong trường hợp này nếu thuộc tính user không tồn tại, trình duyệt sẽ báo lỗi Error in render: "TypeError: Cannot read property 'name' of undefined" Và nó có thể khiến cho một một số component của thư viện UI không hiển thị, vậy nên có một cách đó là check if...
Front-end JavaScript frontend VueJS Webpack
Như chúng ta đã biết, props trong Vuejs là phương pháp truyền dữ liệu trực tiếp từ component cha xuống component con một cách nhanh chóng và hiệu quả. Thông thường, chúng ta hay sử dụng props để truyền dữ liệu dạng string, object, array, number, boolean… mà ít khi để ý rằng props cũng có thể truyền một hàm logic. Sử dụng props truyền logic có nhiều lợi ích trong việc phát triển code như việc tăng khả...
Front-end JavaScript frontend VueJS HTML5