Issue #362 (scrollRestoration, Frameworks, React Tools, Build)06/25/20
Codacy: Automated Code Reviews
Codacy is an automated code standardization platform that helps improve code quality, create alignment on best practices, save time in code reviews, and reduce technical debt.
Get Started
|
|
A feature of the history API that has been around for a while that you may not have heard of is the history.scrollRestoration property. This property does exactly what the name implies: Allows you to restore the scroll position of a previously visited page in the browser's history, as opposed to jumping back to a previous scroll position.
This might be useful in dynamic apps where the content is constantly changing and a scroll jump might not be desired.
You can get or set the current scrollRestoration value:
|
console.log(history.scrollRestoration); // auto (default)
history.scrollRestoration = 'manual';
|
From what I can tell, this works fine in Chromium browsers but doesn't seem to work in Firefox, even though Firefox apparently supports the feature.
To test this out, I put together two simple demo pages:
In both cases, you'll want to perform the same actions, as described on the page, so you can see the difference:
- Scroll down to item 86, click the link
- On the subsequent page, use your browser's back button to go back to the previous page
On the default demo, you should see the page go back to its previously scrolled location (where you can see item 86). But in the second demo, where I'm setting the history.scrollRestoration property to 'manual', you'll notice that the scroll position is restored back to the top of the page once you return using the back button. As mentioned, Firefox doesn't seem to honor the manual value when returning via the back button.
Maybe there's something about this property that I don't understand, but I filed a bug report for Firefox to see if this is something that should be corrected. This looks like a useful little feature but it's not very enticing when the behaviour is different in major browsers.
Now on to this week's tools!
|
Front-end Frameworks
Codacy
Automate and Standardize Code Quality — Set standards on coverage, duplication, complexity, and style issues and see real-time feedback in your Git workflow. sponsored
Instaclone Frontend
An Instagram clone built with the MERN stack and React, React Router, styled-components, and React Toastify. Also links to a repo for the back end.
Vuesax
A set of beautifully designed, easy to use, reusable framework components for Vue.
StretchShop
A fast and scalable e-commerce framework built with Node and Molecular on the back end and Vue on the front end.
HTML5 Boilerplate
The king of all frameworks is not at version 8.
tailblocks
Ready-to-use Tailwind CSS blocks. Lots of categories, lots of components, and you can test in multiple viewport sizes right on the page.
Solid
A beautiful component-based design system powered by Bootstrap 4.
Welcome UI
A customizable design system with React, styled-components , styled-system and Reakit.
Basic.css
A classless CSS starter file that gives you basic CSS formatting and ability to make basic grids with only HTML5 syntax.
Bonsai CSS
A super lightweight, fully responsive, utility complete (i.e. single-purpose classes) framework.
ReactReduxMaterialUI
A simple template for React development using Material UI and Redux, with Axios as the HTTP client.
Admin Dashboards
Full-stack admin panels coded in various web frameworks (Flask, Django) enhanced with SQLite database, ORM, authentication, helpers and deployment scripts.
  |
|
React Tools
  |
useReactiveForm
A React hook for gathering and validating form data without unnecessary re-renders.
rich-markdown-editor
A React and ProseMirror-based WYSIWYG editor that powers Outline (the knowledge wiki tool) and can also be used for displaying content in a read-only fashion.
React Placeholder
A React component to easily replicate your page with nice placeholders while the content is loading.
React PDF Reader
A React component that works as a PDF Reader. It's basically a React wrapper for Mozilla's PDF.js library.
icestore
A simple and friendly state management library for React with a minimal and Familiar API, built-in async status, class component support, and TypeScript support.
react-editor
A pure rich-text editor with TypeScript and React Hooks, along with a number of other modern updates.
react-simple-keyboard
A slick virtual keyboard component for React that's customizable, responsive, and lightweight.
React Spectrum
A tiny (~1.2k gzip'd) React component to generate colorful text placeholders.
redux-form
A higher-order component using react-redux to keep form state in a Redux store.
react-intersection-observer
React component that monitors when an element enters or leaves the browser viewport.
|
Build Tools, Bundlers, etc.
Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity. promoted
Create HTML5 Boilerplate
Like create-react-app, but for HTML5 Boilerplate, to get up and running with one command.
Harness
Continuous delivery-as-a-service. Uses machine learning to protect you when deployments fail, and equips you with enterprise-grade security every step of the way.
FAB
Frontend Application Bundles. A bundle format for front-end applications that unify static sites, SPAs, SSR, and server-side logic in a single format that's universally compatible and easy to deploy to a wide range of providers.
pnpm
Now at version 5+. A fast, disk space efficient package manager.
is-esm
A package that tells you if an npm module uses ECMAScript modules or not.
webpack-blocks
Now at version 2+. Functional building blocks for your webpack config: easier way to configure webpack and to share configuration between projects.
Snowpack
Also now at version 2+. A web app build tool that removes the expensive (and unnecessary) bundling step from your dev workflow.
DenoX
A cross platform script runner and workspace wrapper for Deno, the new Node.js alternative.
Hooks’ Macro
Babel Macros for React Hooks automatic memoization invalidation.
esbuild-loader
Use esbuild (the popular JavaScript bundler and minifier) with webpack to transform ESNext and TypeScript code.
|
A Tweet for Thought
Here are two good threads discussing hesitation when it comes to contributing to open source projects: One by Jenn Creighton and another by Emma Bostian (who was answering the previous tweet's question).
Send Me Your Tools!
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Seeing as most of us our spending a lot of time at home in the current environment, you might enjoy grocy. It's a web-based self-hosted groceries and household management solution that's also available as a native Windows app.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
