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.

Importing SVGs as Components in ReactJS

If you attempt to import a SVG as a Component in ReactJS, ensure that your SVG has viewBox values. Design tools would automatically include them. Lesson Learned!  I was trying to make a SVG responsive but no matter what I tried it did not work. I was optmizing the SVGs before using them in ReactJS, if … Read more

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

ReactJS – Common Project Tasks in my Web App Development

These are tasks/steps I follow in my current development process that is common among my front-end development in ReactJS. I mostly use create-react-app (CRA). Organisational Pages – try to make them “copy/paste” as possible between projects as it is the same organisation Create-React-App – default settings MDB React CSS React-Router-Dom (used MDB) Router setup with … Read more