Những extension hữu dụng cho dev web

Tại sao nên đọc bài này?

Tối ưu productive khi đi code, debug nhanh hơn

😼

Vì mình code nhiều ở Frontend nên mình sẽ tập trung ở Frontend là chính thôi nhé. Còn rất nhiều thứ hay ho cho Backend hay DevOps nên hy vong sẽ có ở bài viết sau

Extension

VisBug

Bạn không biết element nãy đã align với element kia chưa?

Bạn không biết khoảng cách padding này đã giống với design chưa?

Thêm thắt nhanh thử một ít magin/padding xem UI có tốt hơn không?

Xin giới thiệu với các vị và quý bạn 💁‍♂️, VisBug, tool chính chủ từ Google có thể trả lời cho bạn tất cả các câu hỏi trên.

Nói chung là ai hay làm lệch align đó, hay bị design bắt bẻ thì nên dùng tool này để check lại nha. Thấy sai thì lặng lẽ sửa, còn thấy đúng thì bật lại designer ngay 👊

VisBug

Open source browser design tools

https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

Dark Reader

Mình nghĩ phải 96.69% dev sẽ code về đêm, hoặc có code ban ngày thì cũng dùng theme đen. Cái extension này sẽ mang Dark Mode 🌑 tới bất cứ trang web nào mà chưa support cú đêm như tụi mình 🦉

Có nhiều tool/extension làm vụ này nhưng mình chỉ thấy duy nhất thằng này là đỉnh nhất và mình dùng daily hàng ngày luôn

Dark Reader - dark theme for every website

Help Blog Privacy Policy Install Dark Reader browser extension. Configure the dark theme: brightness, contrast and sepia. Enable for all websites or particular domains. Use the following official links: Dark Reader is an open source eye-care browser extension. It doesn't send user's data anywhere. Trusted by 5,000,000 users. Developed since 2014.

https://darkreader.org/

Daily.dev

Cứ mở new tab là có tin tức về công nghệ/coding cho các bạn. Còn personalize theo cách đọc của mỗi người nữa.

Passive learning là đây chứ đâu. Bình thường sáng nào mình cũng dành 15 phút mò mẫm trên đây. Còn lâu lâu mở tab mới thấy bài hay cũng múc luôn cho nóng

À nói thêm mình có viết một bài về Passive learning ở đây

Passive learning cho Dev

Có cách grow về dev nhưng không tốn quá nhiều công sức Biết nhiều về công nghệ ⇒ Chém gió. Mình đùa đó, biết nhiều thì biết được dòng chảy của công nghệ, biết mình đang ở đâu và tương lai nó sẽ như thế nào Mình không biết là trong tiếng anh có từ như vậy không nữa vì mình lấy cảm hứng từ "Passive Income" nên nghĩ chắc là sẽ có Passive learning.

https://thanhle.blog/blog/passive-learning-cho-dev

Mình thấy kĩ năng học tập là cực kì cực kì quan trọng khi là dev nên Passive learning là kiểu mình apply chắc cũng phải 4-5 năm rồi. Phải công nhận nó là thứ giúp mình còn sống vui và khỏe trong ngành này… còn sau này già thì không biết 🧓

daily.dev | Where developers grow together

We are live on Product Hunt! Support us by leaving a review Get a feed of the best developer news out there! Read more quality articles. Stay up to date. Discover brand-new content as soon as its published. I can easily make you stand out as that developer who is always in-the-know about the latest buzzwords.

https://daily.dev/

LocatorJS

Cái này mình mới luanch gần đây nhưng công nhận rất tiện. Mỗi lần mở source mới là lại phải mò mẫm tìm xem cái component mình cần sửa nằm ở file nào.

Thậm chí thằng đệ của mình còn mở từng file cho tới khi tìm được chỗ đó 😂. Hy vọng nó đọc được bài này :)))

LocatorJS - click on any component to go to code.

Click on any component and go from your app to component's code.

https://www.locatorjs.com/

Grammarly

Cái này là dành cho những đứa vừa yếu vừa lười tiếng Anh như mình. Grammarly sẽ giúp spot ra các lỗi grammar hay dùng từ trong tiếng Anh. Giúp mình làm việc chuyên cmnr nghiệp hơn với các bạn bè thế giới 😆

Tuy nhiên sau khoảng thời gian 2-3 năm sử dụng thì có vẻ càng dùng nhiều mình càng tự sai grammar nhiều hơn, nên bạn đọc cân nhắc nhé. Fix root cause vẫn hơn 😛

Write your best with Grammarly.

Compose bold, clear, mistake-free writing with Grammarly's AI-powered writing assistant. Get Grammarly It's free 30 million people use Grammarly to improve their writing Grammarly organizes your writing feedback by theme, so you can see how each change will help your readers better understand your message.

https://grammarly.com/

React Dev Tool/Vue Dev Tool

Cái này thì khỏi nói rồi, mặc định. Có điều có bao giờ bạn thử sử dụng tab Profiler để kiểm tra performance với detech khi nào component rerender chưa?

Có hàng xịn mà không biết dùng thì cũng uổng lắm nhé!

JSON viewer

Đôi khi muốn xem nhanh cái API mà nó trả về JSON trối quá thì cài cái này vô, mọi thứ đơn giản ngay

JSON Viewer

The most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen. Open source at https://goo.gl/fmphc7

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

Insomnia

Cái này không phải extension nhưng thôi mình bỏ vào đây luôn.

Chắc là ai cũng phải work với API và hầu hết mọi người đều dùng Postman, nhưng đối với mình, người đang sử dụng con Macbook Pro M1 16GB/512GB Space Gray thì nó quá nặng. Ỳ ạnh vkl, nên mình đã chuyển hẳn sang dùng cái này.

Khá là nhẹ và clean, đủ dùng. Ngoài ra mình còn thấy mọi người dùng Http Client ở VS Code cũng khá ổn

The API Design Platform and API Client

If you are still using postman for manual REST/GraphQL API testing, I can highly recommend to switch to @GetInsomnia. If you are setting it up properly the workflow is much easier, the UI is cleaner and it also looks better. 💅

https://insomnia.rest/

Mọi người có thường dùng tool nào nữa không? Comment để mình trải nghiệm thử

Bài viết “lan quyên”

Một số suy nghĩ về Lương

Nhảy việc để tăng lương liệu có hiệu quả? Chưa đi làm, mới đi làm, đã đi làm hết nửa cuộc đời, hay thậm chí đã nghĩ hưu thì mình luôn tin là hầu hết mọi người đều sẽ quan tâm tới lương.

https://thanhle.blog/blog/mot-so-suy-nghi-ve-luong

Kĩ năng nửa cứng nửa mềm cho Dev

Giúp các bạn sắp/mới đi làm có cách để grow tốt hơn Giỏi hơn 🧐 ⇒ Làm tốt hơn 👨‍💻 ⇒ Tăng lương 💵 ⇒ Nhiều tiền 🤑 ⇒ Đi đánh Golf 🏌️‍♂️ ⇒ Mua G63 🚘 Ba cái kĩ năng mềm thì chắc ai cũng biết rồi, nào là kĩ năng làm việc nhóm (Team work), kĩ năng thuyết trình (Presenting), kĩ năng giao tiếp (Communicating), suy nghĩ phản biện (Critical thinking),...

https://thanhle.blog/blog/ki-nang-nua-cung-nua-mem-cho-dev