Web Dev Blog
Sharing my experiences of building websites!
Google Core Web Vitals Back in May of 2020, I read a blog from "Google Webmaster Central Blog" about Google using a new set of metrics to rank websites sometime in 2021. See the article titled: "Evaluating page experience for a better web", May 28, 2020. Link...
Publii Static CMS Part 3 In part 3, we take a look of how to set up: Basic Settings SEO A static CMS without using the command line.Video Tutorial: Part 3 Basic Settings and SEO tweaks.Gerald Watanabe
Recipe for Success I think we all can agree that freelancers would rather build and work on websites then take care of their bookkeeping chores. Even writing this article about bookkeeping has taken a lot of extra focus, grit, and energy to complete. But...
Publii Static CMS Part 2 In part 1 I covered: 1) The features of this static site generator in which nontechies could use. 2) Installation and migrating Wordpress to Publii. In part 2, I cover: In this continuing series, I take a deeper dive into using Publii. How...
Publii Static CMS An open-source tool to create static HTML websites, designed for every skill level, from beginner to developer. Very easy to install and create a local environment on your computer. Publii is built with Electron and Vue.js. Here is a shortlist of the...
Update: This is an old post that never got published. Maybe this is a good time to release it, just something to do during this quarantine lifestyle we all are going through now. Another awesome way to learn web development stuff is by listening to some of the...
New Tools Using GraphQL
Free Useful OnLine Tools
You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did.
Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.
the main container decreases and increases size to demonstrate the responsive design behavior of flexbox..
A total of 29 pages, structured into different paragraphs: backgrounds, borders, fonts, texts, Column, Colours, Grid positioning and a lot more (including UI).
Polyfill.io makes it simpler to support differing browsers by attempting to recreate the missing features with polyfills.
An open source React library to power production-ready animations. Design fluid animations for the web, across desktop and mobile.
Part spreadsheet, part database, and entirely flexible, teams use Airtable to organize their work, their way.
Coolors is a fast and easy tool that let you generate beautiful color palettes or color combinations.
Framer Web is not a successor of Framer X, but rather an alternative to a macOS-only desktop client. It will continue receiving the same features and support as the web version.
Gradient Hunt is a free and open platform for color inspiration with thousands of trendy hand-made color gradients
The visual code editor
Design, develop, document and deploy your design system—without writing code.
We’re currently in private beta.
We’re primarily targeting teams.
A CSS gallery and showcase of the best web design inspiration, featuring over 2500 websites searchable by type, subject, and style.
Welcome to the interactive ES6 online console. A full JS console that can run all versions of JS.
Free Learning Tutorials Just For You
Scott Tolinski: teaching GraphQL with Apollo, Meteor & React to build a full-stack app.
Fixing Web Problems
How To Free Lance
You want to be a freelance designer or developer, here are the things you need to know. Things that you will never learn at a Coding Boot Camp, Coding School, or College.
This manual is an ongoing project not completed yet.
New chapters to be added each month