Home

App Component 1 Coding Tips 4 CSS Tips 4 Data Server 2 Layout 1 Project Setup 6

Vanilla WebDev

Coding Tips 4 Project Setup 6 Starter Code 6
App Infrastructure Code:
  • Loading Script Files
  • DOM Events
  • localStorage Data Server
  • IndexedDB Data Server
March 05 2025

CSS Background Image Issue - White Flash When Scrolling The Page

Web Design

There was this white flickering when I scrolled the page after switching back from another tab. It happened really fast that I needed to record the screen and check the video frame by frame.

March 04 2025

localStorage Data Server

Data Server Starter Code

Plain JavaScript starter code to build localStorage data server. The data is automatically parsed from and converted back to JSON format upon saving.

March 04 2025

Mapping DOM Event Listeners

App Component Starter Code

Plain JavaScript starter code to organize event listeners in an application screen, mapped using data- HTML attribute.

March 04 2025

View State

Starter Code UI

A starter code to implement a multi-screen or views in your web app.

February 19 2025

Deploy Files to Firebase Hosting

firebase Project Setup

A simple guide to deploy files to firebase hosting.

February 19 2025

Loading Script Files

Starter Code

A starter code to load JavaScript files in queue for a small JavaScript app.

February 17 2025

Make Your Web App Installable

Project Setup

How to make your web app installable.

November 19 2024

Console Log Snippet

Coding Tips

Well, console.log is already short enough. In VS Code, you can simply type log to expand it into console.log.

Can we make it even faster, though? Sure, by typing asd. Here's the VS Code snippet:

Home
Coding Tips 4 Project Setup 6 Starter Code 6

Blogs

  • XML Expr / Blogger Development
  • tmpcafe / Guitar Tab

Pages

  • YouTube
  • About
  • Contact

Reading List

https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b

Libraries

https://github.com/verlok/vanilla-lazyload

Developer Resources

https://webpack.js.org/configuration/output/ https://web.dev/articles/preload-critical-assets

Reading List

  • How to name a webpack chunk (including split and common chunks)

Featured Post

  • Home

Blogs

  • XML Expr / Blogger Development
  • tmpcafe / Guitar Tab

Pages

  • YouTube
  • About
  • Contact

External Stylesheets

JS: Mobile m=1 Link Fix