A pseudo element example. Image by CSS Tricks

Bạn hãy cùng chúng tôi khảo sát cách dùng và những ứng dụng rất hay của pseudo-element trong bài hướng dẫn cụ thể và nhiều ví dụ thực tiễn này.

• Người hướng dẫn: Trần Trọng Thanh
• Xem thêm ứng dụng pseudo-element: http://css-tricks.com/pseudo-element-roundup/
• Video (screen cast): http://youtu.be/5YZbPyfrBtc

Form và Input là những đối tượng cơ bản nhất của HTML để người dùng tương tác với một website. Từ thuở sơ khai của web, đây cũng là cách duy nhất để nhà quản trị thu thập dữ liệu do người dùng cung cấp và là cơ sở của những dạng website động có sử dụng cơ sở dữ liệu.

Bài học này sẽ hướng dẫn các bạn làm việc với Forms và Inputs đồng thời giới thiệu một số "best practice" khi gửi dữ liệu form thông qua cách truyền thống và AJAX.

• Người hướng dẫn: Trần Trọng Thanh
• Code mẫu: https://gist.github.com/trongthanh/1d71a46f8b0d8aa8a675
• Tóm tắt bài học: https://docs.google.com/document/d/1iGHVqNXKn4jnNMFrQvD62QCSf649g6PQma1DJNykAjY/edit?usp=sharing
• Video: http://youtu.be/f28zD_HBKP8

jQuery là thư viện JavaScript rất đắc lực của lập trình viên giao diện, tuy nhiên việc lạm dụng hoặc viết không tối ưu sẽ dễ dàng làm cho website bị chậm và cản trở người truy cập.

Trong bài huấn luyện này, anh Quy sẽ hướng dẫn một vài kỹ thuật tối ưu tốc độ thực thi khi làm việc với những tiện ích trong jQuery.

• Giáo trình: JavaScript Căn Bản
• Người hướng dẫn: Trần Tuấn Quy - Technical Lead
• Slides: http://slides.com/tuanquynet/jquery-performance/
• Video: http://youtu.be/e30_NW5NSnk

Đồng thời, bạn sẽ được hướng dẫn cách tiếp cận với web font và tận dụng chúng để thực hiện giao diện web sử dụng các kiểu chữ làm thiết kế (typography).

• Người hướng dẫn: Trần Trọng Thanh
• Nội dung tóm tắt: https://docs.google.com/document/d/19F5_BmLqquTyeE3nFJrZgaob-dwWu3U4oFCkWta4698/edit?usp=sharing
• Demo: http://dabblet.com/gist/d1a2dfb7007727462565
• Video: http://youtu.be/Rl5ukKqkhkc

Mỗi phiên bản Photoshop mới ra mắt đều giúp công việc thiết kế và làm giao diện của chúng ta dễ dàng hơn. Hãy cùng chúng tôi điểm qua những tính năng mới nổi bật của Adobe Photoshop CC 2014 qua phần trình bày của bạn Vũ Nguyễn, chuyên viên thiết kế tương tác của Nâu Studio.

Hãy chia sẻ với chúng tôi nếu bạn biết thêm những tính năng hay khác.

Bài thuyết trình này được trình bày bằng tiếng Việt.

Video: http://youtu.be/qEmdMMcm77A

Regular Expression là công cụ để xử lý chuỗi và văn bản rất mạnh mẽ mà bất cứ ngôn ngữ lập trình hiện đại nào cũng hỗ trợ. Hãy cùng tìm hiểu cách thức sử dụng RegExp trong JavaScript qua phần hướng dẫn của anh Quy từ Nâu Studio.

Đọc thêm »

Bài học này sẽ hướng dẫn các bạn kiến thức căn bản về thuộc tính "position" của CSS. Bên cạnh đó, bạn sẽ được giải thích một cách tường tận hơn về khái niệm "Stacking Context" mà đa số lập trình viên Front-end sẽ bỏ qua khi làm việc với z-index và các lớp (layer) trong CSS. Khi hiểu rõ Stacking Context, việc hiện thực các lớp chồng lên nhau sẽ đơn giản hơn và sửa lỗi z-index sẽ hiệu quả hơn rất nhiều. Từ đó sẽ không còn tình trạng cài đặt giá trị z-index vô tội vạ như hình minh hoạ. ;)

Đọc thêm »

Function trong JavaScript khi thực thi sẽ tạo nên những vùng nhớ đặc biệt lưu lại giá trị của các biến nội bộ và cách ly chúng với bên ngoài tạo thành Closure. Đây chính là cơ sở để ứng dụng các pattern về module, IIFE, sự bao đóng của OOP...

Đọc thêm »

(TTT) Nhằm lưu lại làm tư liệu cũng như thúc đẩy trao đổi kiến thức giữa những thành viên Nâu với cộng đồng, chúng tôi đã ghi hình lại những buổi huấn luyện, thuyết trình của nhóm và sẽ lần lượt biên tập và tải lên trên kênh YouTube của Nâu tại: https://www.youtube.com/naustudio

Và đây là một trong những bài thuyết trình mở đầu cho một loạt các video mà chúng tôi sẽ tải lên trong thời gian sắp tới:

"Kinh nghiệm người dùng (User eXperience) là gì?

Có rất nhiều định nghĩa theo từng lĩnh vực hoạt động khác nhau. Tôi chỉ muốn tập trung và gói gọn chia sẻ ở lĩnh vực công nghệ. Do vậy, kinh nghiệm người dùng có thể hiểu là sự đúc kết giữa con người khi tương tác với công nghệ, hay nói cách khác là sự trải nghiệm của người dùng khi sử dụng thiết kế của sản phẩm, và kinh nghiệm mà con người có được khi tương tác với sản phẩm đó.

Nó có thể là sự tương tác từ cái ly, cây cưa hoặc một website, hay cao hơn nữa là kinh nghiệm tương tác giữa con người với viện bảo tàng hoặc sân bay.

Ngày nay, chúng ta không chỉ tập trung đơn thuần vào công nghệ và tính năng hay sản phẩm mà chúng ta cần tạo ra và xây dựng một hệ thống để đưa kinh nghiệm người dùng, cùng sự trải nghiệm đến một tầm cao mới.

Bài nói chuyện chia sẻ một mảng trong chủ đề Kinh Nghiệm Người Dùng - đó là khái niệm về kinh nghiệm của người sử dụng sản phẩm, cũng có thể hiểu như một sản phẩm."

Long Bui

Theo bạn, cơ sở của thiết kế web là gì? Có phải là những nguyên tắc về bố cục, về phối hợp màu sắc và kiểu chữ, hay là về trải nghiệm người dùng (UX)?

Khi tôi mải mê tự học JavaScript và theo đuổi làm giao diện Web (Web Front End), tôi muốn thử nghiệm mọi thứ mà tôi học được cho những dự án trong tương lai, dù đó là một trang portfolio hay website công ty. Hiệu quả đối với người dùng chưa biết thế nào, nhưng chắc chắn website ngày càng nặng nề hơn với ngày càng nhiều hình ảnh và hiệu ứng đi kèm.

Tình cờ tôi đọc được bài viết của Justin Jackson nói về “cơ sở của thiết kế Web”. Bài viết được trình bày trên một trang HTML tĩnh với mục đích minh hoạ cho chính chủ đề của nó. Nó thật sự gây ấn tượng mạnh và làm thay đổi cách tiếp cận của tôi với việc làm Web.

Nó đã giúp tôi nhận ra rằng những gì tôi đang làm chỉ là tạo cái vỏ bên ngoài, giúp chuyển tải thông điệp hiệu quả hơn nhưng chỉ mang tính thu hút nhất thời. Cái cốt lõi là một thứ khác quan trọng hơn mà rất nhiều lập trình viên và thiết kế web hay bỏ qua.

Vậy cơ sở của thiết kế web là gì? Bạn hãy đọc bài viết của Justin Jackson và tự khám phá:
Bản dịch tiếng Việt của tôi: http://naustud.io/posts/words.html
Bản gốc tiếng Anh: http://justinjackson.ca/words.html

Git là hệ thống quản trị phiên bản được sử dụng chính thức tại Nâu Studio. Nếu chúng ta nắm được Git hoạt động như thế nào, quy trình code và sự phối hợp giữa các lập trình viên tham gia cùng dự án sẽ diễn ra suôn sẻ và hiệu quả hơn.

Ở buổi chia sẻ kiến thức gần đây tại Nâu Studio, +Phuong Vo, Lập trình viên (Senior) của công ty đã trình bày và thảo luận những nguyên tắc cơ bản của Git. Phần chia sẻ ngắn này mới chỉ giới thiệu phần nổi của hệ thống quản trị phiên bản phức tạp này về mặt commits và branches. Chúng tôi sẽ tiếp tục và cập nhật những bài thảo luận sâu hơn về Git tại các buổi chia sẻ tiếp theo.

Slide của bài thuyết trình: http://www.slideshare.net/phuongvohuy/basic-principles-of-git

(Dịch bởi: Thao Nguyen)

---

In Nau Studio, Git is our official version control system. Knowing how it works will yield better coding workflow and collaboration effectiveness.

In our recent sharing session, +Phuong Vo, our Senior Developer discussed some of the basic principles of Git. This short session only scratched the surface of this sophisticated version control system in terms of commits and branches. More in-depth discussions will follow in upcoming sessions.

The slides: http://www.slideshare.net/phuongvohuy/basic-principles-of-git

Kick-starting our team's sharing sessions was my presentation about principles and common gotchas when developing mobile web applications.

I have digested my years of making web app on mobile devices into concise slides with lots of hands-on demonstrations. After the talk, I hope my team will be able to get on quickly with mobile web development and avoid any unnecessary hiccups.

The presentation was pushed to Github and can be viewed online here. I'm going to keep updating the slides as new techniques and new versions of mobile browsers arise.

P.S: Nau Studio is enthusiastic about sharing knowledge and ideas to those who care about creative web and mobile app development. We organize internal sharing sessions every other week and will make these presentations available to public through this blog. Please stay tuned for our further posts and leave us a comment if you have any.

This is Nau Studio's official blog, where we'll post about our exciting journeys into the world of UX, Front End and Mobile development.