How to Add SVG Brand Icons In-line

Why would you do this? Instead of loading an image (jpg/png/svg) per platform, we can simply embed the SVGs into html. In this case, it saves from having 7 http requests and thus helps with website performance. CSS is also inline. The example below uses official brand colors. and brand SVG logos from … Read more

Useful Web Design Links

Found the following links useful A collection of repeatable SVG background patterns for you to use on your web projects – collection of PNG Files – FREE SVG icons for popular brands – Gradient backgrounds

Website Development Life Cycle

Step 1. Gathering Information: Purpose, Main Goals, and Target Audience This stage, the stage of discovering and researching, determines how the subsequent steps will look like. The most important task at this point is to get a clear understanding of your future website purposes, the main goals you wish to get, and the target audience … Read more

HTML5 Elements worth remembering

The notable thing ofcourse by using these you don’t require any JS. Meta/Progress – e.g progress barsĀ  Pictureset – e.g mobile vs desktop images <Summary> / <detail> – e.g. FAQ Summary/Detail combined can be great for performance to reduce JS/CSS required.

How to optimize SVG Images

Great tool for SVG optimization, tremendous results… This command will optimize all the SVGs in the target folder (-r recursively) and output them at the output folder (leaving the original SVGs untouched) Example 1 – optimize a folder call svgo -f “D:\code\alif-central\src\images” -r Example 2 – optimize a folder and output to new folder … Read more