18 Awesome Web Dev Tips To Supercharge Your Workflow

1. Easily Process 1GB-2GB+ MySQL Imports

Working with WordPress, I often find myself needing to set up large MySQL databases, usually needing to take an existing database and set it up on my local machine to debug some complex issues

This can be a real chore though, especially when the databases are in the region of 1GB, 2GB or more!

A huge database dump can lead to timeouts during the import process (and it’s a long process!) or incompatibilities between MySQL versions can lead to errors during the operation.

But I discovered this awesome tool, Big Dump – a staggered MySQL dump importer.

It’s seriously handy, and has saved my bacon on a few occasions when no other import method would work.

It splits up a massive import into lots of manageable chunks, importing them one at a time, resuming from the next chunk.

It’s not foolproof, and there’s other ways of getting big dumps imported, but I’d highly recommend trying out this tool if you’re having trouble with big dumps!

2. Instant In-Browser Updates With BrowserSync

One big nuisance during web development is having to continually swap between windows to refresh a site and see the results of your code changes.

So, you’ll change some CSS rules – swap to the browser, refresh – update some HTML – swap back to the browser, refresh. Argh!

Enter Browsersync, a beautiful little tool.

You’ll need to have Node installed, and the Node Package Manager, but once those are configured, it’s as easy as:

1. Install browsersync with

   npm install -g browser-sync
   

2. Start up browsersync with

   browser-sync start --server --files "css/*.css"

Where `css/*css` is the directory and filetype you want to track changes for. So as soon as you update your stylesheet, the browser will refresh, saving you the hassle of switching windows!

3. Run Sass CSS Processor From The Command Line

Sass is a really excellent tool for streamlining CSS stylesheets. It lets you do things like

• Nesting CSS rules inside each other, for example

  .style {
    .style-child {
      font-size: 1.2rem;
    }
  }

   

• Or working with mixins to bring the power of functions to CSS, like

  .dark-purple {
  darken(#A020F0, 25%)
  }

   

You might be used to using Sass as part of a more all-encompassing framework during web development, usually making use of a build tool such as Grunt or Gulp or but did you know you can easily fire it up via the command line to make use of it for simpler projects?

All you need to do – again assuming you’ve got Node and npm installed – is

1. Install SASS with

   npm install -g sass

2. Run it by pointing towards your .sass file(s)

   sass scss/index.scss build/css/index.css

   where `scss/index.scss` is your root Sass file and `build/css/index.css` is the location where you want the compiled file to end up.

You might not be a fan of Sass in your workflow, but if you are, then this useful tip to get it up and running in next to no time might help you out on some smaller projects.

(Tip: combine this with browsersync for even more power!)

4. Very Simple Command Line PHP Server

Did you know PHP has a built-in webserver? It’s seriously useful if you want to quickly spin up a web development environment to run some simple scripts.

It won’t provide everything you need for running, say, a WordPress installation

First, you’ll need to make sure you’ve got PHP installed on your local machine. It used to come bundled with versions of macOS, but no longer.

I’m assuming you’ve already got some basic knowledge of setting up a web development environment though (otherwise why are you here!) but if you want a guide, check out the official instructions.

Running the server itself is a piece of cake, just navigate to the directory containing the files you want to serve and run

php -S localhost:8000

You’ll now be able to access the files through the browser at localhost:8000

Don’t go using this on any production servers though! This functionality is designed purely for local development use.

5. Share Your Local App Online Worldwide With ngrok

Sometimes you need to share your work-in-progress with a client but haven’t yet set up a full staging or web development environment online for team access.

It’s useful in cases like this to be able to serve up an application directly from your local machine.

ngrok makes it easy to configure and run secure tunnels providing instant ingress to your apps from any network or device with added authentication and other crucial components of a

One very useful application of ngrok is testing app performance and functionality on a browser testing suite such as BrowserStack.

With ngrok, it’s a quick job to set up a connection to your local machine which you can then load up in a remote BrowserStack browser instance.

BrowserStack does have remote testing capabilities, but that requires installing another third party app and I’m personally not a big fan of that – it’s always been slow and cumbersome for me, though the core BrowserStack service works great.

Pairing BrowserStack up with ngrok means secure and reliable connections to my app while testing.

You can also add Sass CSS compilation and browsersync into this combo to start building a really fast and responsive testing framework for your app!

6. Image Optimisation With Shortpixel.com

We’ve all done it. There’s nothing worse than preparing a brand new client site only to find that the images end up far too heavy, filesize-wise.

It’s easy to do if you’re not paying attention to it. Especially with larger hero images or crisp, high-resolution product photography, the bytes add up quickly.

It’s not so much of a big deal for people on faster connections but consider those with limited broadband, over-burdened shared connections or even a potential customer who has wandered into – horror of horrors – a part of town which only gets a 3G signal. Nightmare!

Writing and maintaining your own image optimisation code can be a bit of a hassle. And time is precious.

Check out Shortpixel for a really neat experience. Particularly, their website optimizer service, which works on any website. Or for WordPress blogs, you can set up a plugin that does the job for you.

You can also use Autoptimize, another of my favourite WordPress optimisation plugins, which includes Shortpixel as part of its feature set. Nice!

Bonus tip: If you’re looking to produce images so they’re not only optimised but also actually smaller on mobile than desktop you can also check out Shortpixel’s Adaptive Images plugin for WordPress too.

7. Quick And Simple Favicon Generator

Those little icons in the header of the browser in the tabs – favicons. You know what they are. We all do. Anyone who uses the internet sees them dozens, hundreds of times a day!

I find them fascinating. Tiny little representations of a website, packed into a 32×32 pixel square. It’s like a little snippet of the Old Internet, back before high resolution displays and 16.7 million colour displays.

You need to pack as much punch as you can into that tiny little picture.

But making favicons during web development can be a bit of a chore. You need to make sure they’re optimised for various devices, saved in the right format. You know how it goes, it’s a hassle!

Favicon.io steps in to take the reins and save you from a headache. It also offers:

• PNG to ICO conversion – easily convert an image into a favicon-friendly format
• Text to ICO – Feeling lazy? Quickly create a favicon from text or a letter
• Emoji to ICO – and why not?

It’s a great little tool, I use it frequently to put that little square cherry on top of a finished client website!

8. CSS Box Shadow Generator

Box shadows add a nice little extra depth to a website. They’re the subtle (or sometimes not-so-subtle) shadows that you’ll often see sitting behind website elements.

They’re on this very page, in fact. Check out the shadow to the right.

Sometimes it’s hard to visualise exactly how a shadow will end up looking though.

A tool such as this useful little box-shadow generator is a real timesaver when trying to figure out the best settings for a particular look.

Want a deep, heavy shadow to add emphasis to images? Maybe just a light, barely visible shadow to add some sutble nuance.

Up to you! Go crazy with it. Make your web development life easier!

9. Find Great Colour Palettes With Coolors

It’s hard enough getting inspiration for colour themes for web development without having to wade through countless images and swatches to get inspiration.

I’ve always liked this website – coolors.co – it’s a playful little website, with a wide range of colour palettes.

I also enjoy working with generative art, creating images using Javascript to produce all sorts of abstract graphical effects. Colour plays a big part of that, and I like to take inspiration from coolors.co to find palletes that might complement, contrast or clash in fascinating, eye-catching ways.

Anyway, check it out, you might see something you like!

10. Temporary Website Placeholder Images (Not Just Kittens!)

Well, ok, it’s usually kittens.

I’m sure many web development projects have made us of placekitten.com during the early stages – a website which lets you quickly generate pictures of cats in any resolution to use on client websites.

But sometimes you need to mix things up a bit, add a bit of variety to your oh-so-very-serious client website. After all, the client will probably be as sick of cat pictures as you are by the end of the project!

Here’s some other quality placeholder websites you can make use of.

• Lorem Flickr – a slightly more varied image generator, you can specify categories or search terms to return images of specific subjects. Want a grayscale picture of Paris? https://loremflickr.com/g/640/480/paris. Maybe a red picture of a river? https://loremflickr.com/red/640/480/river
• Lorem Picsum – like Lorem Flickr, this site aims to provide a range of interesting subjects for placeholder images. You can’t control the subject of the photo, but perhaps that’ll provide more variety. Try it yourself – https://picsum.photos/seed/solarise-picture/640/480
• Placebears. Fill your website with bears. This one’s self explanatory.

Honestly though, I researched a few best-of lists of placeholder image websites for this list. But you know what? All the best ones have gone!

FillMurray? (Fill your website with pictures of Bill Murray) – Gone to the great hosting graveyard in the sky

PlaceDog? (Why should cats get all the attention?) – Alas, it is no more

PlaceCage? (Populate your client’s website with pictures of NICOLAS FRICKINNNNN CAAAAAGE) – Kaput!

https://placebeard.it/ is still up and running though. Phew!

11. Stunning Eye-Catching Layouts With Essential Grid

Making your images and galleries stand out on your website is no easy feat.

There’s so much rich media content online that people become used to it and skip straight past it.

Essential Grid is a layout systsem for WordPress web development which brings an extra dimension of creativity to the gallery design process.

The plugin includes features like:

• The ability to pull in content from any post, page, custom post type, social media, WooCommerce and more
• Adjustable rows, columns, spacing and other grid settings
• Different layouts including boxed, full-width and full-screen

It’s a really flexible plugin. It’s not available for free, but at £29/year for a single license, it’s not bad value as a powerful gallery solution for client sites. Check it out, make some grids!

12. A Really Cool Image Accordion Clicker

This is cool, I like this one. I’ve always enjoyed a good accordion layout, and this one’s no exception. Created by Zed Dash, it’s a groovy little bit of code, and offers a nice alternative to the standard gallery layouts.

It would require some custom coding to integrate this into a live website, but if you’ve got a basic grasp of the basics of Javascript, HTML and CSS, you should be fine. Pens on CodePen are licensed under the MIT License so available for use based on those conditions.

Check it out on CodePen

13. King Of The Slider Widgets – Slick Slider

This one’s one of my favourites – I won’t hesitate to recommend it to other developers.

It’s been a superb go-to solution for sliders on websites I’ve built over the last few years. Sliders can be very passé though, you’ve got to be careful with them.

There must be at least, oh, seven trillion header image sliders in use across the internet today. I’m probably not exaggerating, much. Probably.

But they are overused during web development, and sliding elements tend to be overlooked by site visitors, but they do have their uses:

• Tabbed interfaces, where a visitor expects to click through to other sections to see other images, documents or data
• Highly visual/interactive websites where a scrolling element doesn’t seem so out of place
• Dedicated gallery websites, e.g. photography, when listing images in a section specifically designed to provide search/listing functionality – people will expect simple navigation tools – as opposed to, say, a homepage, where impactful visuals will take precedent over navigation tricks like slider

So, used with care, slider functionality can still be massively beneficial and brings an extra level of UI usability to a site interface.

There’s a whole ton of slider plugins available too – whenever I browse for a new option, I encounter endless projects and apps designed to provide slider functionality. But the mistake a lot of them make is to overcomplicate things.

Slider widgets essentially only need to provide some very basic functionality. The rest, the presentation layer, should sit seperately and not be packaged with the slider code, in my opinion.

Slick Slider provides the basics out of the box – you’ll just need to set up some additional styling.

It’s a great little solution, check it out here.

14. No-Hassle Image Browser – IrfanView

During any web development project, I’m working with images a lot of the time. It varies, from client logos to product photography but there can often be a lot of them to work through!

Sometimes it’s helpful to be able to quickly browse through a folder of images, perhaps to locate an individual picture or get an overall impression of the full image collection.

I’m a Windows developer, so this list of apps focuses purely on the tools available for this platform (sorry Mac users – though you could still try this tool out by using Wine) and one of the most widely used image viewers is IrfanView. Created by Irfan Skiljan way back in 1996, IrfanView has remained one of the most adaptble and speedy ways of quickly navigating lots of images.

• Includes support for a wide range of image types – BMP, GIF, JPEG, JP2 & JPM (JPEG2000), PNG and more
• Image editing functionality – Crop, resize, rotation and adjustments to brightness, contrast, gamma etc.
• Allows for lossless JPG operations with the use of a plugin

It’s a superb app, and makes navigating large collections of images much more enjoyable.

15. Quickly Capture Animated Gifs – ScreenToGif

A great way to make blog articles pop is to embed some animated graphics into them. Video is often a good choice – it loads quickly, is rich in engagement and information and can be a great long-form content strategy for many sites.

But other times, it’s nice to get a quick animation up onto a page to give a very brief overview of a subject. I love animated gifs, snappy little short-form snippets of movement which can really liven up a page.

They’re not the most efficient of formats, they’ve got a seriously limited colour pallete (Static GIF images are limited to 256 colours, though with some tricks you can make animated gifs with ~1000 colour per frame. Still a long way from high-def video!) and

But they have massive widespread support across browsers, they’re quick to load and easy to embed.

The animated GIF format has been around for more than 35 years now. And with the seemingly undying popularity of the animated gif meme format, I don’t see it going anywhere soon.

Just don’t ask anyone how to pronounce it!

But, I digress – Making animated GIFs is quick and easy (at least on Windows machines) thanks to the excellent ScreenToGif.

ScreenToGif makes it super-simple to record any part of your screen and convert it into an animated GIF, even making adjustments to framerate and image size along the way.

16. Create Compelling Video Screen Shares – ShareX

Sharing videos can be invaluable during web development projects. Recording screencasts for clients can make project documentation more immersive and more valuable. You can also record product videos, tutorials and more.

It’s vital to have a tool which makes it simple to capture part of your screen in an easily shareable and efficient format.

ShareX is one such tool. Using ShareX you can graph screenshots, record video and more.

You can grab a specific window, a region or even a single monitor. It’s very flexible, I’d highly recommend it for anyone needing to capture video on a regular basis.

It’s not got the greatest interface in the world, but a lot of tools I use have their fair share of rough edges – I don’t mind that at all. I prefer that the authors of these tools focus on core functionality rather than eye candy.

Give ShareX a try if you like, it’s available here.

17. Test Your API Endpoints Thoroughly – Postman

Web development often involves working with APIs – interfaces into 3rd party systems which are integrated using architectural styles such as REST, which is a standard for communicating between computers on the web.

REST makes use of communications over the internet via the Hypertext Transfer Protocol, the standard method which all web traffic uses to get around.

There are various components to each REST request, such as the verb, which describes the operation we want to perform (such as GET, POST, PUT or DELETE), a header, which includes information about the the request, a path to a resource which identifies exactly what we want the operation to act upon and an optional message which contains the body data.

It’s a fairly involved process and sometimes it’s handy to have a tool to make sense of it, especially when debugging complex API request/response cycles.

Postman is an excellent tool for doing this. It’s evolved over the years. It started out in 2012 as a side project of software engineer Abhinav Asthana who wanted a way to simplify API testing.

Since then it’s evolved into an extremely powerful application, now even sporting a web-accessible interface with account management and many other useful features.

Take it for a spin here (or try out the web accessible version). Especially if you work with APIs a lot during web development, it’s an extremely helpful tool.

18. A Wicked Fast Local WordPress Setup – LocalWP

WordPress developers will be the first to tell you that WordPress isn’t exactly the most straightforward thing to set up during the initial stages of a web development project. There’s a few configuration steps, the database to configure, wp-config.php environment variables to set up as well as the initialisation of a base theme.

Not to mention getting a suitable web server up and running in the first place. Requiring a suitable PHP isntallation, a MySQL database and an optimal web server such as Apache or Nginx, it can require a reasonable amount of technical knowhow.

Even bundled installers such as XAMPP still assume some degree of technical knowhow.

I first discovered LocalWP (now known as simply “Local”) not long ago while working on some client WordPress sites.

I’ve always configured my own server and WordPress installations – not particularly minding the setup process, as I’ve become quite adept at it over the years and know what I’m doing.

But I gave LocalWP a try and was very impressed. It’s got a clean, intuitive interface and will automatically set up a suitable environment including PHP and MySQL – latest versions, with the ability to select older versions if required for compatibility testing and other reasons.

The WordPress core itself is automatically installed and it provides you with a simple one-click login.

As a bonus, it also integrates directly with WPEngine and Flywheel hosting, which can make deploying your WordPress installation dead easy.

I’ve found WPEngine to be an absolutely excellent host over my many years of using their services. I tried out Flywheel recently too – a more budget-friendly version of WPEngine, owned by the same company, though Flywheel seemed to be slower – it took longer to spin up instances, file transfer took longer and it didn’t feel as polished as WPEngine, but that could have been as I was using the basic tier package and not one of the slightly more powerful tiers that I’d usually make use of for client sites on WPEngine.

Anyway, if that sounds like your cup of tea, give Local a try.