Read More
Read More
Hiển thị các bài đăng có nhãn Web Developer. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Web Developer. Hiển thị tất cả bài đăng
Thứ Tư, 25 tháng 10, 2017
Read More
Thứ Năm, 30 tháng 3, 2017
Chủ Nhật, 5 tháng 3, 2017
Bài viết này sẽ tổng hợp lại 11 thủ thuật console trên trình duyệt Chrome cho các nhà phát triển web, giúp các bạn tăng tốc quá trình code cũng như debug.
Read MoreThứ Bảy, 11 tháng 2, 2017
Năm 2015 là một năm tuyệt vời đối với ngành lập trình web: công nghệ web đã phát triển mạnh mẽ và vượt qua các yếu tố hình thức bên ngoài như việc xây dựng một trang web hay một ứng dụng web. Nhiều ứng dụng trên điện thoại hay máy tính đã được xây dựng bằng HTML, CSS và JavaScript. Điều này có thể thực hiện được bởi tính di động của công nghệ web và các thư viện như React.js, Angular và Node.js.
Trong series lần này, chúng tôi đã sử dụng một số ít các thư viện JavaScript và CSS.
Read More
Read More
Trong series lần này, chúng tôi đã sử dụng một số ít các thư viện JavaScript và CSS.
Read More
Chủ Nhật, 11 tháng 9, 2016
Happy Programmers Day!
Read More
Thứ Tư, 13 tháng 7, 2016
$config['csrf_protection'] = TRUE; thì mọi truy vấn từ client tới server đều được kiểm tra xem có chứa token hay không. Khi làm việc với các truy vấn ajax thì bạn sẽ phải thêm tham số token vào thủ công khá là mệt. Trong bài viết này, mình sẽ chỉ các bạn một cách để tự động thêm token vào mọi truy vấn ajax.Read More
Thứ Sáu, 1 tháng 7, 2016
1. Kẻ thù lớn nhất của developer là tester
4. Bi ai lớn nhất của developer là PC bị hỏng
5. Sai lầm lớn nhất của developer là tin rằng chương trình của mình không có lỗi
Read More
Thứ Ba, 10 tháng 5, 2016
Thứ Sáu, 6 tháng 5, 2016
Thứ Hai, 18 tháng 4, 2016
Thứ Năm, 7 tháng 4, 2016
Thứ Năm, 10 tháng 3, 2016
Thứ Ba, 1 tháng 3, 2016
Trong Blogspot (Blogger) thì chúng ta sử dụng mã như sau:
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>Và Facebook Bot sẽ thu được kết quả giống như này:
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprkgwqW3eybkCDei9HrFNzA24BVEJAYXgCD8G7WlaIGE8AIxcblikMEjCNogsos1F-UbMbWsqLlswrActzMokgIHXB7sX2ShQmTdRR4g20FrhIJVfBiie7A8XuQ_GsLiNHdBfS6EZuwzF/s72-c/get-free-xyz-domain.png" /> Vấn đề ở đây là ảnh thumbnail do Blogspot tạo tự động luôn được resize về kích cỡ 72x72, trong khi kích cỡ thumbnail chuẩn của Facebook khuyến cáo là 600x315.
Sau khi tìm kiếm, tôi nhận ra có vẻ ngay cả Google và StackOverflow cũng chưa có câu trả lời cho vấn đề này. Do đó, tôi quyết định tự trả lời câu hỏi này.
Phân tích cấu trúc link ảnh của Blogspot
Vì dùng Blogger đã lâu, tôi phát hiện ra một điều khá thú vị trong một lần xem mã nguồn một template blogspot được chia sẻ trên mạng. Đó là các liên kết hình ảnh trong Blogspot có thể resize được bằng cách thay đổi vài kí tự trong URL.
Cụ thể, với URL trong đoạn mã trên:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprkgwqW3eybkCDei9HrFNzA24BVEJAYXgCD8G7WlaIGE8AIxcblikMEjCNogsos1F-UbMbWsqLlswrActzMokgIHXB7sX2ShQmTdRR4g20FrhIJVfBiie7A8XuQ_GsLiNHdBfS6EZuwzF/s72-c/get-free-xyz-domain.png
Chú ý những ký tự sau: s72-c
Các bạn có nhớ tôi đã nói ở trên là thumbnail trong Blogspot được resize về cỡ 72x72 không? Ta có thể nhận ra mấy kí tự này có liên quan gì đó. Thử thay thành s200-c thì thấy:
Nó đã to lên đúng không? Như vậy s200 tương đương với width=200px; height=200px. Nhưng như thế thì ta chỉnh kiểu gì cũng chỉ nhận được ảnh vuông??
Không sao, sau khi vọc vạch thêm chút thì tôi phát hiện ra điều thú vị tiếp theo trong cấu trúc ảnh của blogspot - ta có thể resize kích cỡ bất kỳ bằng cách sử dụng định dạng: wXXX-hYYY-c
Trong đó: XXX là chiều dài, YYY là chiều rộng. Tính theo đơn vị Pixel (px).
Như vậy, để có kích cỡ chuẩn của thumbnail khi chia sẻ lên Facebook. Ta sẽ sử dụng: w600-h315-c
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprkgwqW3eybkCDei9HrFNzA24BVEJAYXgCD8G7WlaIGE8AIxcblikMEjCNogsos1F-UbMbWsqLlswrActzMokgIHXB7sX2ShQmTdRR4g20FrhIJVfBiie7A8XuQ_GsLiNHdBfS6EZuwzF/w600-c-h315/get-free-xyz-domain.png
Tạo thumbnail chuẩn cho Blogger
Với những gì ta đã biết ở trên thì áp dụng vào Blogspot như nào? Blogspot sử dụng biến data:blog.postImageThumbnailUrl để tự động lấy ra thumbnail từ ảnh đầu tiên trong bài viết. Chúng ta cũng không thể sử dụng JavaScript để replace các ký tự để tạo link ảnh chuẩn.Nhưng ta có thể tùy chỉnh các ký tự bổ sung bằng cách:
<meta expr:content='"XXX" + data:blog.postImageThumbnailUrl' property='og:image'/> Sau khi render ra HTML sẽ có dạng:
<meta property="og:image" content="XXXhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprkgwqW3eybkCDei9HrFNzA24BVEJAYXgCD8G7WlaIGE8AIxcblikMEjCNogsos1F-UbMbWsqLlswrActzMokgIHXB7sX2ShQmTdRR4g20FrhIJVfBiie7A8XuQ_GsLiNHdBfS6EZuwzF/s72-c/get-free-xyz-domain.png" /> Các bạn có chú ý thấy XXX nằm trước URL không? OK, vậy ta có thể tạo ra một proxy URL như:
http://www.example.com/proxy.php?img=[Thumbnail_URL]
Nói tới đây chắc các bạn đã đoán ra tôi định làm gì rồi đúng không? Việc replace ký tự trong URL thì quá đơn giản:
<?php
if (isset($_GET['img']) && filter_var($_GET['img'], FILTER_VALIDATE_URL)) {
$img = $_GET['img'];
if (strpos($img, '/s72-c/') !== FALSE) {
$img = str_replace('/s72-c/', '/w600-h315-c/', $img);
header("Location: {$img}");
}
}
exit;
Và code để nhúng trong template hiện tại của tôi có dạng như sau:
<meta expr:content='"http://junookyo.freevnn.com/?img=" + data:blog.postImageThumbnailUrl' property='og:image'/> Đoạn mã này có thể áp dụng cho mọi blog nên bạn có thể sử dụng thoải mái nhé!
Kết quả khi chia sẻ lên Facebook:
Thứ Hai, 4 tháng 5, 2015
 |
| Các công cụ, add-on Firefox hữu ích cho nhà phát triển web |
Một trong những mục tiêu luôn được quan tâm của Firefox là làm cho cuộc sống của các nhà phát triển web trở nên dễ dàng và hiệu quả nhất có thể bằng cách cung cấp các công cụ và một trình duyệt web rất mở rộng để cho phép mọi người tạo ra những điều tuyệt vời.
Danh sách này liệt kê rất nhiều các công cụ, add-on và các tùy chọn có sẵn dành cho nhà phát triển web sử dụng trình duyệt Firefox.
Đăng ký:
Bài đăng (Atom)
