We could simplify the import above by creating an
index.js file inside the
ComponentOne directory as shown below. It acts as a table of contents of all the exportable variables and functions within its files.
I recently discovered an incredibly useful feature in Styled Components that allows sharing blocks of CSS properties between components. Here’s a simple example where I create a variable called
sharedProps that is passed into two different components,
One thing that I have always found clunky in CSS is creating responsive breakpoints using
@media queries. Let’s look at an example.
Here I have used
@media queries to change
margin with regard to screen breakpoints.
Now let’s write a function that can utilize what we’ve learnt about sharing code in Styled Components and generate…
AWS Amplify is a fantastic tool for quickly getting up and running with a full-fledged application. It has the amazing capability to incorporate features such as user Authentication.
If you’re using React then you can use the
withAuthenticator Higher-Order Component to handle your full-suite of Authentication. As useful as this is, for production you’d typically want to customize this to meet your app’s needs and styling. I took on the challenge of breaking out the Amplify Auth method and building my own Sign-In process to see how it all fits together.
For those of you unfamiliar with D3, it is a visualization library that is most likely behind any impressive web-based graphics you’ve seen on sites such as the New York Times, FiveThirtyEight or Flowing Data.
It typically requires direct access to the DOM to make its magic happen. This, of course, is in conflict with React and its utilization of the Virtual DOM. I’ll show you an easy way to work around this limitation, and get you back to making those amazing D3 graphics you know and love, within the React ecosystem.
What is D3?
D3 stands for Data Driven…
React version 16.6 has introduced Memoized components. A functional component without the baggage of state and component lifecycle methods. The purpose is to maximize performance. I wanted to put that to the test and see how it compares to other React component types.
To answer that question I’ve built a simple React app which runs a user-selected number of operations and plots the results on a line graph. If you’re not in the mood to read this skip to the bottom and play around with the app.
There are four fundamental component types in React:
Setting up Our Rails Example
For the example, we’re going to make a simple stock trading app. We’ll have three models: Users, Portfolios and Stocks. The user can have many trading portfolios as well as many stocks through the portfolios. …
This week’s blog is going to be short but sweet. I’m going to walk you through an invaluable feature of VS Code: the ability to create custom user snippets. This is really incredibly simple to do and it will greatly enhance your workflow. If you’re unfamiliar with VS Code it’s an IDE that in my opinion puts the likes of Atom and Sublime in the shade. It has a ton of easy to install extensions and customizations that’ll make your life easier and maximize your efficiency.
What is a Snippet?
A snippet is a chunk of code that can be…
In my previous post I began to chip away at the molehill of Type Driven Development. I’ll now step over that molehill and on to the mountain that is Test Driven Development. As explained in that post, Test Driven Development is focused around functionality of your code, i.e. when a function / code block runs does it behave as expected. Test Driven Development is all about bombarding your code with possible scenarios that could bring about unexpected errors. …
A major overhaul in the world of manufacturing was spawned with the birth of Six Sigma. A statistically-driven approach to Industrial Engineering that focuses heavily on reliability.
Engineers realized that there are lots of external conditions that can affect the quality of your product. Components might wear down, machine upgrades might be buggy, a technician could be tired — these are all factors that could mean that the product you’re trying to manufacture doesn’t turn out the way you expected. …
Let’s start off with arrays. The basic example shown here illustrates how easy it is to assign values to multiple variables in a single line of code. Each element in the array on the left is defined as a constant variable with a value equal to its matching element position in the array on the right.
const [a,b,c] =…