Speed your development workflow with these Chrome extensions

A very popular browser choice among developers is Google Chrome. And a great but often underused feature of Chrome is its Extension Store. As a developer, you can use this resource to access a multitude of free tools that will help you cut down on some of the most tedious tasks in development.

After all, as rewarding and interesting that development may be, it’s still true that tasks such as browser testing and link testing can be very dull ways to spend huge chunks of time.

Development Extensions

These Chrome extensions will help you speed up your development workflow right from your browser.

Chrome Extension - Web Developer

Web Developer
Get the extension

If I could only install one extension, then this would be my choice. With this extension, a developer will be able to gain a lot of information on their project.

I find the most useful features of this extension is the ability to disable things like javaScript, cookies, CSS styles and images. I also find it very useful to outline elements based on their type. This could be floated elements and absolutely positioned elements as well as floated elements and headings.

I also really like how I can work with forms, this is really useful for when testing the forms I have built are working correctly. With the Web Developer extension, I can quickly complete mundane tasks like clearing form fields and checking and unchecking form fields.

Web Developer Checklist
Get the extension

I like my websites to be the best they can be, and for this reason, I keep the Web Developer Checklist as part of my toolkit.

The Checklist extension will test your website to make sure it is mobile worthy and passes SEO, accessibility and security essentials.

It is even possible to check the quality of code. However, I have my IDE also checking this for me as I write code based on Laraval Artisan standards.

Pesticide
Get the extension

I think the name for this handy, simple extension is perfect, sometimes when working with front-end development, the code issues can feel like a real bug hunt.

The purpose of this extension is to outline all CSS elements to see the placement on a page better and help to identify a problem which could otherwise feel like hunting down a pest in your code.

Browser testing – Browserling and IETab
Get Browserling
Get IETab

Testing in multiple browsers is definitely one of those tedious tasks mentioned earlier. The bad news is there is no getting away from browser testing; however, it’s definitely not as painful as it used to be and there are now extensions that mean you can do it all in one tab.

One such extension is Broswerling. This is a live interactive cross-browser testing service, and it provides cross-browser testing for web developers and web designers. Also, it provides quick access to all the most popular browsers on the most popular operating systems.

Link Checker
Get the extension

Much like browser checking, link checking is also an essential highly tedious task. The Chrome browser extension Link Checker has one simple but powerful purpose which is to make this tedious task a thing of the past.

Extensions for designers

Chrome Extension – Spectrum

Here are some of the best extensions for front-end designer to speed up real-world, everyday tasks.

WhatFont
Get the extension

The WhatFont extension in invaluable when it comes to identifying a font. Sometime when browsing the web I come across a website that uses terrific typography but determining what makes it so great is not always intuitive to developers and this extension makes that process so much easier.

Information can be found on type family and font size and, what’s more, it can help you find out if your typography find is available on Google API or even TypeKit if you prefer.

ColorZilla
Get the extension

If you find you frequently need to design a website around a specific color pallet, then this extension will be a great asset.

Often clients know they want their color scheme to match their logo or some other design work. Or even their existing website. What ColorZilla will do is use a color picker to select any shade in the browser and find the HEX or RGB code of those colors.

Spectrum
Get the extension

Color deficiencies are common but not widely accounted for by web designers. A color blind person may have a needlessly terrible time on a website you designed, but this can all be solved with a few adjustments to your design.

Spectrum is an extension that will allow you to see your website like a color blind person would do addressing the problem of wanting to help but not knowing how to.

Read more

Staying relevant in the 2018 web dev job market

stay relevant in web dev

Web development stays still for no one, anyone in the industry longer than 12 months can tell a newbie this from first-hand experience.

In 2018 it feels like this is the year the industry starts to feel the impact of recent disruptions and many web designers are already beginning to feel the effects of AI tools taking over tasks that were once a staple of their skill set.

Read more

Build on Bootstrap for fast and quality web design

website design

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile projects on the web.

You have probably come across Bootstrap as a web designer along with other technologies such as Sass, LESS, Grunt, Gulp, npm ect and felt like it you need to absorb an avalanche of knowledge before you can get started on your website. This can feel like overkill for smaller sites too.

Read more

Find a coding course that suits your learning style

learn to code

If you want to learn to code then following an online course is a good step in that direction. however, it’s an investment that can be costly, not just money but in time to.

There are numerous courses online and I have experience with many of them and with this knowledge I have put together a review of some of the most popular providers.

Read more

Get familiar with browser developer tools for speedy debugging

Browser development tools have been around for a long time and have and for web designers, these form defined place in the workflow. I use development tools in my own projects very frequently to the point that I probably take them for granted. But every so often I do hear a new announcement or discover a trick that makes me remember how useful they are and how I really could not live without them.

Read more

Give your WordPress clients a site they will struggle to break

robust wordpress

When I launch a WordPress website I like to do so with a theme that handles as many design decisions as possible so my client does not need to give thought to styling content during future updates.

When a client is updating their website they will want to stick to the styling that they paid a lot of money to achieve at the launch of the project and do this as quickly as possible. When the client has fewer decisions to make they are presented with very narrow and very specific content blanks that guide them through the process.

Read more

Think like a user to boost your websites performance

website performance

When a web developer sits down to start working on the task of optimising the performance of their website they are likely not thinking of the outcome in the same way as the user.

Typically a developer has a tool set to measure their performance and can tell you to the nearest millisecond how fast their CSS file loaded and how fast the frame rate is in their animation.

Read more

Can web designers survive in the web industry without coding skills?

web design code

Web building and drag and drop tools are getting better and are have become a viable option for professional website designers. Even web agencies have started to adopt tools like Squarespace and McCaw into their workflows. This is all reigniting the debate – do designers need to learn to code?

Read more