Using Raw Files with Webpack

There are some files that are best used when imported as their raw contents. This includes, but is not limited to file extensions like: .svg, .md, and .txt. For these situations, you must use the raw-loader in your webpack.config file:

// Load markdown as raw text
...
{
    test: /\.md/,
    exclude: /node_modules/,
    loader: 'raw-loader'
}
...

Using an .svg file in React:

import svgData from './image.svg';

/* React render() */
<span className="loading" dangerouslySetInnerHTML= />

Cleaning up Log Statements

Developers use console.log statements religiously — it’s the best way of debugging and tracking a browser or computer’s path through the code. One problem that arises is that console.log statements are accidentally left in, which doesn’t reflect well if the log statements are clearly debuggers, or simply left in commented out. When deploying to production, console.log statements should be removed. Because they permeate every corner of the project, I’ve found it’s easiest to remove them using regexes: Find & Replace. Here are the regexes for finding all lines with console.log statements:

// Commented out statements
"\n *\/\/ console\.log\(.*\)"

// Active statements
"\n *console\.log\(.*\)"

// Commented out or still active
"\n *\/?\/? console\.log\(.*\)"

Common Regex Statements

I’ve started using regexes (regular expressions) more and more in my projects — specifically in Javascript — and I’ve found them very elegant and fun to use. I learned them briefly in class at school, but never really implemented them in full. My hackathon project did use a bit of natural language processing, however, it wasn’t to a huge scale. We mostly stuck to date and location parsing.
Here’s a simple email validation regex match statement in Javascript:

const validQuery = 'email@test.com';
const invalidQuery = 'I am not an email address';

// Email regex from: https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript
// Notice: uses '/' instead of quotes
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

console.log(emailRegex.test(validQuery)); // true
console.log(emailRegex.test(invalidQuery)); // false

Getting the Current Directory in Javascript

It’s really important that you use a reliable path resolving system when configuring your web apps. Packages like ExpressJS and Webpack rely on file paths to build and serve up your app so it’s essential that the way you get your current directory is reliable. There are a handful of ways of getting your current directory and navigating through it:
Getting Directory:

1. Default: __dirname // Often global — can simply access by calling this variable
2. Using environment variables: const __dirname = process.env.PWD;

Navigating Files:
Use the path library:

const path = require('path');
path.join(__dirname, './client/dist') // Resolves the file path

Modifying Local DNS

Computers can easily be configured to change the Domain Name System (DNS). What this means is that you can override and map certain IP addresses to different URL names. For example, at work, I develop on my own Dev Box — a section of a computer somewhere that hosts my files. Because Moat has hundreds of these, it’s not economical to buy a domain name for each box. Instead, they are left unnamed and can only be accessed from the browser using their public IP address. When I’m modifying code, I hook into their private IP addresses. Instead of typing in the exact IP address every time you want to view your code, which is long and can easily be butchered, you can modify your local DNS and map that specific IP address to a human-readable URL.
Navigate to /etc/ ($ cd /etc/) — notice it is prepended using a forward-slash, indiciating it is in the base directory. Next, open hosts using VI, VIM, NANO, or any other text editor. Now modify that file using the following structure.

<IP Address>    <URL 1> ... <URL N>
12.345.67.89    admin.test.com
01.234.56.78    test1.com test2.com

Common IP Ranges

Private IPv4 address spaces (Source)

RFC1918 name	IP address range	Mask bits
24-bit block	10.0.0.0 - 10.255.255.25	8 bits
20-bit block	172.16.0.0 – 172.31.255.255	12 bits
16-bit block	192.168.0.0 – 192.168.255.255	16 bits

Posted in Web Development with ES6, Javascript, Tutorial