Remove list article type
This commit is contained in:
Chalarangelo
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
- 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.
|
||||
@ -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.
|
||||
|
||||
@ -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 `<div>`, such as `<section>`, `<main>`, `<article>`, `<nav>` etc. When developing a website, you should understand what each part of your layout represents and try to use the appropriate element for it.
|
||||
|
||||
2. Use color correctly
|
||||
### Use color correctly
|
||||
|
||||
[WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) specifies a minimum contrast ratio of `4.5:1` between text and background (viewable in Chrome Developer Tools), so you should always design with that in mind. Additionally, remember that color should be used meaningfully and sparsely to avoid confusion and information overload.
|
||||
|
||||
3. Caption images and video
|
||||
### Caption images and video
|
||||
|
||||
Try to provide `alt` attributes for your `<img>` elements, so that screenreaders don't read the `src` attribute. You can use empty `alt` attributes for decorative images, which will inform screenreaders to skip them. Similarly, try to provide closed captions for any video content on your website.
|
||||
|
||||
4. Show and tell
|
||||
### Show and tell
|
||||
|
||||
Using icons and colors to indicate state, highlight or provide context is very common and provides a nice user experience. However, icons and colors alone might not be accessible for everyone, so make sure to support them with the appropriate text literals, catering to all of your users in the process.
|
||||
|
||||
5. Be consistent
|
||||
### Be consistent
|
||||
|
||||
Elements with similar meaning and/or functionality should look similar across your website. This is especially true for `<a>` and `<button>` elements and their respective states as users will have to be able to identify easily what elements they can interact with and anticipate their behavior.
|
||||
|
||||
6. Label your inputs
|
||||
### Label your inputs
|
||||
|
||||
Any kind of `<input>` element should be labelled appropriately, using either a `<label>` wrapper, the `for` attribute or an `aria-label` attribute. Do not rely on `placeholder` attributes to convey meaning about your `<input>` elements as this will cause problems for users on screenreaders.
|
||||
|
||||
7. Design responsively
|
||||
### Design responsively
|
||||
|
||||
Responsiveness is often thought in terms of screen size or mobile vs desktop, but there are many different devices where a user could browse your website. Try catering to any and all of them by providing ways to navigate and use your application via mouse, keyboard, thumb or any combination of the three.
|
||||
|
||||
8. Organize your content
|
||||
### Organize your content
|
||||
|
||||
A website's layout should be easy to scan, understand and find the content that is relevant to the user. Good organization with clear sections and properly grouped content provides a better user experience for all users, regardless of device or accessibility needs.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: 8 tips for working from home
|
||||
type: list
|
||||
type: story
|
||||
tags: career,programming,jobs,webdev
|
||||
authors: chalarangelo
|
||||
cover: blog_images/kettle-laptop.jpg
|
||||
@ -12,26 +12,33 @@ lastUpdated: 2021-06-12T19:30:41+03:00
|
||||
|
||||
Working from home (also known as remote work) seems like a great alternative to going to the office every morning, but it comes with its own set of challenges that you need to overcome in order to stay healthy and productive. Here are my tips for achieving just that:
|
||||
|
||||
1. Set up your work environment
|
||||
### Set up your work environment
|
||||
|
||||
Working from home has its perks, but nothing beats a well-designed office space where everything is set up with only one purpose in mind: working. Figure out your home office, experiment with different settings and understand what works best for you as soon as possible. An ideal working space is comfortable, quiet and has the right equipment for you.
|
||||
|
||||
2. Establish ground rules
|
||||
### Establish ground rules
|
||||
|
||||
Most likely you are not living alone, so you have to establish some ground rules with your roommate or significant other. It's up to you to drive the point home that during working hours you are, for the most part, not home. Sure, you can answer the door if you expect a delivery, but that's pretty much as far as you can go. People should not bother you during working hours, unless absolutely necessary, as small distractions pile up fast.
|
||||
|
||||
3. Inform others of your availability
|
||||
### Inform others of your availability
|
||||
|
||||
It's important to let people know that you are online and working or that you are taking a short break for lunch. Remember that you are still part of a team that requires coordination and others probably depend on your work to some extent. Remember to update your status as necessary to make collaboration easier.
|
||||
|
||||
4. Socialize with coworkers
|
||||
### Socialize with coworkers
|
||||
|
||||
Working from home can lead to feelings of loneliness, disconnect, isolation which can quickly spin out of control and lead to depression. Communicate with people on your team as if you were in the same room. A healthy amount of communication will help you feel more like you are all working together rather than each one on their own.
|
||||
|
||||
5. Be your best professional self
|
||||
Nobody might be watching you at home, so you can theoretically slack off as much as you like in your pajamas, but that's not very professional. Try to dress appropriately in case you join a video call and behave professionally, so no inappropriate websites or hours upon hours of checking social media. Ask yourself if someone in a shared office space would do whatever it is you are doing and, if the answer is no, stop doing it.
|
||||
|
||||
6. Plan your daily and weekly tasks
|
||||
### Plan your daily and weekly tasks
|
||||
|
||||
Having a coherent working plan helps you organize your time and prioritize important tasks above trivial ones. It also helps to put things into perspective and have a general idea of what other people on the team are working on. Plan ahead of time together with your team and keep each other posted on the progress of each task. Short term plans help you get through the day, long term plans help everyone meet their deadlines.
|
||||
|
||||
7. Use the right collaboration tools
|
||||
### Use the right collaboration tools
|
||||
|
||||
Working from home has its own challenges and issues, so try to find the right tools for the job. Slack, Skype, Zoom, Hangouts are great for communication. Design tools such as Figma or Sketch cloud help you communicate designs quickly and effectively. GitHub is the perfect tool for code collaboration and VS Code has an extension (Live Share) for sharing your code editors. Communicate with your team, figure out your needs and pick tools that work for you.
|
||||
|
||||
8. Maintain regular hours
|
||||
### Maintain regular hours
|
||||
|
||||
It's as easy to forget about breaks as it is to start working late. Try to set a schedule that sits well with your team and stick to it. If you would work 9 to 5 in a regular office environment, do the same at home. Take regular breaks, do not forget to sign off when put in your daily hours and come back tomorrow. After all, it's business as usual.
|
||||
|
||||
Reference in New Issue
Block a user