diff --git a/blog_posts/10-vs-code-extensions-for-js-developers.md b/blog_posts/10-vs-code-extensions-for-js-developers.md index 37c4f9ac7..73601867a 100644 --- a/blog_posts/10-vs-code-extensions-for-js-developers.md +++ b/blog_posts/10-vs-code-extensions-for-js-developers.md @@ -1,42 +1,53 @@ --- title: 10 must-have VS Code extensions for JavaScript developers -type: list +type: story tags: devtools,vscode authors: chalarangelo cover: blog_images/computer-screens.jpg excerpt: VS Code is steadily gaining popularity among developers. Here are 10 essential extensions for JavaScript developers that aim to increase your productivity. +unlisted: true firstSeen: 2019-12-23T10:41:56+02:00 lastUpdated: 2021-06-12T19:30:41+03:00 --- Developers will most likely argue for the rest of eternity about the most productive code editor and the best extensions. Here are my personal extension preferences for VS Code as a JavaScript developer: -1. ESLint +### ESLint + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) turns the popular JavaScript linter into an extension of VS Code. It automatically reads your linting configuration, identifies problems and even fixes them for you, if you want. -2. GitLens +### GitLens + [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is a very powerful collaboration tool for VS Code. It provides many useful tools for git such as blame, code authorship, activity heatmaps, recent changes, file history and even commit search. -3. Debugger for Chrome +### Debugger for Chrome + [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) allows you to debug your JavaScript code in Chrome or Chromium. Breakpoints, call stack inspection and stepping inside a function are only some of its features. -4. Bracket Pair Colorizer 2 +### Bracket Pair Colorizer 2 + [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) makes reading code faster as it makes matching brackets the same color. This extension for VS Code improves upon its predecessor by providing improved performance. -5. Bookmarks +### Bookmarks + [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) is one of those extensions that will significantly reduce your time jumping between different files, as it allows you to save important positions and navigate back to them easily and quickly. -6. TODO Highlight +### TODO Highlight + [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) simplifies tracking leftover tasks by allowing you to list all of your TODO annotations, as well as adding a handy background highlight to them to make them pop out immediately. -7. Live Server +### Live Server + [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) gives you an easy way to serve web pages from VS Code, making previewing and debugging a lot easier. One of the core features is the live reload support that many developers are used to. -8. REST Client +### REST Client + [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) allows you to send HTTP requests and view the responses directly in VS Code. This extension supports a wide range of formats and authorization and should work with most setups. -9. One Dark Pro +### One Dark Pro + [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) is one of the most popular VS Code themes and with very good reason. It provides a clean theme with a nice palette that has great contrast and is very comfortable to use on a daily basis. -10. Fira Code +### Fira Code + [Fira Code](https://github.com/tonsky/FiraCode) is not a traditional VS Code extension and might take a couple more steps to set up, but it's a superb programming font with ligatures that will help you scan code faster once you get used to it. diff --git a/blog_posts/4-seo-tips-for-developers.md b/blog_posts/4-seo-tips-for-developers.md index 8a9c0b7c3..4242dd472 100644 --- a/blog_posts/4-seo-tips-for-developers.md +++ b/blog_posts/4-seo-tips-for-developers.md @@ -1,6 +1,6 @@ --- title: 4 SEO tips for developers -type: list +type: story tags: seo,webdev authors: chalarangelo cover: blog_images/sunrise-over-city.jpg @@ -11,14 +11,17 @@ lastUpdated: 2021-06-12T19:30:41+03:00 SEO is becoming increasingly relevant as the internet keeps growing. While most web developers usually have little experience with SEO, it is not particularly difficult to handle some of the basics. Here are my top SEO tips for web developers: -1. Craft user-friendly URLs and map the appropriately +### Craft user-friendly URLs and map the appropriately + First and foremost, start at the very beginning, which is your URL slugs. For URL slugs the rule is that you want them to be human-readable, with words separated by dashes and with no random letters or digits added. Secondly, it's a good idea to make sure that parts of your URLs match to a logical structure in your website (e.g. `/blog/posts/awesome-list-of-seo-tips`). Finally, take the time to build a sitemap and redirect any broken or old URLs to new ones. This will help reduce 404 pages. -2. Use structured data to help Google understand your pages -Structured data is what Google uses to power its featured snippets, those little cards that appear at the top of certain searches. It's a good idea to set up structured data for your pages, which will help you rank higher in search results and possibly even land a featured snippet every once in a while. Just make sure to find the appropriate structured data type and include it in your page and you should be good to go. +### Use structured data to help Google understand your pages + +Structured data is what Google uses to power its featured snippets, those little cards that appear at the top of certain searches. It's a good idea to set up structured data for your pages, which will help you rank higher in search results and possibly even land a featured snippet every once in a while. Just make sure to find the appropriate structured data type and include it in your page and you should be good to go. +### Set up Google Analytics and Google Search Console -3. Set up Google Analytics and Google Search Console This is hardly a new tip, but I think it deserves a spot on the list, as both of these tools are extremely important. Google Analytics allows you to track user behavior and gather data that can help you identify problems and opportunities, while Google Search Console is helpful for figuring out what users are searching for before landing on your website. -4. Keep an eye on your markup, performance and accessibility +### Keep an eye on your markup, performance and accessibility + Last but not least, something that is probably already on your list, is optimizing your code. This includes everything from writing semantic markup and keeping requests to a minimum to optimizing for all device types, making your website accessible and ensuring fast load times. Keep in mind that websites have many moving parts that evolve and change over time, so it's a good idea to audit your website often with a tool like Lighthouse. diff --git a/blog_posts/5-tips-for-better-pull-requests.md b/blog_posts/5-tips-for-better-pull-requests.md index 73e00946e..bec4d3a95 100644 --- a/blog_posts/5-tips-for-better-pull-requests.md +++ b/blog_posts/5-tips-for-better-pull-requests.md @@ -1,6 +1,6 @@ --- title: 5 tips for better Pull Requests -type: list +type: story tags: git,github,programming,webdev authors: chalarangelo cover: blog_images/keyboard-tea.jpg @@ -12,17 +12,22 @@ lastUpdated: 2021-06-12T19:30:41+03:00 Writing good code is only part of the job. Here are 5 tips to improve your pull requests and help people review them: -1. Small pull requests +### Small pull requests + The pull requests that get reviewed more thoroughly and confidently and are most often prioritized by developers with limited time are the smallest ones. Make sure you separate concerns into different pull requests (e.g. refactoring and feature implementation), while also keeping commits atomic and well-documented to make the changes easier to understand and review. -2. Good descriptions +### Good descriptions + Always take the time to describe your code and any related tasks in your pull request. Explain the feature you are implementing or the bug you are fixing and provide images and steps to reproduce, if applicable. Note decisions made during implementation, your approach, as well as any limitations, findings and points of interest that might help others better understand your code. -3. Rebase onto master +### Rebase onto master + Always rebase your pull requests onto the `master` branch of the repository. This way you can always test your code against the latest changes and resolve merge conflicts, minimizing issues that might arise later on. Apart from that, reviewers will not have to deal with missing features or bug fixes that might have been deployed already, which can considerably speed up review times. -4. Review it yourself +### Review it yourself + Before submitting your pull request for review, always take the time to review it yourself. That way you can handle some low-hanging fruits (typos, easy optimizations, leftover code etc.) and check things you would in other people's pull requests. Self-reviewing has the added benefit of allowing you to reason about decisions and realize which ones might need clarification. -5. Respond to reviews +### Respond to reviews + Set some time aside to respond to reviews after submitting your pull request. Handle anything you can as soon as possible and start discussion whenever necessary to arrive to a solution. Use `--fixup` for changes suggested in review comments or add new commits to help reviewers parse new changes more easily. Finally, assume good intentions, be polite and thank your peers. diff --git a/blog_posts/6-tips-for-your-next-remote-onboarding.md b/blog_posts/6-tips-for-your-next-remote-onboarding.md deleted file mode 100644 index 2313a35c8..000000000 --- a/blog_posts/6-tips-for-your-next-remote-onboarding.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: 6 tips for your next (remote) onboarding -type: list -tags: career,jobs,programming -authors: fejes713 -cover: blog_images/golden-gate-bridge.jpg -excerpt: Many developers find onboarding experience worrisome. Here are 6 helpful tips to make your onboarding experience a pleasant one. -unlisted: true -firstSeen: 2020-05-03T16:00:59+03:00 -lastUpdated: 2021-06-12T19:30:41+03:00 ---- - -Many developers find onboarding experience worrisome. Here are 6 helpful tips to make your onboarding experience a pleasant one: - -- Ask for a project-specific tech stack and look for stuff that you might not be familiar with. One month is enough to cover the basics of anything you didn't learn at University or have no prior experience on and will save you lots of time (and stress) once your job or internship starts. - -- Don't be embarrassed about asking for help. To get where they are now, your teammates had to go through the onboarding process and all the stuff you're facing now. Define when you should ask for help with your team. You'll run into obstacles every day. Some might take 30 minutes to solve, and others might take forever. Find a balance - You don't want to interrupt the whole team every 30 minutes, but don't let one problem turn your job/internship into an unpleasant experience. - -- Most likely, you won't be micromanaged, but it's a good idea to keep everybody updated on your progress. Doing this, your team might offer some useful advice based on your progress or prepare you for upcoming obstacles in the task. If something isn't right, don't be silent. Your teammates aren't wizards, and they can't read your mind. If something is bothering you, you're stuck or not comfortable doing something - Just talk! Everybody is willing to help, but you need to let them know first. - -![Duck icon](./blog_images/ducke.png) - -- Practice [rubber duck debugging](https://rubberduckdebugging.com/). You don't want to schedule a 30-minute meeting with your team and 2 minutes into explaining the problem you get to the _aha!_ moment where you figure out the solution to the problem. In a nutshell, before asking for help, try to explain the problem you're having to a random object. Most of the time, during this process, you'll get new ideas and solve a problem by yourself without needing somebody's help. - -- If time allows it, plan virtual pair-programming sessions with your teammates. Once a week, pick a short task and try to solve it together. Doing this, you will pick up domain-specific knowledge faster, learn how to navigate new codebase efficiently, and improve your problem-solving skills. - -- Socialize with other team members on Slack channels like _#random_ and _#watercooler_. Just because you're new to the team doesn't mean you shouldn't participate in casual conversations with other employees. They are social beings too and are probably looking forward to getting to know better new colleagues. diff --git a/blog_posts/7-chrome-extensions-for-web-developers.md b/blog_posts/7-chrome-extensions-for-web-developers.md index 961ff4bae..80ec0ec3a 100644 --- a/blog_posts/7-chrome-extensions-for-web-developers.md +++ b/blog_posts/7-chrome-extensions-for-web-developers.md @@ -1,33 +1,39 @@ --- title: 7 essential Chrome extensions for web developers -type: list +type: story tags: devtools,webdev authors: chalarangelo cover: blog_images/computer-screens.jpg excerpt: Google Chrome's developer tools are nothing short of amazing. Here are 7 must-have extensions you can add to increase your productivity even further. +unlisted: true firstSeen: 2020-03-18T12:37:31+02:00 lastUpdated: 2021-06-12T19:30:41+03:00 --- Google Chrome's developer tools are nothing short of amazing, but there are a few missing tools that can increase your productivity even further. Here are my personal favorite extensions that I use everyday: -1. CSS Peeper +### CSS Peeper [CSS Peeper](https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en) is an all-in-one tool for CSS inspection that allows you to quickly peek at the styles, fonts, color palettes and assets of any website you want. -2. React Developer Tools +### React Developer Tools [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) is the de facto extension when working with React, providing all the necessary inspection tools for your React applications. -3. LastPass +### LastPass + [LastPass](https://chrome.google.com/webstore/detail/lastpass-free-password-ma/hdokiejnpimakedhajhdlcegeplioahd?hl=en) keeps your accounts and API keys secure, by providing a free password manager complete with password generation and password-protected notes. -4. uBlock Origin +### uBlock Origin + [uBlock Origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=en) is a simple yet effective ad blocker extension that you can just install and forget about, as it keeps your browsing experience ad-free. -5. VisBug +### VisBug + [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en) allows you to tweak website designs on the fly, using very intuitive controls and tools, without having to delve into any code at all. -6. JSON Viewer +### JSON Viewer + [JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=en) provides some much needed syntax highlighting and style customization to JSON responses, which are nowadays very commonplace in most web APIs. -7. EditThisCookie +### EditThisCookie + [EditThisCookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=en) is a powerful cookie manager extension, that allows you to add, delete, edit and even export and import cookies quickly and efficiently. diff --git a/blog_posts/8-tips-for-accessible-websites.md b/blog_posts/8-tips-for-accessible-websites.md index fb15f5b48..a71099435 100644 --- a/blog_posts/8-tips-for-accessible-websites.md +++ b/blog_posts/8-tips-for-accessible-websites.md @@ -1,6 +1,6 @@ --- title: 8 tips for accessible websites -type: list +type: story tags: javascript,accessibility,webdev authors: chalarangelo cover: blog_images/accessibility.jpg @@ -9,26 +9,34 @@ firstSeen: 2020-05-20T14:10:13+03:00 lastUpdated: 2021-06-12T19:30:41+03:00 --- -1. Use semantic HTML +### Use semantic HTML + HTML5 introduced a variety of new semantic HTML elements to help replace the much dreaded `
`, such as `
`, `
`, `
`, `