Issue #299  (El Dimensions, React Tools, Text Editors, Uncats)04/11/19

Buddy – Turn DevOps to NoOps The new generation of CI/CD is here. Automate website delivery in 10 minutes with over 100 preconfigured actions. Builds, tests, deployments, Docker – whatever you do, Buddy got your back. Get started for FREE now

As you might know, using JavaScript, there are many different ways to get the width and height of an element on a web page, but it's good to know how each technique differs.

I've set up an interactive demo on CodePen that displays the dimensions of the targeted box using five different DOM API techniques. Click the button to display the five different sets of dimensions.

Here's a quick synopsis of what's going on:

• The width and height of the box are defined in the CSS using fractional values and the box's box-sizing is set to border-box.
• The first set of values uses getBoundingClientRect(), which returns the element's actual width and height to multiple decimal places. The same result would be obtained using getClientRects().
• The second set of values uses offsetWidth and offsetHeight. As you can see these values are converted (not rounded) to integers.
• The third set uses getComputedStyle() which returns a more reasonable fractional value.
• The fourth set uses the CSSOM's document.styleSheets interface to grab the actual value out of the stylesheet.
• The final one doesn't really get the dimensions, but instead reads the scrollable area, which can be handy when measuring an element that scrolls or has overflow that's hidden.

Now on to this week's tools!
 

React Tools

Buddy – Turn DevOps to NoOps
The new generation of CI/CD is here. Automate website delivery in 10 minutes with over 100 preconfigured actions. Builds, tests, deployments, Docker – whatever you do, Buddy got your back.     sponsored via Syndicate 

react-formalized
A collection of pre-styled JSX elements based on HTML form elements. Offers an easy way to collect form data and/or input values.

React Snakke
Reading/scrolling progress indicator for React.

react-infinite-scroll-component
Now at version 4.5+. An easy to integrate 4.15kb infinite scroll component for React. Includes a pull-to-refresh feature.

React Compare Image
Simple React component to compare two images using a slider. Similar to another tool I featured here called "Beer Slider".

react-wordart
Nostalgic WordArt for React.

usePortal
Need to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

React Border Wrapper
A wrapper for placing elements along div borders. Creates an effect similar to what you get with CSS border image.

React-power-tooltip
A flexible, lightweight tooltip and menu library for React.

mdx-deck-live-code
A component for mdx-deck (a presentation library that uses Markdown and JSX) for live coding directly in your slides.

react-movable
Small and accessible drag and drop for your React lists and tables.

React-Calendar
A calendar component for your React apps.

ink
Now at version 2+. React for interactive command-line apps.

Navi
Declarative, asynchronous routing for React.

Text Editors and IDEs

Cloud Code
Everything you need to write, debug, and deploy your code. Extensions for VSCode and IntelliJ are provided to let you rapidly iterate, debug, and deploy to Kubernetes.

play.js
The Node.js and React Native IDE for iPhone and iPad.

CodeSandbox
The online code editor for React is now at version 3+ (details).

MDX Preview
VSCode extension that lets you preview MDX (i.e. JSX in Markdown) seamlessly. Write MD/JSX, see it live refresh and get instant visual feedback.

Gimli
A VSCode extension enabling smart visual tools for front-end developers. Currently running a Kickstarter if you'd like to support it.

Autumn
The macOS window manager for JavaScript hackers.

Cache-Control Header Builder
Build and learn about the Cache-Control header and its directives. Generates example library code for setting headers in Apache, Nginx, Express, etc.

Code Sketch
MacOS or Web editor with support for Sass, Babel, Emmet, and the ability to import frameworks like Bootstrap via CDN.

Browser Preview for VS Code
A real browser preview that you can debug inside VSCode.

SpaceVim
A community-driven vim distribution.

The Uncategorizables

Branded
A free tool to create and maintain style guides. Organize logos, fonts, colors, and more.

Lang API
Internationalize your entire website with human translations in under 10 minutes.

IP-API.io
Free IP address lookup location database and IP Geolocation API.

SpriteStack
A 3D pixelart editor based on a technique called sprite stacking.

Track-Mailgun
A free Slack bot that helps you track activity on emails you send using Mailgun in real time, directly in your Slack.

Flow
Animate Sketch designs in seconds and export production ready UI Animation Code for IOS, JavaScript animations for HTML, or create animated SVGs.

Sheetgo
A cloud-based software that allows you to create and automate workflows using the technology you already know.

Demo CLI
A simple JavaScript class that allows you to create canned demos of CLI-based tools (useful for talks and presentations).

ContextCue
A privacy-focused advertising network that allows advertisers and publishers to grow their business without tracking, collecting, or storing user data.

Poet
A platform and interactive environment to teach, explain, and share code.

A Tweet for Thought

Max Howell with his thoughts on cross-platform app development.
 

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...

Speaking of React, you might like React Digest, a weekly newsletter with 5 hand-picked React-related links.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris