Lập Trình

Giới thiệu Chào anh em. Hôm nay mình xin chia sẻ về một hiệu ứng rất thú vị. Đó là Flying flag effect: Làm hiệu ứng lá cờ bay trong gió bằng JavaScript , HTML và CSS. Bắt tay vào làm nào! Bí kíp tạo ra một tokenizer về toán học bằng Javascript Cách làm hiệu ứng lá cờ bay trong gió bằng JavaScript Mình sẽ demo trên http://jsfiddle.net cho anh em dễ theo dõi nhé. Về phần HTML của effect rất đơn giản: <div class='flag'> </div> Còn đây là CSS: .flag { width:300px; height:200px; margin:50px; } .flag-element { -webkit-animation:oscill 1s ease-in-out infinite alternate; -moz-animation:oscill 1s ease-in-out infinite alternate; -ms-animation:oscill 1s ease-in-out infinite alternate; animation:oscill 1s ease-in-out infinite alternate; background: url('http://i.imgur.com/8VSL8Ve.gif'); background-size: 300px 100%; position:relative; height:100%; width:1px; display:inline-block; box-shadow:0 1px grey, 0 -1px gray; } @-webkit-keyframes oscill { 0% { top: 5%; } 100% { top: -5%; } } @-moz-keyframes oscill { 0% { top: 5%; } 100% { top: -5%; } } @-ms-keyframes oscill { 0% { top: 5%; } 100% { top: -5%; } } @keyframes oscill { 0% { top: 5%; } 100% { top: -5%; } } Cuối cùng, tuy ngắn nhưng rất quan trọng đó là JavaScript: var h = $('.flag').width(); for(var i = 0; i < h; i++){ var flagElement = $("<div class='flag-element'>"); flagElement.css('background-position', -i + "px 0"); flagElement.css('-webkit-animation-delay', i * 10 + 'ms'); flagElement.css('-moz-animation-delay', i * 10 + 'ms'); flagElement.css('-ms-animation-delay', i * 10 + 'ms'); flagElement.css('animation-delay', i * 10 + 'ms'); $('.flag').append(flagElement); } Và kết quả là: Kết Như vậy là mình đã hướng dẫn cách làm hiệu ứng là cờ bay trong gió bằng JavaScript . Rất dễ phải không các bạn. Chúc các bạn thành công và vui vẻ trong ngày Quốc Khánh nhé !! Đừng bỏ lỡ những bài viết...

Bài viết được sự cho phép của tác giả Kien Dang Chung Machine learning là một tập hợp rất nhiều các thuật toán khác nhau và nó có liên hệ rất mật thiết với toán học, đặc biệt là toán cao cấp. Chúng ta ai đã mài đũng quần trên giảng đường đại học đều không còn xa lạ với Đại số tuyến tính và đây cũng là kiến thức nền tảng của rất nhiều các thuật toán sẽ được giới thiệu trong Machine Learning . 9 hiểu lầm "ngớ ngẩn" về machine learning Chia sẻ cơ bản sử dụng machine learning để giải quyết bài toán. 1. Một số khái niệm cơ bản 1.1 Vô hướng (Scalar) Scalar (mathematics), an element of a field, which is used to define a vector space, usually the field of real numbers Một đại lượng vô hướng là một phần tử của một trường được sử dụng để xác định một không gian vector, thông thường ở đây là trường số thực. Wiki Tóm lại đại lượng vô hướng (Scalar) là một số bất kì thuộc tập số nào đó. Khi định nghĩa một số ta phải chỉ rõ tập số mà nó thuộc vào. Ví dụ, n n là số tự nhiên sẽ được kí hiệu: n ∈ N n∈N , hoặc r r là số thực sẽ được kí hiệu: r ∈ R r∈R . Một số thường có thể định nghĩa được bằng một kiểu dữ liệu nguyên thủy của các ngôn ngữ lập trình. Như số tự nhiên có thể là kiểu int, số thực có thể là kiểu float trong Python. 1.2 Véc tơ (Vector) Vector là 1 mảng của các đại lượng vô hướng tương tự như mảng 1 chiều trong các ngôn ngữ lập trình. Các...

Bài viết được sự cho phép của tác giả Giang Phan Trong OOP, một class có thể có rất nhiều instance nhưng ngược lại Singleton là một dạng class mà chỉ hỗ trợ tối đa một instance duy nhất và một đối tượng khi đã được khởi tạo sẽ tồn tại suốt vòng đời chương trình. Trong một số trường hợp, chúng ta cần khởi tạo và sử dụng một tập hợp các đối tượng. Khi với số lượng lớn các đối tượng giống nhau, thì việc khởi tạo nhiều lần sẽ gây lãng phí không cần thiết. Chúng ta cũng có thể sử dụng Prototype Pattern để cãi thiện performance bằng cách cloning object. Tuy nhiên, không phải lúc nào object cũng có thể được clone đầy đủ. Trong những trường hợp như vậy, chúng ta có thể dùng Object pool pattern . Object Pool Pattern là gì? Object Pool Pattern là một trong những Creational pattern . Nó không nằm trong danh sách các Pattern được giới thiệu bởi GoF . Object Pool Pattern cung cấp một kỹ thuật để tái sử dụng objects thay vì khởi tạo không kiểm soát. Ý tưởng của Object Pooling là: chúng ta dùng Object Pool Pattern quản lý một tập hợp các objects mà sẽ được tái sử dụng trong chương trình. Khi client cần sử dụng object, thay vì tạo ra một đối tượng mới thì client chỉ cần đơn giản yêu cầu Object pool lấy một đối tượng đã có sẵn trong object pool. Sau khi object được sử dụng nó sẽ không hủy mà sẽ được trả về pool cho client khác sử dụng. Nếu tất cả các object trong pool được sử dụng thì client phải chờ cho tới khi object được trả về pool. Object pool...

Bài viết được sự cho phép của tác giả Edward Thien Hoang CÁC NGUYÊN LÝ THIẾT KẾ PACKAGE Cùng điểm qua 1 số nguyên tắc đóng gói (packaging principle) của Robert C. Martin: Nếu tôi hỏi bạn: “tại sao phải phân loại các class vào các package” bạn có thể sẽ trả lời: “để dễ quản lý”. Tất nhiên câu trả lời này là đúng, nhưng chưa giúp ích được gì nhiều. Và câu chuyện của chúng ta sẽ còn kéo dài hơn thế. Phân loại là công việc mà chúng ta rất hay làm trong đời sống. Ví dụ, một người giữ xe thường sắp xe ga, xe số riêng, ngoài mục đích dễ tìm xe còn mục đích kinh tế: xe ga đắt tiền nên sẽ cần phải để mắt hơn. 12 Packages và Libraries của Go cực kì mạnh mẽ mà bạn cần phải biết Cách để npm packages chạy trong browser Xem thêm việc tuyển dụng UI UX designer hấp dẫn trên Station D Công việc phát triển phần mềm cũng tương tự như vậy. Nhiệm vụ của package không phải là để dễ tìm class. Tất nhiên với package thì việc tìm class có thể tiện lợi hơn đôi chút nhưng nó không quá quan trọng, nhất là các IDE ngày nay đều hỗ trợ tìm class trong nháy mắt. Một phần mềm hạng trung khoảng trăm class đã có thể rất phức tạp. Sở dĩ chúng phức tạp vì chúng có những mối quan hệ phụ thuộc lẫn nhau. Kiểm soát tốt những sự phụ thuộc này là mục tiêu sống còn của phần mềm. Công việc này quả thực là rất khó khăn với một số lượng lớn class. Do đó, chúng ta cần gom class vào các package. Số lượng package hiển...

Xem Phần 1 – React Native tại Airbnb (P1) Tác giả: Gabriel Peal React Native là một platform tương đối mới trên các cross-section của Android, iOS, web và các framework cross-platform. Sau 2 năm, chúng tôi có thể nói rằng React Native là một bước đột phá ở nhiều khía cạnh. Đây là một bước đột phá mới về thuật toán cho mobile và chúng ta có thể được lợi từ rất nhiều hoạt động. Tuy nhiên, lợi ích thu được sẽ đi kèm với không ít “thương tích”. Những mặt hiệu quả Cross-Platform Lợi ích rõ ràng nhất của React Native đó là code bạn viết có thể chạy trên cả Android và iOS. Hầu hết các feature sử dụng React Native có thể đạt từ 95–100% shared code và 0.2% file chuyên cho platform (*.android.js/*.ios.js). Design Language System thống nhất (DLS) Chúng ta đã develop được một design language gọi là DLS. Chúng tôi làm các bản Android, iOS, React Native, và bản web cho mỗi component. Việc này hỗ trợ cho việc viết các feature cross-platform hơn vì mọi design, tên component và các screen thống nhất trên các platform. Tuy nhiên, chúng ta vẫn có thể đưa ra các quyết định phù hợp với platform. Ví dụ, chúng ta có thể dùng Toolbar trên Android và UINavigationBar trên iOS và chọn hide disclosure indicators trên Android vì họ không follow các design guideline của platform Android . Chúng tôi đã viết lại các component thay vì giữ cái cũ để tạo ra được các API phù hợp cho từng platform và giảm thiểu workload cho các kĩ sư Android và iOS nào không rõ cách test các thay đổi trong React Native. Tuy nhiên, nó sẽ gây ra sự tách rời giữa các platform mà...

Chả là dạo gần đây, tớ hay nghe bản nhạc “Một bước yêu vạn dặm đau” của bạn Chu Duyên. Xinh gái, hát hay, đàn lại giỏi. Bạn có thể trải nghiệm ở link này: https://www.youtube.com/watch?v=plKgTyPXCAc Nếu dùng loop mặc định của Youtube thì sẽ nghe đi nghe lại cả bài. Tuy nhiên, tớ chỉ thích nghe đoạn hát thôi, không thích nghe đoạn intro và outro ở đầu. Vì vậy tớ viết 1 đoạn script nho nhỏ, paste vào console để thực hiện thủ đoạn này, tiện share với mọi người luôn. TL; DR function simpleLoop(startTime, endTime) { // TODO: Check valid endtime console.log('-- Run here') var ytplayer = document.getElementById("movie_player"); var currentTime = ytplayer.getCurrentTime(); var isRunToStart = currentTime > startTime var suitableTimeout = endTime - startTime if (currentTime <= startTime || currentTime > endTime){ ytplayer.seekTo(startTime) } else { suitableTimeout = endTime - currentTime } console.log('>> Start timeout after: ', suitableTimeout * 1000) setTimeout(function () { simpleLoop(startTime, endTime) }, suitableTimeout * 1000) } simpleLoop(11, 254) Thay trong hàm simpleLoop là startTime và endTime mà bạn muốn. Giải thích Đoạn code trên khá đơn giản, có thể hình dung theo sơ đồ sau: Nếu thời gian hiện tại của video nhỏ hơn hoặc bằng thời gian bắt đầu, hoặc lớn hơn thời gian kết thúc của đoạn mà bạn muốn lặp => đang ở đoạn mà bạn không muốn nghe => phi trâu ngay đến đoạn bắt đầu + đặt thời gian timeout là 1 chu kì (endTime – startTime) Ngược lại, nếu thời gian hiện tại đang ở đoạn muốn nghe, thời gian timeout sẽ là từ thời điểm hiện tại cho tới thời điểm kết thúc. Sau khi tính toán được thời gian timeout, thực hiện gọi đệ quy lại chính hàm check này. Lưu thành tool Để cho...

Theo số liệu do HackerRank công bố, hiện nay HackerRank đã xếp hạng hơn 1,5 triệu developer toàn cầu dựa trên tốc độ và độ chính xác. Những kết quả gần đây cũng cho thấy Trung Quốc là quốc gia có lập trình viên xếp thứ hạng cao nhiều nhất, sau đó là Nga và Ba Lan. HackerRank là gì? Những công ty lớn như Amplify, Quora và Capital One đều đang sử dụng HackerRank for Work – cho quá trình tuyển dụng mảng kỹ thuật. Ngoài là thuớc đo kỹ năng, HackerRank cũng tổ chức một số chương trình hackathons, như CodeSprints, cũng là một cách để các công ty tìm kiếm những ứng viên tiềm năng. HackerRank là một website cho phép các lập trình viên trau dồi, học hỏi và rèn luyện kỹ năng của bản thân. Website này sẽ yêu cầu những người tham gia đưa ra lời giải cho những “thử thách lập trình” hay những bài toán lập trình. Qua đó những kết quả và tốc độ giải đáp vấn đề sẽ được HackerRank sử dụng để đánh giá và xếp hạng các lập trình viên tham gia. Làm thế nào để terminal trông giống như một Hacker? Vì sao chọn HackerRank Ngoài việc ghi điểm trong mắt nhà tuyển dụng, các developer cũng có thể luyện code trên HackerRank. Những ưu điểm có thể kể về HackerRank như là: HackerRank có hệ thống compiler online, từ đó không cần cài thêm bất kỳ compiler nào trên máy và có thể lâp trình trực tiếp trên Web. Thứ hai, HackerRank có đa dạng các bài code (có sẵn cả unit test để biết đúng sai) để các coder luyện tập và thử sức. Sau khi cải tiến bản thân qua các bài code, các...

Nhắc tới các lỗ hổng bảo mật điển hình của một hệ thống web, không thể không nhắc tới lỗ hổng mang tên XSS (cross-site scripting). Đây là một lỗ hổng cũng rất phổ biến và nguy hiểm, không thua kém gì so với người anh em của nó là lỗ hổng bảo mật SQL injection. Đây là một lỗ hổng tương đối dễ hiểu và đơn giản về mặt bản chất, nhưng không vì thế mà nó ít tồn tại trong thực tế. Ngược lại, rất nhiều hệ thống, kể cả các hệ thống lớn cũng thường xuyên gặp phải lỗ hổng này. Tấn công XSS là gì? Một cách ngắn gọn, ta có thể định nghĩa XSS như sau: XSS là một kĩ thuật tấn công, trong đó kẻ tấn công sẽ chèn các đoạn mã độc (thường là Javascript) vào bên trong trang web, các đoạn mã này sẽ được thực thi khi người dùng truy cập và hiển thị các trang có chứa những đoạn mã đó. Nguồn gốc của cái tên Cross-site script cũng khá thú vị, nó liên quan tới vị trí lưu và thực thi các đoạn mã độ. Không giống như lỗ hổng Sql injection, nơi mà mã độc được thực thi ở server, XSS là một dạng tấn công trong đó mã độc được thực thi ở máy client. Bởi vì mã độc được chứa ở server nhưng lại được thực thi ở client, tên gọi “cross-site” bắt nguồn chính vì lí do này. Tìm hiểu cách mà lỗi XSS xảy ra Mô hình chung của lỗ hổng XSS Để thực hiện tấn công XSS, kẻ tấn công sẽ lợi dụng các lỗ hổng bảo mật của trang web, nơi mà hệ thống cho phép người dùng nhập và lưu trữ...

Bài viết được sự cho phép của tác giả Tino Phạm Các nguyên lý thiết kế phần mềm là những hướng dẫn giúp cho nhà phát triển phần mềm (developers) tạo ra được một thiết kế hệ thống tốt. Chúng ta có các nguyên lý trong thiết kế phần mềm như: SOLID, DRY, KISS, YAGNI. Lưu ý: đây là các nguyên lý chứ không phải là luật. Nghĩa là bạn phải nên cân nhắc và hiểu rõ khi nào nên áp dụng cho đúng. 19 tips cho các kỹ sư phần mềm hữu ích trong 2025 3 workhack để duy trì năng lượng tích cực tại công sở cho kĩ sư phần mềm SOLID Chúng ta cùng tìm hiểu về nguyên lý SOLID. Nội dung chính của nguyên lý này được kết hợp từ 5 nguyên lý cơ bản sau: 1. Single Responsibility Priciple : Đây là nguyên lý đầu tiên (chính là chữ S đầu trong SOLID). Nguyên lý này nói rằng không nên có hơn 1 lý do để một lớp (class) thay đổi. Nghĩa là, bạn nên thiết kế class của bạn sao cho mỗi class chỉ phục vụ cho một mục đích. Ví dụ: Một kịch bản như sau, chúng ta cần một tính năng lên lịch hẹn phỏng vấn ứng viên (schedule interview). Công việc chúng ta cần làm là: lưu thông tin buổi phỏng vấn, sau đó gửi mail cho ứng viên về buổi phỏng vấn. Thay vì thiết kế một class ScheduleInterview để làm tất cả các việc trên, bạn tạo một class Interview chỉ để thực hiện công việc lưu thông tin buổi phỏng vấn, và chúng ta có thêm class EmailSending dùng để thực hiện công việc gửi mail cho ứng viên. 2. Open/Closed Priciple: Đây là nguyên lý thứ hai...

PHP là một ngôn ngữ lập trình rất phổ biến với dân IT, vậy ngôn ngữ lập trình PHP là gì ? Vai trò của PHP trong việc phát triển các phần mềm? Những ưu, nhược điểm của ngôn ngữ PHP? Bài viết này chúng ta hãy cùng tìm hiểu kỹ hơn về ngôn ngữ lập trình PHP cũng như các kiến thức liên quan đến loại ngôn ngữ này nhé! Ngôn ngữ lập trình PHP là gì? Ngôn ngữ PHP là từ viết tắt của Personal Home Page nay đã chuyển thành Hypertext Preprocessor. Thuật ngữ này là một dạng mã lệnh hoặc một chuỗi ngôn ngữ kịch bản được dùng để phát triển các ứng dụng web chạy trên máy chủ. Khi các lập trình viên PHP viết chương trình, chuỗi lệnh sẽ được xử lý trên server sau đó sinh ra mã HTML trên client. Dựa vào đó, các ứng dụng trên website sẽ hoạt động một cách dễ dàng. Ngôn ngữ PHP thường được dùng trong việc xây dựng và phát triển website bởi nó có thể kết nối dễ dàng với các website khác có sử dụng HTML . PHP cũng là ngôn ngữ lập trình có mã nguồn mở, tương thích với nhiều nền tảng khác nhau như MacOS, Linux, Windows,… PHP được nhiều người dùng đánh giá là dễ đọc nên đa số các lập trình viên sẽ lựa chọn học PHP trước khi bắt đầu vào nghề. Những câu hỏi thường gặp khi đi phỏng vấn lập trình php Ứng dụng của ngôn ngữ PHP trong lập trình Ngôn ngữ lập trình PHP thường tập trung vào việc thiết lập chương trình cho máy chủ, tạo các cơ sở dữ liệu, xây dựng nội dung website, nhận dữ liệu cookie. Chưa hết,...

Bài viết được sự cho phép của tác giả Lưu Bình An Chúng ta thường phải đặt listener trên sự kiện window.scroll thực hiện một số thao tác tính toán, so sánh với thanh scroll để biết được khi nào element bắt đầu xuất hiện. Cách làm này gây nhiều vấn đề hiệu năng và tương đối rườm rà. Giờ các trình duyệt đã đồng loạt hỗ trợ Intersection Observer API , chúng ta có một cách hoàn toàn gọn gàng, sạch sẽ mà lại tối ưu hiệu năng hơn nhiều. Hiểu về setTimeout và setInterval trong Javascript Cấu hình JSP views trong InternalResourceViewResolver với Spring Boot JAR file Cách sử dụng như sau, chúng ta khởi tạo một instance IntersectionObserver và gọi observe trên element muốn theo dõi ( watch là thuật ngữ chuyên ngành hơn) const myImg = document . querySelector ( '.animate-me' ) ; const observer = new IntersectionObserver ( ( entry , observer ) => { console . log ( { entry } ) ; console . log ( { observer } ) ; } ) observer . observe ( myImg ) ; Trong trường hợp chúng ta muốn observe trên nhiều element cùng lúc const myImgs = document . querySelectorAll ( '.animate-me' ) ; const observer = new IntersectionObserver ( entries => { console . log ( entries ) ; } ) ; myImgs . forEach ( image => { observer . observe ( image ) ; } ) ; Để thực thi một tác vụ nào đó khi element bắt đầu xuất hiện trong viewport hoặc leave khỏi viewport const myImgs = document . querySelectorAll ( '.animate-me' ) ; observer = new IntersectionObserver ( entries => { entries . forEach ( entry => { if ( entry . intersectionRatio > 0 ) { console...

Bài viết được sự cho phép của tác giả Kiên Nguyễn 1. Con nhà danh giá. Tiếp tục chuỗi bài về Javascript , hôm nay sẽ là bài viết về gái. Không phải một mà là 3 đứa Var, Let và Const. Từ kỷ ES6 , giới anh hùng trong giang hồ đã không ngừng bàn luận tới 3 cô nàng tuyệt sắc giai nhân của nhà Javascript . Tuy nhiên, không phải cô nào cũng giống nhau, cũng đều thích hợp cho tất cả các chàng developer. 3 chị em var,let và const. Cuộc chiến không khoan nhượng. Nguồn ảnh/ Source: deadcoderising.com Tính khí các cô khác nhau, vì vậy phải hiểu thật rõ để có chiến thuật cưa cẩm phù hợp. Hãy cùng tìm hiểu qua bài viết dưới đây. 10 trình quản lý file hàng đầu trong JavaScript 10 tip tối ưu code trên JavaScript mà web developer nào cũng nên biết Xem thêm các chương trình tuyển dụng JavaScript lương cao trên Station D 2. Các quý cô xinh đẹp. 2.1 Angelina VAR Hình ảnh chả liên quan. Để các ông ngắm đọc bài đỡ chán. 2.1.1 Phạm vi hoạt động. Phạm vi của var là FUNCTION SCOPE , nghĩa rằng khi ta khai báo var trong một function, biến var đó chỉ tồn tại và có giá trị trong phạm vi function nó khai báo. var varGirl = "Mặt em là mặt mộc"; function after_tay_trang() { var varGirl = "Đây là ai?, tao ở đâu?, con nào đang đứng trước gương thế này"; console.log (varGirl); } after_tay_trang(); // output: Đây là ai?, tao ở đâu?, con nào đang đứng trước gương thế này console.log(varGirl); // output: Mặt em là mặt mộc Hoặc là: function myFunc() { var name = 'Luke' console.log(name); // 'Luke' } myFunc();...