Chuyển đến nội dung chính

Bài đăng

Hiển thị các bài đăng có nhãn HTML

Những nguyên tắc, định luật của lập trình mà chúng ta nên có sẵn trong đầu

Nguyên tắc Demeter Còn có tên gọi khác là nguyên tắc “càng biết ít càng tốt”. Demeter là tên gọi của Nữ thần nông nghiệp, cũng là nữ thần phân phát trong thần thoại Hi Lạp. Tên bà được dùng để đánh dấu sự ra đời của nguyên tắc này, đây có thể xem là một triết lý nền tảng của việc lập trình được sinh ra từ một aspect-oriented programming (AOP) project cùng tên. Quan điểm cơ bản của nguyên tắc này chính là : tối giản sự hiểu biết của 1 object về cấu trúc, thuộc tính của các object khác ngoài nó (bao gồm các thành phần con). Nói một cách đơn giản là không được tiếp xúc với thuộc tính, method của các object khác một cách trực tiếp. Định luật Wirth “Software gets slower faster than hardware gets faster” – “Tốc độ tiến hóa của phần cứng không bằng tốc độ thoái hóa của phần mềm.” Có lẽ ý chính của nó là : lập trình ngày càng dùng nhiều tài nguyên phong phú nên framework phải luôn tiến hóa để phục vụ cho việc đó. Suy ra, tốc độ phần cứng dù có tang lên đi nữa thì tốc độ phần m...

Một vài thủ thuật nhỏ hữu ích khi làm layout website.

Xin chào các bạn, hôm nay mình xin chia sẻ đến các bạn một vài thủ thuật nhỏ với HTML/CSS mà trong khi làm việc mình thấy khá cần thiết và hữu ích dành cho các bạn không chuyên Frontend khi làm layout website. Những thủ thuật này hy vọng có thể sẽ giúp bạn tiết kiệm thời gian và tối ưu layout trang web của mình hơn thay vì phải loay hoay với những dòng code CSS nhàm chán 😄 1. Sticky footer Một trang web thông thường sẽ trông đẹp và hài hòa khí có đủ cả 3 phần header, content và footer. Tuy nhiên, nếu ở 1 page nào đó của trang web mà nội dung rất ít hoặc không có nội dung thì phần footer sẽ tự động nhảy lên nằm sát với header, điều này sẽ làm người dùng nhìn rất khó chịu. Vì vậy, khái niệm sticky footer có nghĩa là làm cho phần footer của trang web luôn luôn nằm dưới cùng của màn hình hoặc dưới cùng của trang web dù cho phần thân có nội dung hay không. 2. Truncate text Có những đoạn văn bản trong trang web do số lượng ký tự quá nhiều và viết liền nhau nên không thể tự động...

Tạo Scroll Indicator cho trang web

Chào mọi người, hôm nay chúng ta sẽ cùng tạo Scroll Indicator cho trang web của mình. View demo Step1: Các bạn tạo 1 file HTML và add đoạn code sau: < div  class ="header" >    < h2 > Scroll Indicator < /h2 >    < div  class ="progress-container" >      < div  class ="progress-bar"  id ="myBar" > < /div >    < /div >   < /div > < div > content... < /div > Step2: Add css: /* Style the header: fixed position (always stay at the top) */ .header  {   position :  fixed ;   top :  0 ;   z-index :  1 ;   width :  100% ;   background-color :  #f1f1f1 ; } /* The progress container (grey background) */ .progress-container  {   width :  100% ;   height :  8px ;   background :  #ccc ; } /* The progress bar (scroll indicator) */ .progress-bar  {   height : ...

Vẽ biểu đồ (chart) cho trang web bằng HTML và Google Charts

Chào mọi người, trong bài viết này chúng ta sẽ tìm hiểu cách vẽ biểu đồ cho website 1 cách đơn giản dễ làm với HTML và Google Charts. Đầu tiên các bạn tạo 1 file HTML và nhập đoạn code sau: < !DOCTYPE  html > < html > < body > < h1 > My Web Page < /h1 > < div  id ="piechart" > < /div > < /body > < html > Kế đến thêm đoạn script chứa API của google: < script  type ="text/javascript"  src ="https://www.gstatic.com/charts/loader.js" > < /script > Cuối cùng add đoạn Javascript sau: < script  type ="text/javascript" > // Load google charts google. charts . load ( 'current' ,  { 'packages' :[ 'corechart' ]}); google. charts . setOnLoadCallback (drawChart); // Draw the chart and set the chart values function  drawChart() {    var  data =  google. visualization . arrayToDataTable ([   [ 'Task' ,  'Hours per Day'...

Hướng dẫn Get Iframe Elements bằng JavaScript

Khi ta nhúng 1 trang web khác vào trang mình bằng iframe thì ta không thể sử dụng các lệnh JS thường dùng trên trang web hiện tại để thao tác với các elements trên Iframe đó, mà phải sử dụng lệnh JS dựa trên thằng Iframe ta lồng vào: Bạn xem code ví dụ sau: <!DOCTYPE html> <html> <body> <iframe id="myFrame" src="https://www.w3schools.com/ " style="height:380px;width:100%"></iframe> <p>Click the "Tryit" button to hide the first H1 element in the iframe (another document).</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() {   var iframe = document.getElementById("myFrame");   var elmnt = iframe.contentWindow.document.getElementsByTagName("H1")[0];   elmnt.style.display = "none"; } </script> </body> </html> Với nội dung trên web bình thường ta có thể dùng  document.getElem...

23 bước để thiết kế một trang web hoàn hảo

Khi thiết kế bố cục cho 1 trang web, có một số lỗi phổ biến thường xuất hiện, đặc biệt với interns và new designers. Trong danh sách các bước hướng dẫn thiết kế bố cục trang web hoàn hảo, mình sẽ đề cập đến những kiến thức cũng như kĩ năng cần thiết để có thể tạo nên 1 website vừa đẹp vừa chuyên nghiệp cũng như các lỗi cần tránh khi thiết kế website. Những nguyên tắc này bao gồm không chỉ các khía cạnh thiết kế mà còn các mẹo làm việc tổng quát để công việc đi theo 1 luồng ổn định. Thành thạo các bước này sẽ giúp bạn càng gần hơn với con đường trở thành lập trình viên front-end chuyên nghiệp. 01. Define what success means Trước khi bắt đầu công việc bạn cần biết là bạn đang thiết kế cái gì? Bên cạnh các mô tả về trang web, bạn cần phải biết những gì khách hàng đang mong đợi từ trang web đó(họ muốn giao diện thân thiện, sản phẩm phải được nổi bật, hay truyền tải 1 thông điệp gì đó...). Ví dụ: lấy trang web tin tức, mục tiêu là gì? Liệu nó phải làm được càng nhiều lần hiển thị ...