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.
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
I had two clients requiring WPO (Website Performance Optimization) this month and wanted to show you the before and after, as well as some explanations. I have removed the client domain for privacy reasons. I really enjoy tuning websites but it can be challenging especially if it is using tons of plugins/themes. More code more … Read more
Great tool for SVG optimization, tremendous results… https://github.com/svg/svgo 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
I built an app where I needed to prevent users from right clicking on the UI.
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
I found the following technique the easiest to deal with a list of Refs.