Home Blog Page 4

GIT là gì? Vai trò của GIT?

Hoàng Kiếm
-
0
GIT là gì? Vai trò của GIT?

Git là tên gọi của một Hệ thống quản lý phiên bản phân tán (Distributed Version Control System – DVCS). Nó là một phần mềm tuyệt vời để bạn có thể dùng để quản lý source code, team work, log lại những gì mà bạn đã làm từ khi bắt đầu tới khi project kết thúc của một dự án. Chúng ta sẽ xem GIT có những gì và làm được gì trong quản lý source code của một dự án nhé.

Tại sao lại dùng GIT?

Ngoài GIT còn có SVN và một số phần mềm quản lý source code khác nhưng GIT được bàn dân thiên hạ dùng nhiều nhất và mình cũng vậy nên chọn GIT làm quản lý source code, nó có những tính năng ưu việt như sau:

  • Team Work 
  • Quản lý phiên bản
  • Lưu trữ code

Đã bao giờ anh em cùng làm project với nhau mà code được copy từ USB này sang USB khác rồi từ máy tính này sang máy tính khác, sau đó được chỉnh sửa rồi được gộp lại với nhau bằng những danh sách file mà ông A đã thay đổi để gộp lại với ông B và test, rồi những file cùng nhau sửa thì sẽ phải xem đoạn nào của ông A đoạn nào của ông B, hoặc bây giờ bạn có thể đồng bộ code lên drive  . . . mỗi một lần copy, mỗi một lần đồng bộ lên drive, hoặc mỗi bộ code trên máy của từng thành viên được gọi là phiên bản và chúng nó được đồng bộ với nhau bằng chính các thành viên trong team.

Một ngày đẹp trời máy ông A bị virus mà ông A là code chính và đã viết thêm rất nhiều tính năng cho Project và ngày mai là phải báo cáo dự án rồi . . . phần mềm diệt virus chết tiệt đã xóa những file nhiễm của dự án, giờ chạy dự án không nổi? code chưa được gộp lại? làm sao ? lúc này git  trở thành nơi lưu dự án chung ngoài các PC của mọi người ( ông A, bạn B ) thì có rất nhiều nơi cho phép các bạn lưu trữ source code của team mình free luôn.

GIT có những cái gì?

GIT có những khái niệm cần biết, và hiểu để khi thao tác với GIT sẽ dễ dàng hơn.

Những khái niệm cơ bản.

  • Git repo
  • Branch
  • Commit
  • Pull
  • Push
  • Clone
Image.tiff

Mỗi một máy tính được cài GIT thì được gọi là GIT repo, nó bao gồm cả git server giống như github.com, hay bitbucket.com và gitlab.com . . . thường được gọi là Remote Repo và Local repo.

Remote repo là server git mà chúng ta push code lên, Local Repo là máy tính cá nhân của bạn và những máy tính mà bạn code trực tiếp lên đó tạo thay đổi ở đó.

Branch là những nhánh code hoặc những phiên bản do mình quy định, để phát triển một tính năng gì đó hoặc fix lỗi gì đó gọi là Branch.

Commit là những message những thay đổi sau khi code được log lại nhằm lưu trữ xem những thay đổi ở lần commit này là gì như thế nào? mỗi một commit thường đi kèm với những file thay đổi là gì? thông tin của thay đổi đó?

Pull là hành động lấy source code từ GIT remote repo về Local repo, và push thì ngược lại là đẩy commit ( những thay đổi ) lên Remote repo.

Clone là lấy source code từ 1 project cụ thể từ git remote về local repo.

Sử dụng như thế nào?

Tất nhiên là chúng ta sẽ phải cài git vào máy tính thì mới sử dụng được rồi, và cài thế nào thì chỉ cần google là biết cài liền, ngoài ra bạn sẽ có thắc mắc là các Repo làm việc với nhau như thế nào? và nói chuyện với nhau ra làm sao? thì chúng nó có quả SSH key để tương tác để nhận ra Key này của tài khoản nào và của ai?

Các bước cần làm.

  • Cài đặt GIT
  • Tạo project
  • Add remote hoặc clone project từ git repo
  • Tạo sự thay đổi
  • Commit code
  • Push code lên GIT remote Repo

Tài liệu về GIT

Bài này mình chỉ mang đến cho những bạn mới vào nghề có được những mường tượng về GIT là gì? sử dụng như thế nào? có những khái niệm gì? còn về thực tế thì có rất nhiều tài liệu hiệu quả và cặn kẽ về GIT, đơn giản chỉ cần tìm và làm theo là được, và nó khá là dài nên tìm hiểu dần dần.

Mình sẽ giới thiệu 2 link về GIT để cho các bạn focus và tránh bị lan man:

Tài liệu gốc về git : link
Ngoài ra có bài này cũng khá ok link ở đây

Tổng kết

Bài viết trên đây chỉ mang tính khái quát hóa, khái niệm về GIT cho những bạn chưa có khái niệm gì về GIT và cũng chưa mường tượng được tại sao phải sử dụng GIT? hay sử dụng nó như thế nào?.

Git thực sự đóng vai trò rất quan trọng trong quá trình làm việc, chính vì vậy mà chúng ta nên biết nó trước khi biết lập trình, trước khi làm team.

Hiện tại có rất nhiều open source được lưu trên git nếu chúng ta biết tận dụng thì việc tạo ra được một phần mềm, sẽ không phải tốn nhiều công sức nữa.

Bài 1: Hello PHP

Hoàng Kiếm
-
0
Bài 1: Hello PHP

Như bài viết về Học một ngôn ngữ lập trình mới mình đã mô tả những đặc điểm chung của một ngôn ngữ lập trình là gì? và để học, nắm được tổng quan về ngôn một ngôn ngữ lập trình thì ta cần làm gì rồi các bạn nếu chưa đọc thì bỏ qua khoảng 5 phút lướt qua mình có nêu qua khái niệm về học một ngôn ngữ mới như thế nào rồi hãng đọc bài này nhé, vì bài này sẽ liên quan chút tới bài đó và để đảm bảo cho việc học PHP nhanh hơn thì mình nghĩ nên đọc bài đó.

Chủ đề bài này sẽ là tổng quan về PHP, và cách viết Hello PHP ( thay vì Hello world ) bằng nhiều cách bằng ngôn ngữ PHP, bài này mình sẽ bỏ qua việc cài đặt môi trường như thế nào, nếu cần thiết mình sẽ có một bài riêng cụ thể nhé.

Tóm tắt về  PHP

Ngôn ngữ lập trình PHP là ngôn ngữ lập trình backend, tức là nó cần có một môi trường cụ thể dịch nó thành mã máy khi đó mới hiển thị ra trình duyệt được và nó được viết trong cặp thẻ <?php ?>, nó có đủ các thuộc tính cũng như các câu lệnh như 1 ngôn ngữ lập trình bình thường như:

  • Biến, mảng, Object
  • Vòng lặp
  • Biểu thức điều kiện
  • Hàm
  • … 

Làm sao để viết Hello PHP?

Cách 1: dùng hàm `Echo`

Thật đơn giản chỉ cần viết 1 file PHP rồi chạy nó dưới localhost của mình là được:

tạo 1 file php như sau test.php với nội dung:

<?php
echo "Hello PHP";


Sau đó chạy http://localhost/test.php và thấy ngay kết quả.

Kết luận: để in hoặc xuất 1 dòng chữ ra ngoài màn hình thì dùng hàm echo, ngoài ra còn có vài hàm khác nữa như print, printf  (cái này tự tìm hiểu nhé giờ chỉ cần biết ECHO (ê-chó) là được ) …

Cách 2: dùng biến.

Tạo 1 file php hoặc cũng file test.php lúc nãy giờ xóa echo “Hello PHP”;

<?php
$hello = "Hello PHP";
echo $hello;

Tiếp tục chạy  http://localhost/test.php và  thấy ngay kết quả.

Kết luận: Biến của PHP được khai báo với $ten_bien và có thể in ra màn hình bằng cách dùng echo. (Ghi nhớ khai báo biến với đô la đằng trước tên biến và tên biến cũng có quy định đặt tên của nó ( tìm hiểu sau hoặc test thử biết ngay ) )

Cách 3: Dùng Hàm.

Cũng phải chạy 1 file .php như các ví dụ trên và nội dung mình sẽ viết nhiều cách nhưng ở đây chỉ trình bày 1 cách cho dễ nhớ:

Xóa đoạn code trong file PHP đi và điền nội dung sau:

<?php
function tenHam(){
     echo "Hello PHP";
}

tenHam();


Ok chạy http://localhost/test.php và lại thấy kết quả

Kết luận: Hàm của PHP được khai báo với chữ function ( đọc là phăng sừn ) phía trước tên hàm và 2 dấu ngoặc vào trong sau đó là ngoặc nhọn và khối lệnh. ( Ghi nhớ khai báo hàm với chữ function và tên hàm () và {} tên hàm cũng có quy định của nó (tìm hiểu hoặc test thử biết ngay)), để ý cái gọi tenHam(); nhé

Kết luận

Bài này nhằm mục đích để bạn nắm sơ qua về PHP, nếu chỉ mỗi in ra màn hình dòng chữ thôi thì nó quá đơn giản, mục đích là bạn phải mường tượng được In ra màn hình dùng cái gì?, Biến được khai báo như thế nào?, Hàm khai báo như thế nào? Gọi hàm như thế nào?

  • In ra màn hình dùn echo.
  • Khai báo biến dùng toán tử $.
  • Khai báo hàm dùng function trước tên hàm.
  • Gọi hàm bằng cách dùng tenham() với 2 dấu ngoặc.
  • Sau mỗi câu lệnh có chấm phẩy ;
  • Bắt đầu viết code thì có <?php  và kết thúc có ?>

Học một ngôn ngữ lập trình mới

Hoàng Kiếm
-
0
Học một ngôn ngữ lập trình mới

Học một ngôn ngữ lập trình mới như thế nào? đó là câu hỏi mà mình thắc mắc bấy lâu, giờ đã có tuổi thì cũng tìm được cách thức tiếp cận và cách hoạt động, cũng như cách xử lý sự vụ khi tiếp cận với một ngôn ngữ mới.

Ngôn ngữ lập trình cũng như ngôn ngữ nói, khi bạn được tiếp cận đủ lâu thì bạn sẽ tự thấm cũng như tìm được sự logic từ nó.

Cách tiếp cận

Về cơ bản ngôn ngữ mới hay ngôn ngữ lập trình bậc cao đều có các điểm chung, và chúng có những điểm mạnh riêng của nó nên mới có nhiều ngôn ngữ đến như vậy, chúng ta sẽ tiếp cận chúng từ những điểm chung này.

Thông thường sẽ là:

  1. Cài đặt môi trường.
  2. Cú pháp để viết thường sẽ là Hello World.
  3. Cách khai báo biến.
  4. Vòng lặp.
  5. Biểu thức điều kiện.
  6. Cách khai báo hàm.
  7. Các hàm có sẵn.
  8. Cách debug lỗi.
  9. Tương tác với cơ sở dữ liệu.
  10. Làm 1 project thực sự.

Theo các bước như vậy thì bạn đã có cơ bản ngôn ngữ đó rồi, vậy cách tiếp cận của chúng ta là sẽ đi nhanh nhất có thể những thứ cơ bản bên trên.

Cách sử dụng

Thông thường chúng ta học một ngôn ngữ hoặc một thứ gì đó mới theo nhu cầu thì sẽ nhớ được lâu hơn, vì khi bạn có nhu cầu bạn sẽ phải thực hành, sử dụng nó vào một bài toán thực sự, khi đó bạn mới có thể nhớ và biết được vấn đề của nó ở đâu như thế nào.

Chính vì thế khi học một ngôn ngữ mới nói chung thì bạn phải thực hành với nó đó là ra một bài toán cụ thể để xử lý cũng như giải quyết vấn đề thì mới có thể mong sau này dử dụng nó một cách trôi chảy.

Kết luận

Trên đây là ý kiến cá nhân của mình về cách tiếp cận một ngôn ngữ mới, các bạn có thể comment cách tiếp cận của mình với một ngôn ngữ mới hiệu quả nhất. Mỗi người một cách đây là cách mà mình áp dụng cho 1 ngôn ngữ mới khi bắt đầu từ con số 0.

Mailtrap và Test sending email

Hoàng Kiếm
-
0
Mailtrap và Test sending email

Thường tạo 1 app hay 1 website thường có chức năng gửi mail đi và nhận email, dev thường dùng email của mình để test hoặc email của thằng bạn để test, cơ mà nó phiền ở chỗ bạn phải mở mail để check, với những ứng dụng gửi mail hàng loạt thì bạn lại phải mở bao nhiêu cái email để check nữa, chưa kể đến là email bị đánh dấu là spam nữa tốn bao nhiêu thời gian chỉ để login logout và xóa email. Hôm nay mình hướng dẫn các bạn sử dụng  Mailtrap để test gửi mail, nó phù hợp với cả developer và tester.

Tại sao dùng Mailtrap?

Bình thường chúng ta sẽ sử dụng SMTP của một dịch vụ email nào đó để test gửi mail có ok hay không, trường hợp này bạn phải biết SMTP của dịch vụ đó như thế nào rồi config sau đó test, với tester thì lại phải nhờ dev để hỗ trợ mình việc setup và còn phải test nhiều thứ nữa. Với MailTrap bạn chỉ việc setup 1 lần rồi check tất cả Email gửi đi ở một chỗ, thật là tiện và không bao giờ vào SPAM cả. 

Trường hợp đặt ra là mình test trên con app staging ( con app gần giống với con thật ) trường hợp nhấn gửi mail hàng loạt thì bao nhiêu email khách hàng trên con app này đều nhận được Email tuy nhiên với MailTrap thì không, bạn sẽ nhận được nội dung Email gửi cho khách hàng tại tài khoản MailTrap của mình.

Về bản chất MailTrap sẽ không gửi Email đến những Email thật mà nó sẽ gửi trực tiếp đến inbox của MailTrap ở đây bạn có thể kiểm tra nội dung email để fix.

Ưu điểm:

Dễ dàng đăng ký, dễ dàng sử dụng chỉ cần đăng ký là có SMTP để check rồi nhanh chóng hoàn thành task.

Dưới đây là các ưu điểm chính:

  1. Không bao giờ xảy ra việc spam mail các khách hàng thật bởi những sơ suất của đội phát triển
  2. Phân tích email cho spam và blacklist
  3. Test HTML cho việc hỗ trợ bởi các common email clients
  4. Mặc định bảo mật (HTTPS & TLS)
  5. Cài đặt nhanh chóng và dễ dàng bằng cách dùng config code
  6. Cải thiện RESTful & POP3 API autotests
  7. Tự động Forward emails tới những người cần chúng
  8. Sắp xếp các Email test vào hộp thư đặc biệt
  9. Chia sẻ inboxes với team của bạn

Nhược điểm:

Hiện tại thằng Mailtrap nó giới hạn lượng email nhận chỉ 50 email thôi nên nếu test nhiều thì mình sẽ phải trả phí. ( tạm coi là nhược điểm )

Những ưu điểm trên kia thì có một số cái sẽ không có ở tài khoản free.

Sử dụng

Đăng ký tài khoản

Truy cập website https://mailtrap.io sau đó đăng ký một tài khoản, bạn có thể sử dụng Gmail hoặc đối với dev thì dùng github luôn cũng được.

Hình ảnh sau khi đăng ký và tạo Inbox.

Như hình trên bạn có thể chọn cấu hình cho rất nhiều FrameWork khác nhau để test.

Config SMTP

Bạn chỉ cần chọn FrameWork của mình ( trường hợp dùng FrameWork ) để config. Tuy nhiên chỉ cần chọn SMTP như trong mục SMTP settings là có thể nhận được email đến rồi.

Kết luận

MailTrap khá tiện lợi cho cả dev và tester công việc test gửi nhận email không bao giờ dễ đến thế. Mọi thắc mắc cứ comment hoặc bài viết có vấn đề gì thì cứ ping mình mình sẽ update.

Chuyển từ Google Maps sang OpenStreetMap

Hoàng Kiếm
-
0
Chuyển từ Google Maps sang OpenStreetMap

Như bạn có thể nhận thấy, API Google Maps bắt đầu được trả tiền vào ngày 16 tháng 7 năm 2018. Không có gì sai cả, chúng ta đang trả tiền cho tất cả các tính năng được nhóm Google phát triển. Nhưng nếu bạn là chủ sở hữu của trang web đơn giản và bạn chỉ muốn hiển thị một phần bản đồ với vị trí văn phòng của bạn? Bạn có thể sử dụng OpenStreetMap .

Có dễ dàng không?

Bên dưới, bạn có thể thấy toàn bộ mã được yêu cầu để tạo bản đồ, định vị mã, đặt điểm đánh dấu và tạo cửa sổ bật lên có địa chỉ văn phòng.

Chúng ta đã làm gì?

Chúng tôi đã sử dụng thư viện Leaflet để xử lý việc hiển thị bản đồ. Trong ví dụ trên, trong phần đầu, tôi đã sử dụng phiên bản được lưu trữ của tệp CSS và JS, nhưng bạn có thể tải xuống nó trên máy chủ của mình và lưu trữ cục bộ. Trong phần nội dung, bạn có thể thấy phần tử div của id “mapDiv” được định cấu hình rộng 800 pixel và cao 500 pixel.

Phần còn lại của ma thuật chỉ đơn giản là được đặt trong kịch bản. Lúc đầu, chúng tôi đang thiết lập vĩ độ và kinh độ của điểm chúng tôi muốn đặt điểm đánh dấu trên (và đây cũng sẽ là trung tâm của bản đồ của chúng tôi). Tiếp theo, chúng tôi sẽ tạo bản đồ, sẽ được đặt trong phần tử “mapDiv” của chúng tôi, tập trung vào vị trí chúng tôi đã chọn và thu phóng đến cấp 13. Bạn có thể thay đổi mức thu phóng để phù hợp hơn với nhu cầu của mình.

Điều quan trọng là cấu hình nguồn bản đồ. Có nhiều nguồn bản đồ khác nhau mà bạn có thể sử dụng, nhưng trong ví dụ này, tôi muốn giữ mọi thứ thẳng nên tôi chỉ cần định cấu hình các ô OpenStreetMap làm nguồn. Xin lưu ý rằng bạn phải giữ thông tin bản quyền trong trường hợp này.

Chúng tôi gần như hoàn thành. Bây giờ chúng ta có thể đặt điểm đánh dấu trên bản đồ (trên vĩ độ và kinh độ được cấu hình trước đó). Bước cuối cùng, chúng tôi đang đặt cửa sổ bật lên với thông tin về công ty của chúng tôi.

Đây có thực sự là tất cả những gì tôi cần không?

Đây là cách sử dụng cơ bản của Leaflet với OpenStreetMap. Tuy nhiên, thư viện Leaflet mạnh hơn rất nhiều. Bạn có thể vẽ trên bản đồ, đặt các vật thể khác nhau, phản ứng với các sự kiện – bạn sẽ tìm thấy nhiều thông tin hơn trong tài liệu của Leaflet .

Vị trí địa lý

Thư viện Leaflet không chứa bất kỳ chức năng nào để thực hiện định vị địa lý dựa trên chuỗi địa chỉ. Nếu bạn muốn thực hiện các hoạt động như vậy, bạn nên xem API OpenStreetMap Nominatim . Nó cho phép bạn tìm kiếm bằng cách sử dụng các địa điểm được đặt tên (theo tên đường phố, thành phố, v.v.) và không được đặt tên các địa điểm như cửa hàng, quán rượu, v.v.

Một bản đồ tĩnh thay thế

Ngoài ra còn có một đề cập khác đáng nói đến. Nếu bạn không muốn xử lý mã JavaScript và thư viện, bạn có thể chỉ cần sử dụng bản đồ tĩnh được hiển thị dưới dạng hình ảnh trên trang web của mình. Có sẵn trình tạo bản đồ tĩnh đẹp .

Google I/O Extended Hanoi 2018

Hoàng Kiếm
-
0
Google I/O Extended Hanoi 2018
Lâu rồi mới join Meetup có lẽ là cũng đã hơn 2 năm rồi mới chui ra ngoài đường để biết mình đang như thế nào và mình nên như thế nào.
Buổi hôm nay cũng có livestream nên chắc mọi người cũng nghe qua hoặc xem qua nhưng mình cứ note lại đây.
Những chủ đề mà mình tham gia.
  1. Keynote
  2. Machine learning on Browser and TenorFlow for Javascript
  3. The Web in 2018
  4. Make your website faster & earning more with AMP.
  5. Golang microservice + gRPC
  6. Develop Fluter mobile app for IOS and Android
  7. Build Realtime mobile app for IoTs with Google Service
  8. Material Design focus on the user and all else will follow
Link chi tiết các session mọi người có thể xem ở đây: https://ioextended.org/sessions
  1. Mở đầu phần Keynote
Phần này có 1 ông người Ấn Độ Mani K lên nói qua về chủ đề của Google IO năm nay sẽ có những gì mới:
thì có những thứ mới như
Androi P, Chrome, google Cloud Platform . . .
phần này có video live nên mọi người có thể xem ở đây https://youtu.be/rO6TZbU7zRI?t=1343
  1. Machine learning on Browser and TenorFlow for Javascript
Phần này diễn giả sẽ thuyết phục mọi người là Machine learning trên trình duyệt là điều hoàn toàn có thể và nói qua về 2 bài toán cụ thể, cách giải quyết của bài toán đó.
  1. The Web in 2018
Khá là thích thú phần này vì nó khá là mới mẻ và cũng vui thật là may mắn khi có video và mọi người xem phần này nhé:
  1. Make your website faster & earning more with AMP.
Phần này chủ yếu là tối ưu phiên bản website cho mobile với AMP https://youtu.be/JWn2vESsRcY?t=4844
  1. Golang microservice + gRPC
Phần này ko có live nên mọi người sẽ không có video để xem và lúc này thì đt của em đã bị hết pin rồi nên cũng không có gì log lại. Phần tron room 2 này cũng hơi bị fail vì do cả 1 tầng họ ngăn ra thành 3 phòng để talk thì phòng 2 ở giữa bị át bởi tiếng từ 2 phòng khác.
Mở đầu thì diễn giả có bảo anh em xem slide trên: bit.ly/micro để tiện theo dõi tuy nhiên đến giờ thì hình như server của cái slide này hìu rồi.
Bài toán đặt ra là họ phải chọn giải pháp cho website của bên họ làm cho nó trở nên nhanh hơn đáp ứng được nhiều người dùng hơn mà có thể không cần dùng tới API gate way ( em nhớ là vậy ) anh ý có nói qua về những mô hình API mà đưa lên bàn cân để lựa chọn thì sau bao nhiêu thứ linh tinh cuối cùng chọn ông GOLANG & gRPC.
Cái mà mình nhớ được đó là gRPC nó sẽ truyền dữ liệu nhanh hơn vì dữ liệu của nó là dạng binary chứ không phải text hay gì cả.
Phần này đang demo app thì hết giờ & nghe cái này cũng hơi buồn ngủ nên không log lại được nhiều nói chung buổi talk của anh này hơi fail vì không đủ thời gian + với vị trí ko đẹp.
  1. Develop Fluter mobile app for IOS and Android
Đại khái thằng Google nó ra cho dev 1 cái framework mới cho IOS và Androi cũng chỉ viết 1 lần mà chạy được trên 2 thiết bị tuy nhiên nếu tiếp cận nó từ base là C# hoặc Java thì sẽ dễ hơn nếu là anh em mình chuyên web thì cứ React native mà vã cho nhanh.
  1. Build Real-time mobile app for IoTs with Google Service
Phần này cũng ở room 2 ko có live tuy nhiên ở đó cũng có các bạn đi và có 2 cậu có dùng Ipad để quay lại và mình cũng join luôn group facebook của 2 bạn này và có đc cái video quý giá này vì khi có video mình sẽ không phải nói gì nữa cả.
Phần lớn bài này nói về IoT và phần database realtime Firebase
Tiếp theo là nói về IoT core của thằng google ( dành cho ông nào dùng nhiều thôi ví dụ cả 1 công xưởng hay cả 1 hệ sinh thái . . .)
Sau đó là nói về giá của Firebase.
  1. Material Design focus on the user and all else will follow.
Phần này có 1 bạn nữ lên nói tuy nhiên hơi fail vì bạn ý lượn khinh quá đôi khi che luôn cả slide vì phòng này là phòng 2 ko có livestream nên mọi người cũng không thể xem đc video. Phần này khi nói đến phần so sánh giữa Flat Design và Material Design thì cảm thấy ko nhập được nữa nên em out và đi về.
Nội dung chính của bài là nói về Material design focus đến trải nghiệm người dùng, thê mạnh của material design với flat design. Google sinh ra material design & tất cả sản phẩm của họ từ mobile cho đến website đều theo bộ UI này để tăng thêm nhận diện thương hiệu khi user chuyển từ website xuống mobile vì nó không thay đổi gì nhiều khi chuyển xuống như vậy.
Tuy nhiên theo quan điểm cá nhân và cách trình bày của bạn này thì còn có nhiều mâu thuẫn ví dụ:
Bạn ý có nói đến vấn đề là design càng đơn giản càng tối giản thì trải nghiệm người dùng được tăng lênok vấn đề này tuy nhiên khi nói về flat design ( theo nhận định cá nhân em thì nó còn tối giản hơn cả thằng Material design ) lại phủ định là nó không tốt bằng material ( không đồng quan điểm ).
Tiếp theo là nói về nút và hiệu ứng của những nút trên flat design và material design thì phần này lại nói đến hiệu ứng của material sẽ tăng trải nghiệm hơn tuy nhiên theo bản thân thì hiệu ứng thằng nào cũng làm được hết chỉ là với thằng material nó sẽ có những đổ bóng, lượn sóng, chia lớp tạo cho người dùng cảm thấy có thứ tự giữa các layer, ngoài ra nó có hiệu ứng mượt mà khi user tab trên mobile hay click chuột trên mobile user sẽ được focus hơn ( có thể là vậy ) tuy nhiên phần này trên flat design thì có thể là đổi màu & transition cũng chẳng sao.
Nói tóm lại giữa 2 phong cách thiết kế Flat Design và Material Design không thể khẳng định ông nào hơn được vì mỗi cái có 1 thế mạnh có  1 điểm riêng của nó.

Khắc phục lỗi mixed content trong WordPress

Hoàng Kiếm
-
0
Khắc phục lỗi mixed content trong WordPress

Bạn có thấy lỗi nội dung hỗn hợp trong WordPress không? Lỗi nội dung hỗn hợp trong WordPress là do cài đặt HTTP / SSL không chính xác. Thông thường, nó không ảnh hưởng đến chức năng của trang web của bạn, nhưng nó có thể ảnh hưởng xấu đến SEO và trải nghiệm người dùng của trang web của bạn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách khắc phục lỗi nội dung hỗn hợp trong WordPress.

Lỗi nội dung hỗn hợp ( mixed content ) trong WordPress là gì?

Bạn nên thêm HTTPS / SSL vào WordPress vì sau tháng 7 năm 2018, Google Chrome sẽ đánh dấu tất cả các phiên bản http của trang web là không an toàn.

SSL thêm lớp bảo mật bổ sung xung quanh dữ liệu được chuyểntừ trang web của bạn tới trình duyệt của người dùng. Các công cụ tìm kiếm như Google

khuyên bạn nên sử dụng SSL trên trang web của bạn.

Tất cả các công ty lưu trữ WordPress tốt nhất hiện đang cung cấp SSL miễn phí như một phần của gói của họ. Nếu công ty lưu trữ của bạn không cung cấp, bạn có thể nhận được SSL miễn phí thông qua Let’s Encrypt cho trang web WordPress của bạn.

Nếu bạn đã triển khai SSL chính xác trên trang web của mình, thì bạn sẽ thấy biểu tượng ổ khóa màu xanh lá cây bên cạnh URL của trang web trong thanh địa chỉ trình duyệt.

Mặt khác, nếu cài đặt HTTP / SSL của bạn không được thiết lập đúng cách, thì bạn sẽ thấy dấu thông tin hoặc biểu tượng ổ khóa bị đỏ trên thanh địa chỉ.

Điều này cho thấy rằng mặc dù trang web của bạn đang sử dụng chứng chỉ SSL , một số nội dung trên trang web của bạn vẫn được phân phát từ url không phải HTTPS.

Bạn có thể tìm hiểu nội dung nào được phân phát qua giao thức không an toàn bằng cách sử dụng Inspect Element của trình duyệt Chrome . Lỗi nội dung hỗn hợp sẽ được hiển thị dưới dạng cảnh báo trong bảng điều khiển với chi tiết cho từng mục nội dung hỗn hợp.

Nếu đó chỉ là một file nhất mà bạn có thể khắc phục theo cách thủ công, thì bạn có thể tiếp tục và khắc phục bằng cách chỉnh sửa bài đăng, trang hoặc tệp  nơi nó xuất hiện.

Tuy nhiên, trong hầu hết các trường hợp, các mục này được WordPress thêm tự động hoặc được lưu trữ trong cơ sở dữ liệu của bạn. Trong trường hợp đó, sẽ rất khó để phát hiện tất cả chúng và sửa chúng theo cách thủ công.

Điều đó đang được nói, chúng ta hãy xem xét cách dễ dàng sửa lỗi nội dung hỗn hợp trong WordPress.

Sửa lỗi nội dung hỗn hợp trong WordPress

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin SSL Insecure Content Fixer.

Khi kích hoạt, bạn cần truy cập trang Cài đặt » SSL Insecure Content Fixer để cấu hình cài đặt plugin.

Cài đặt plugin nội dung bảo mật SSL

Plugin này cung cấp các cấp độ sửa lỗi khác nhau cho lỗi nội dung hỗn hợp. Chúng tôi sẽ giải thích mỗi người trong số họ, những gì họ làm, và cái nào là tốt nhất cho bạn.

1.Simple

Đây là phương pháp nhanh nhất và được đề nghị cho tất cả người dùng mới bắt đầu. Nó tự động sửa lỗi nội dung hỗn hợp trong WordPress cho tập lệnh, biểu định kiểu và hình ảnh thư viện phương tiện WordPress.

2.Content

Nếu phương pháp đơn giản không khắc phục được lỗi nội dung hỗn hợp trên trang web của bạn thì bạn nên thử phương pháp này. Nó sẽ sử dụng tất cả các tính năng đơn giản, ngoài việc kiểm tra các bản sửa lỗi bên trong nội dung WordPress và các tiện ích văn bản.

3. Widgets

Điều này bao gồm tất cả các bản sửa lỗi được áp dụng ở cấp độ nội dung cộng với bản sửa lỗi bổ sung cho các tài nguyên được tải trong tất cả các tiện ích WordPress trên trang web của bạn.

4. Capture

Phương pháp này ghi lại mọi thứ trên mọi trang của trang web của bạn từ đầu trang đến chân trang và thay thế tất cả các URL bằng HTTP. Nó chậm hơn và sẽ ảnh hưởng đến hiệu suất của trang web của bạn.

5. Capture All

Khi tất cả các cấp trên không thành công, thì bạn có thể thử phương pháp này. Nó cố gắng sửa mọi thứ có thể dẫn đến một số hành vi bất ngờ trên trang web của bạn. Nó cũng sẽ có tác động tiêu cực nhất đến hiệu suất.

Sau khi chọn cấp độ sửa lỗi nội dung, bạn cần phải cuộn xuống phần phát hiện HTTPS. Đây là nơi bạn có thể chọn cách phát hiện nội dung HTTP trên trang web của mình.

Phát hiện HTTPS

Các tùy chọn mặc định là sử dụng một chức năng WordPress, mà sẽ làm việc cho hầu hết các trang web.

Bên dưới, bạn sẽ tìm thấy các tùy chọn khác đặc biệt hữu ích nếu bạn đang sử dụng Cloudflare CDN , máy chủ web nginx và hơn thế nữa. Tiếp tục và chọn phương pháp bạn nghĩ áp dụng cho trang web của bạn tùy thuộc vào thiết lập cụ thể của bạn.

Click chọn nút Save Changes để lưu lại cấu hình.

Bây giờ bạn có thể truy cập vào trang web của mình để xem điều này có giải quyết được sự cố nội dung không an toàn trên trang web của bạn hay không. Đảm bảo xóa bộ nhớ cache WordPress của bạn trước khi kiểm tra trang web của bạn.

Nếu lỗi nội dung hỗn hợp trong WordPress không cố định, hãy truy cập lại trang cài đặt của plugin và điều chỉnh các mức sửa lỗi.

Đây là vấn đề thực tế mà Wpazweb đã gặp phải khi cài đặt plugin Swift Performance toàn trang đều bị lỗi cả sau khi tìm phương án để xử lý thì đã giải quyết được vấn đề. Hi vọng các bạn cũng giải quyết được vấn đề của mình.

Bài viết được tìm hiểu và tổng hợp trên mạng cũng như thực tế mà mình xử lý sự vụ.

Tham khảo thêm từ wpbeginer.com

SaveSave

SaveSave

Cài đặt Laravel trên macosx kết hợp XAMPP

Hoàng Kiếm
-
0
Cài đặt Laravel trên macosx kết hợp XAMPP

Hiện tại trên blog của mình chỉ có chủ yếu là  những bài viết về WordPress và nó là 1 PHP CMS phổ biến, hôm nay mình quyết định hướng dẫn các bạn cài cắm 1 con PHP framework đình đám nữa để mở đầu cho seri về Laravel frame work.

PHP được cài đặt sẵn trên Mac OS X theo mặc định đó là lý do tại sao nếu bạn cài đặt XAMPP hoặc WAMP trên mac của bạn, bạn sẽ cài đặt phiên bản PHP thứ hai. Để biết phiên bản nào của PHP, bạn đang chạy trên máy Mac, mở Terminal của bạn và chạy lệnh dưới đây:

1
which php

Nếu kết quả là:

1
/usr/bin/php

Bạn cần thay đổi sang phiên bản PHP, mà bạn đã cài đặt với XAMPP. Để làm điều này, bạn nên tạo một tệp .bash_profile trên thư mục chính của bạn bằng cách sử dụng Terminal và chạy các lệnh bên dưới từng cái một:

1
cd
1
sudo nano .bash_profile

Sau đó, bạn nên thêm lệnh sau vào bên trong tệp .bash_profile mới:

1
export PATH=/Applications/XAMPP/xamppfiles/bin:$PATH

Sau đó, nhấn control-x, khi thiết bị đầu cuối yêu cầu bạn lưu thay đổi, nhập Y và nhấn Enter lần nữa. Sau đó, bạn nên thoát và mở lại Thiết bị đầu cuối của mình.

Để đảm bảo rằng bạn đã thay đổi phiên bản PHP chính xác, bạn có thể chạy lệnh “which php” một lần nữa và nhận được kết quả sau:

1
/Applications/XAMPP/xamppfiles/bin/php

Laravel sử dụng nhà soạn nhạc để quản lý các phụ thuộc của nó. Vì vậy, trước khi sử dụng Laravel, bạn nên cài đặt trình soạn thảo cho mac của bạn. Để cài đặt nhà soạn nhạc, bạn nên làm theo hai bước sau;

1. Định vị thư mục htdocs bằng cách sử dụng Terminal

1
cd /Applications/XAMPP/htdocs

2. Tải xuống và cài đặt trình soạn thảo bên trong thư mục htdocs

1
curl -sS http://getcomposer.org/installer | php

Bây giờ, bạn đã sẵn sàng để cài đặt Laravel! Để cài đặt Laravel, hãy chạy lệnh sau trên Terminal của bạn.

1
php composer.phar create–project laravel/laravel —prefer–dist

Đó là tất cả! Để đảm bảo rằng mọi thứ hoạt động chính xác, trong khi máy chủ Apache của bạn đang chạy, hãy mở trình duyệt của bạn và gõ  http: // localhost / laravel / public ,  trang Laravel mặc định sẽ được nhìn thấy trong trình duyệt của bạn như bên dưới.

 

SaveSave

Share layout portfolio timelife

Hoàng Kiếm
-
0
Share layout portfolio timelife

Hôm nay mình sẽ chia sẻ HTML layout của một portfolio dạng timelife cho các bạn nào có nhu cầu làm portfolio dạng timelife, phần design này mình clone từ một trong những sản phẩm của Wix.com, theo mình thì dạng timelife này khá ấn tượng vì nó nói rõ được các công ty mà mình đã đi qua thời gian làm và vị trí của mình là gì.

Dưới đây là preview của web, hiện tại mình mới chỉ kịp HTML CSS JS cho nó chứ chưa tạo hiệu ứng gì cả … các bạn có thể fork phần repo trên github về để hoàn thành nốt nó nhé. Mình cũng sẽ vẫn hoàn thành nó tuy nhiên thời điểm hiện tại do công việc cũng như phần thời gian rảnh của mình không có nhiều nên mình xin phép được dừng nó ở mức responsive sơ sơ, và chưa có hiệu ứng.

bio timelife layout
Author bio timelife

Github repo đây mọi người nhé: https://github.com/binjuhor/bio-landing

Source code các bạn có thể download ở đây nhé

SaveSave

SaveSave

SaveSave

Chia sẻ layout blog dạng Timelife

Hoàng Kiếm
-
0
Chia sẻ layout blog dạng Timelife

Chia sẻ layout blog bao gồm file sketch & HTML CSS, JS. Bữa nọ mình mày mò sketch & bập bẹ làm design . . . quả thật cũng rất khó để trở thành 1 design chuyên nghiệp. Nhưng không sao Sketch thực sự là rất dễ sử dụng, nó giống như các tool dành cho thiết kế khác, Nếu bạn là 1 developer chuyên nghiệp thì mình nghĩ sử dụng sketch hay zeplin hay photoshop hay thậm chí cả file Ai cũng quất hết.

Layout này mình clone từ một bạn trên Behance và mình không còn nhớ link gốc nữa chẳng qua mình thích làm web thích những layout độc dị thì mình đi pin trên Pinterest & mong 1 ngày được làm với những thiết kế như vậy.

Nếu các bạn là những người cũng thích web như mình thì cứ việc follow nhé. Hiện tại mình cứ pin những gì mình thích thôi. Pinterest của mình ở đây nhé.

Không dài dòng nữa demo đây nhé các bạn.

Chia sẻ blog dạng timelife
Time life layout

Link link demo,  links GitHub, file sketch đây nhé . . .

Để chạy được source code thì các bạn Download hoặc clone nó về.

Chỉnh sửa css thì các bạn sửa file sass rồi chạy gulp sass là ok nhé ( trước khi chạy gulp nhớ chạy npm update nha ).

Bài này chỉ mang tính chất chia sẻ phần HTML và phần Sketch file mình làm ra nó & mình muốn chia sẻ nó cho ai cần, các bạn cũng có thể comment hoặc góp ý cho mình nhé, trân trọng cám ơn nhiều.

Note: Bài viết chia sẻ blog layout này chỉ là để cho nhà mình đỡ mốc, làm cái blog mà ko chia sẻ gì thì cũng phí . . . thật là rảnh quá đi mà, mọi resource các bạn có thể dùng & tùy biến thoải mái nhé vì nó đều là của mình & ko mang tính chất thương mại hay copyright gì cả mình cũng mới tập thôi :D.

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

1...345...12Page 4 of 12
Made with love ❤ by Binjuhor️