Issue #242 (ES6 Object Destruct, Uncats, CSS/HTML, React)03/08/18
Continuing on the topic of ES6 destructuring, the power of destructuring is evident in the ability to navigate into nested object structures to get specific bits of information as needed.
For example, let's say you have the following object:
|
let myObj = {
name: "Pat",
location: "Earth",
status: {
initial: {
start: 1,
end: 2
},
other: {
start: 10,
end: 20
}
}
};
|
Using destructuring, you can assign deeply nested values from this object to variables for use later in your code:
|
let { status: { initial }} = myObj,
{ status: { other }} = myObj;
console.log( initial.start ); // 1
console.log( other.end ); // 20
|
View on JS Bin
In previous destructuring examples, the element(s) inside the first curly brace represented the variable(s) that would be used to hold the destructured value(s). In this case, however, the variable is inside another nested set of curly braces. The first thing before the colon here indicates the object where you want to start searching.
Each nested set of curly braces allows you to go deeper into the object. You can then use dot notation to access the property you want, as I've done in the code above when logging the values.
If you want to use a different variable name for the object you're accessing, you can do this:
|
let { status: { initial: initialValue }} = myObj;
console.log( initialValue.end ); // 2
|
View on JS Bin
In this case, I'm assigning the status.initial object to a variable called initialValue. This adds a little extra complexity to the process, and might make the code a little harder to maintain, but it's an option if that's something you need to do.
Now on to this week's tools!
|
The Uncategorizables
FullStory
Wondering how users are taking to that new redesign? FullStory removes all the guesswork by showing you every click, swipe, and scroll. Best of all, you can try it for free. sponsored via Syndicate
Kutt
A modern URL shortener that lets you set custom domains for your shortened URLs, manage your links, and view the click rate statistics.
Ceev
Transform your LinkedIn into a spectacular resume.
Osquery
Query your devices like a database. Uses basic SQL commands to leverage a relational data-model to describe a device.
Mockuptime
The ultimate collection of beautiful, realistic PSD mockups to showcase your work. Available for free, just how you like it.
1Backend
The self hostable cloud to run Lamba functions and microservices.
MailPort
Connect your MailChimp mailing list to your Facebook Page and start growing your subscriber list in Messenger.
Polka
A fast micro web server. An extremely minimal, highly performant Express.js alternative.
Substack
Paid newsletters made simple. Makes it simple for a writer to start an email newsletter that makes money from subscriptions.
mySetup
A place to share your computer setup (hardware) with others.
thanks
Give thanks to the open source maintainers you depend on. Run this in your project and it will tell you which of your dependencies accept donations.
|
CSS and HTML Tools
BizarroDevs
A curated newsletter with all the cool, wacky and the obscure tech news on a weekly basis (you’ll get it on Tuesdays). Is free and will help you earn the most Slack reactions in your office sponsored
Unused CSS
Scan a website for unused CSS selectors.
Hey Meta
Quality check and generate meta tags for your website.
basicScroll
Standalone parallax scrolling with CSS variables. Allows you to dynamically update the variables depending on the scroll position.
Postcards
Create awesome emails in minutes with drag-and-drop simplicity.
GradPad
CSS gradient generator. Create lovely CSS color gradients for your designs.
React CSS Themr
Easy theming and composition for CSS Modules.
modern-normalize
A new, modified version of Normalize.css by Sindre Sorhus.
Micron.js
a micro-interaction library built with CSS animations and controlled by JavaScript.
CSS Gridish
Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.
|
React Tools
react-portalgun
Lightweight portal system for React. Mega seeds included.
React Morph
Morphing UI transitions made simple.
React-Draggable
A simple component for making elements draggable.
React Component ... Component
Declarative version of React.Component. Because sometimes you want a lifecycle or some state but don't want to create a new component.
react-marker
Highlight keywords and add colors to text.
Proton Native
Create native desktop applications through a React syntax, on all platforms.
React Agent
A JavaScript library for your client store, server querying, and database management.
Reactjs-Popup
A simple React popup component. Use it as a tooltip, modal, sub-menu, etc.
After.js
Next.js-like framework for server-rendered React apps built with React Router 4.
react-handy-renderer
Draw 2D primitives in sketchy style with React.
|
|
