Ember is a JavaScript front-end framework designed to help you build websites with rich and complex user interactions. It does so by providing developers both with many features that are essential to manage complexity in modern web applications, as well as an integrated development toolkit that enables rapid iteration. From the beginning Ember was designed …
jQuery Debounce Functionality
Sometimes we need to run the functionalities after some delay not immediately. For example, Send the search requests after a delay in the search form. Show the announcement bar in some delay after the site is loaded. There are several libraries to implement the Debounce functionality and we can use one of them in our …
React.js Boilerplate
There are a lot of boilerplates for React and it’s hard to decide which boilerplate to use.The below one is a website which where we can search such boilerplate by keyword.https://www.javascriptstuff.com/react-starter-projects/ For example, below react boilerplate provides various functionalities – Redux, GraphQL, SEO…https://github.com/nozzle/react-static
Scroll Hijacking
Scroll Hijacking, as it is commonly referred to by designers and developers is when you’re at a site, and you attempt to scroll and the site decides it knows better and hinders your scrolling to “prettify” your experience. Now personally, this frustrates the living hell out of me. I have a mouse that has a …
Animate on Scroll
On the frontend design, we can implement the animation effect on scrolling using the following library. https://github.com/michalsnik/aos Currently most of the premium Shopify themes are embedding this library by default to use their awesome animation functionality. We can use this library to implement the scrolling effect on our any frontend projects.
Styled component
Instead of separating HTML and CSS, we can embed all CSS styles into HTML. especially in React components. The advantage of Styled component is that we can use variables inside CSS styles without any limitation. This feature is very useful when implementing mobile responsive. https://www.styled-components.com/docs/basics
Autosizer Library
Autosizer is a React component which is convenient to use when implementing mobile responsive. We can wrap any component using Autosizer, and Autosizer propagates width and height of the component to it’s child components. Child components can use this width and height to implement responsive. Autosizer is especially useful when used together with Styled Components. …
SPA and Google SEO
Nowadays SinglePageApplication is everywhere, providing great performance and user experience. But what about SEO / Will search engine bots be able to see SPAs correctly? Along time ago, when computers are not powerful enough, most search engine bots were just checking HTML static pages.But nowadays, bots got much cleaver and powerful. Google bot surely supports …
Parcel
Parcel is a bundling tool which is similar to Webpack.Parcel uses worker processes to enable multicore compilation, and has a filesystem cache for fast rebuilds even after a restart.Parcel has out of the box support for JS, CSS, HTML, file assets, and more – no plugins needed.https://github.com/parcel-bundler/parcel Webpack is hard to use because it’s configuration …
Timeago.js
What? Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”). View the examples, and enjoy. You opened this page about a minute ago. This page was last modified about 15 hours ago. Ryan was born 40 years ago. Why? Timeago was originally built for …