9 Must Have Chrome Extensions For Front End Developers

AbdulSamad Ayoade — Wed, 07 Oct 2020 17:08:18 +0000

As a front end developer, it's obvious you use chrome but have you ever think of how it can help speed up how you work and build amazing stuffs.

In this post, I'll show you top 9 chrome extensions you should have as a front end developer.

Now let dive in.

1. ColorPick EyeDropper

This is my number one chrome extension which I use almost on a daily basis. With the help of this extension, you can grab colors either from a webpage or an image.

You can get colors in RGB, RGBA, HEX and HSLA format and you can easily copy the color codes via the inbuilt clipboard.

2. WhatFont

By mere looking at the name you should be able to guess what it does. This chrome extension gives you the exact name and details of any font either on a webpage or image.

3. CSS Viewer

This is definitely a must-have for front end developers. This tool give you css properties of any element by just hovering over the element.

4. Keyframes

Keyframes is a powerful chrome extension for creating CSS animations.

With the help of this extension, you don't have to switch between your browser and code editor while creating animations.

5. Screenshots

Taking screenshots made easier. This extension will help you take screenshots either full page or visible content and you can save the screenshots in PDF and PNG format.

6. Imageye

Imageye is yet another superb chrome extension which allows you to download all images available on a webpage. You don't have to save images one by one which will take much of your time, you can simply call Imageye to the rescue.

7. Dimensions

Ever wanted to know or measure the distance between elements on a webpage but don't know how you gonna do it?

Dimensions got ya. With this chrome extension, getting the distance between elements on a webpage is a walk in the park.

8. Pesticide For Chrome

Remember those days when you had to add a red border on that element to see where and how it is positioned on the webpage?

Those days are now over with Pesticide For Chrome. This chrome extension add pesticide CSS to your webpage outlining each element to see how they are being placed on the webpage.

9. Web Developer

This is the most amazing chrome extension developers must have. This extension allows you to style files, validate html and css files, resize images, disable scripts and lots more.

So guys that's it. Hope you enjoyed this simple and short article. Which extension are you using that you find extremely useful and is not listed here? Or have you used one of these extensions before, what's your experience like?

Drop a comment, like and share as well.

5 Tips To Help You Make The Best Out Of GitHub

AbdulSamad Ayoade — Mon, 28 Sep 2020 08:33:09 +0000

One of the most important tools in a software developer's arsenal is Github. GitHub is a code management platform built on the popular version control system called Git.

Github provides developers the opportunity to collaborate and work on projects with other developers. It is also referred to as social platform made for developers.

These days Github usage is not only limited to software developers but also other professionals such as designers and products managers who have come to realized what the popular collaboration platform has to offer.

Having a Github account is simple as opening a facebook account but how do you use the platform effectively is such an important topic that need to be addressed.

In this post, I'll show you how to make the best out of Github.

1. GitHub Profile ReadMe

After creating an account on GitHub, the first thing you should do is to setup your profile ReadMe and furnish it will all the neccesary details.

In your profile ReadMe, introduce yourself, let people see what you do and how you look like. Tell us the languages you've used and what you are currently learning. What are the tools you use and how can you be contacted are the details that are needed to be available on your ReadMe.

2. Showcase Your Work

The best way to showcase your work is to always upload your projects to Github. That's an undeniable fact. But you can take it further by pining your top projects on your GitHub profile page.

When someone lands on your profile, the next thing they will see after reading your profile ReadMe are your pinned projects. So make sure, the pinned projects are your best projects.

3. Write a Good ReadMe for your projects

A good ReadMe is the face of your project and it's one of the most important thing that make up a good repository.

A well crafted ReadMe for your project is a good way to let people know what your project is all about. A nice ReadMe with neccesary details and screenshots will help grab people's attention and explain to them what the project is, why it matters and how they can contribute.

A good ReadMe should cover some if not all of the items listed below:

What your project does
How to install it
How to setup the development environment
How to make a change
Changelogs

4. Make Use of Github Pages

GitHub Pages are free hosted webpages provided by GitHub which allow developers to deploy their static websites and web apps online.

With Github Pages, developers can create a live working URL for their apps or websites.

GitHub Pages offers a lot of features which include ease of setup, flexibility, live updating and lots more.

Once you're ready to deploy your web creation to the world wide web, ensure to use Github pages. This will generate a live working URL for your project.

5. Contribute

You can't fully understand the meaning of the platform, GitHub without getting yourself immersed in open source and contributing to other people's projects.

By contributing to a project, you're making the project better and not only that, you will be able to learn new technologies and ecosystems, make constructive reports and feature requests.

That's it guys. Hope you enjoyed the post? Don't forget to like and share it as well.

DEV Community: AbdulSamad Ayoade