Renaming module Imports like a Pro, now with added use-case!

Photo by Finan Akbar / Unsplash

If you’ve come to JavaScript in recent years and are a user of the newer front-end frameworks or libraries like React, import and export will be familiar to you. For those of us who weren't watching the new module syntax being introduced in ES6, you may have just got to a level of understanding between the difference of a named and a default export, but you may have missed the nuance on the ability to alias imports and why this could be important.

The basics again (in brief)

A module (as an example, a Javascript file like my-module.js) can export functionality or objects from itself…


Photo by Daria Shevtsova from Pexels
Photo by Daria Shevtsova from Pexels
Photo by Daria Shevtsova from Pexels

When you work for a company that enforces strict privacy and secrecy around products, it can be difficult to demonstrate functionality on an internal organisation Github repository using locally recorded videos and keeping within the file size limits. Sure, you can record a video of the functionality and pass it on internal non-Github channels, but that’s extra links and knowledge required to be documented and passed around.

Wouldn’t it be better to just copy the video straight onto your organisation’s Github where it’s required?

It sure would, but your org’s Github can restrict the file size of videos which are…


Automating “spot the difference” using TestCafe and ResembleJS

Visual regression effectively tests the “display” of the page. This is different to other types of tests, like functional or snapshot tests, which test the actual code. Visual regression testing is performed by comparing two images, a baseline and a current, to find any deviations.

Spot the difference!

Visual regression testing can be helpful in mature large-scale projects, web apps with many routes or navigable pages, and/or web apps built with a component library or reusable styled components. In projects like these, a change in style to a button may have large cross-concerned knock-on effects…


How to quickly de-frustrate an “Unexpected token export” woe 😞

There are times when you’re writing a CommonJS program that you execute with Node, you will need to use CommonJS’s require on a file that is exported using ES Modules export { … }or export default .... You’ll know this frustration when your program starts to shout the Unexpected token export abuse as a console error.

For me, this problem came when I was writing a documentation tool for a React web application. …


Obligatory article image of a fake pug as per the norm. Artist accreditation — https://flic.kr/p/dQC9kt

So you’re trying to learn JavaScript but are inundated with all the different syntax and ways to program that have evolved over time?

Why is that code littered with backticks? What in the world are these mysterious arrows, they look like someones introduced emoji’s? 3 dots, what the what?

Our industry consists of a mass of psychologically frayed individuals ever stressing about imposter syndrome and self doubt. “Will I be found out that I don’t know what I’m doing?”, “I haven’t a clue how this code works, it just seems to run with magic.” “I got nowhere yesterday and everyone…


A personal story in the development of GIPA, my personal advocate.

As a person who delights in creating new software pet projects, I wanted a project to demonstrate chatbot technology whilst also learning new skills. For this I formulated the idea of building my very own digital advocate. An advocate that would represent me and answer questions from inquiring users! This culminated in the development of GIPA, Greg’s Interactive Personal Advocate. See a it deployed live here.

First and foremost — this is a story of development as opposed to guide. Will you learn new things? …


I’ve always considered myself primarily as back-end or Java developer. Recently I’ve taken steps to up-skill, all in a mission to make myself a more-rounded engineer with full-stack experience. One of the new skills I wanted to learn was in front-end technologies, and as is widely known, the “language of the web” is JavaScript.

Coming from a Java 7 background (I’m old enough to remember when that was considered new…); I fooled myself into thinking that JavaScript and Java, with their similarities, would be easy to pick up without much preparatory learning. As you can guess, I was wrong. …


This article is a bare minimum description of JavaScript’s Closures and Global Scope. This article strives not to go too deep in any particular area and is more of an appetizer into some of the quirkier aspects of JavaScript.

Closures

  • Closures are essentially returned functions that remember their scope information. This means that they remember where to find the values related to their operation so long as they were defined within the scope of the function when it was declared; taking a snapshot of the variables at the time of invocation.. …


In this article, I give a brief overview of OOP implementation within JavaScript, specifically Objects, Prototypes, and Classes.

Basics — Refreshed

Objects in JavaScript are free-form and mostly don’t follow any structure. Their structure can be best compared to being similar to Map objects in Java, consisting of key-value pairs.

JavaScript objects do not have to have members declared upfront. As objects in JavaScript are not defined like class blueprints such as in Java, classes can mutate freely; being assigned variables as the program requires.

let object = { 'oldProp':'Old Value'};
object.newProp = 'New Value';
console.log(object); …


The important things you can quickly learn to be informed and confident with using and conversing on React Router v4

Obligatory image of complex train routing only abstractedly related to this article. Image courtesy of https://en.wikipedia.org/wiki/Rail_transport#/media/File:CTA_loop_junction.jpg

React Router is a client-side router (CSR) for use with React projects (I know, duh right?). It provides routing which is the fancy term for the rendering of different components depending on URL paths within a React web application.

Run the following command in your project to save react-router-dom as a project dependency:

npm i -S react-router-dom

Using the ES2015 syntax, you can import React Router into your React components using:

import * from 'react-router-dom'

Link components can be thought of as your typical anchor links that, when clicked, redirect the user to the path specified in its to property.

Greg Byrne

Engineer of Software. Breaking life’s hurdles with peregrine speed and a manatee’s grace.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store