JS | Web Dev | Web Frontend

JS Get Query String In URL

Handy way to get query string value in URL Example URL: https://www.example.com/index?query1=result1&query2=result2 const params = new URLSearchParams(window.location.search); // window.location.search is showing ?query1=result1&query2=result2 // then we can use the params.get(‘{paramName}’) for getting the query param console.log(params.get(‘query1’)) // result: result1 console.log(params.get(‘query2’)) // result: result2 For note: The query string value must be without hash (#). Try it […]

Continue Reading...

JS

JS Intersection Observer API For Lazy Loading Image

Intersection Observer API can be used to detect intersection between two elements. The most common case to use is lazy loading image.Lazy loading means we load the image when it’s needed, in common case is when the image is shows up in the browser viewport. Note: When testing it, you may notice the intersection callback […]

Continue Reading...

MongoDB | Mongoose | NodeJS

Mongoose Not Creating Collection

If collection not created or the create() or save() callback is never triggered, most likely the issue is related to how the model created. From Mongoose doc: Note that no tanks will be created/removed until the connection your model uses is open. Every model has an associated connection. When you useĀ mongoose.model(), your model will use […]

Continue Reading...

NGINX | Web Dev

ERR_CONTENT_LENGTH_MISMATCH

OS: MacOS SierraWeb Server: NGINX My local web dev environment using NGINX proxy to Webpack dev server. I use domain name to open the dev web instead of localhost. But today, the web page won’t open and showing ERR_CONTENT_LENGTH_MISMATCH in browser console when requesting some files. I thought the issue caused by browser plugins, but […]

Continue Reading...

Vue JS

Set API End Point Before Vue App Loaded

Case scenario: We have two API end points to call based on user’s setting, lets say ‘region’ The base URL is set in Vuex store and persisted in local storage or cookie When user reloading the page, the API call should be calling the correct API end point based on the saved region How we […]

Continue Reading...

Random Opinion/Thought

Freedom? What is it?

I think the only living creatures we call “animal” have real freedom. Do you think you have freedom? Do you think what you see on internet is your freedom or information that controlling your mind and behavior? Don’t answer, just… Think… Or…. Never stop asking

Continue Reading...

Web Accessibility

Web Accessibility Notes

All input form has label right close to it. Nice form sample from Udacity lesson here. Use 16pt as min font size. This also helps you to eliminate auto-zoom on iOS Safari šŸ˜© Do not set focusable on all contents! Only set focusable (tabindex=”0″) to elements which needs user interaction. Keep the element tab order […]

Continue Reading...