Resize Observer is a new JavaScript API that’s very similar to other observer APIs like the Intersection Observer API. It allows for elements to be notified when their size changes. The most frequent reason for an element’s size to change is when the viewport is resized or the device’s direction changes between portrait and landscape. Up until …
CSS – “position: fixed;”
On the iPhone devices, the position:fixed; property doesn’t work when users try to input the values. For this reason, the DOM element with position:fixed property will be displayed somewhere that we didn’t want. To fix this issue, we can add the following CSS properties while the input board is activated.
Tamper monkey chrome extension (supports Firefox, safari as well.)
Tampermonkey is the most popular userscript manager, with over 10 million users. It’s available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox. Tampermonkey makes it very easy to manage your userscripts and provides features like a clear overview over the running scripts, a built-in editor, ZIP-based import and export, automatic update checks and browser and cloud storage based synchronization. We can …
Material Design for Bootstrap
The world’s most popular framework for building responsive, mobile-first websites and apps.It provides Angular, React, Vue and jQuery versions. https://mdbootstrap.com/
react-sortable-hoc
react-sortable-hoc is an npm package which provides drag & drop, sort functionality for React components. https://github.com/clauderic/react-sortable-hoc Here is demo and documentation of the package. http://clauderic.github.io/react-sortable-hoc/#/basic-configuration/basic-usage?_k=ws01s2 And here is awesome example which uses this package. https://qed42.github.io/react-redux-reorderable-grid/
react-idle-timer
react-idle-timer is the react component that we can use for detecting user’s activity in browser. https://www.npmjs.com/package/react-idle-timer
Vue cli ui interface
You can create and manage projects using a graphical interface with the vue ui command.This command is still beta as the time of writing, but this provides very convenient graphical ui to manage vue based projects, like: add dependency, run dev server, build, analyze bundle size etc. https://cli.vuejs.org/guide/creating-a-project.html#vue-create
Simple HTTP Server for static HTML
This will install http server node package globally on your PC. After installation, you can run command http-server This will run your SPA built app in local IPs:127.0.0.1:8080, localhost:8080, 192.168.1.126:8080, 10.2.34.25:8080 So you can access to your APP from local and other PCs as well. Especially, PWA does not work on development environment. For testing …
Hover – double click issue on iPhone
When you use hover CSS event style, it won’t work on iphone. In this case, you will need to double click buttons applied hover CSS event style. Normally, button should work by one click. So it looks like issue. To prevent double click for issue, we need to remove hover event style for buttons. Try …
Sketch Trial
If someone reached to trial in using Sketch App, the following library helps them to increase the trial period for a while. (Tested on Sketch 55.2.) https://github.com/gch1p/sketchtrial