CodeSplatter — Educational Coding Snippets for visual learners
CodeSplatter… an educational visual learning tool, and potential coffee table book.
The CodeSplatter series brings to light the much needed educational tools for visual learners.
Using small snippets of writing, you’re able to piece together and learn using each CodeSplatter. Teaching you topics such as React, ES6, basic theory & more.
With attention being more short fused, consumable bit sized educational content allows for quicker practical usage.
Anatomy Of A Web App
Today’s modern apps take advantage of the ever evolving internet and browser. Most of the world today are connected between API’s. From Netflix to smart fridges. It all starts with the server. We recommend @thedigitalocean for hosting your #ubuntu server with Nginx. Then it’s a matter of choosing your database and backend language. I recommend looking into #nodejs or #elixir. The frontend may seem even more intimidating, but do not fret. Follow along for future frontend tutorials. I’ll teach you #react, #javascript & more.
Classes in Javascript ES6
Javascript never had classes, until now. In ES6, classes are introduced. Found in most object oriented languages, classes are like blueprints. This allows you to set instructions (functions) when ever you initiate a new object from the class. For example, you can have a “User” class with all the needed functions for signing up, logging in etc… (PS. You can create a “constructor” function that will take defaults values)
Modules in Javascript ES6
There are multiple ways to use modules in Javascript, but I’m going to talk about modules in ES6. Modules allow you to export objects from one file, and import into another. This helps with maintaining your code base by seperating purpose into different files. Since classes are just objects, this would allow you to export a “User” class then inside a router, you can import and call the signup (User.signup()) function when going to “/signup”. (PS. Make sure to place “import * as users from ‘./users.js’” at the top of your file)
Associative arrays, hash maps, objects, dictionaries
Keys and values are what you need to know when it comes to associative arrays. Depending on your chosen language, the name may be different for you. Dictionaries for Python, Objects for Javascript etc… A regular array maps values with a number (eg. array=[“this would be 0”, “this would be 1”, “this would be 2”] ), while an associative array maps values with your own key. For example, in Ruby & Javascript it would look like (eg. array = {font_size: 10, font_family: “Arial”} ). Regular arrays have certain ways of mapping through the values compared to associative arrays where you can output elements based on the set key. Also a note with arrays. Each element gets assigned a unique numbered ID starting from 0.
Using JSON as simple database
Sometimes having a database can be overkill. Using JSON can speed up development.
JS
import fs from ‘fs’;
db=[];
fs.writeFileSync(‘db’,JSON.stringify(db))
db=JSON.parse(fs.readFileSync(‘db’),’utf8')
PHP
$db=array();
file_put_contents(‘db’,json_encode($db));
$db=json_decode(file_get_contents(‘db’),true);
Ruby
require “json”
db=[]
File.write “db.json”, db.to_json
db=JSON.parse open(“db.json”).read
Setting up a DO server with nginx to handle PHP & Node apps
Knowing how to setup your own Ubuntu server with nginx can help save you loads of money. Nginx acts as a http and proxy server. It essentially routes domains to different ports on a single server. This allows you to run multiple apps on 1 server using different ports. Make a new Ubuntu droplet at @thedigitalocean, then ssh into your server. Install nginx by running “sudo apt-get update”, then “sudo apt-get install nginx”. Configure your firewall by running “sudo ufw allow ‘Nginx full’”. By default, your apps should be stored in their individual directories at “/var/www/html/”. Once your app is running with the assigned port, it’s a matter of setting up the server block inside “/etc/nginx/sites-available/default”. You can have as many server blocks like in the image above. Make sure all apps are running on a different port. Restart Nginx by running “sudo systemctl restart nginx” and juice the $5 server till the last drop.
Setting up webpack to handle es6, react & scs
Webpack is quite powerful when it comes to building out your node projects on the fly. There are a few other choices, but more on that later. Webpack has 4 building blocks when it comes to it’S “webpack.config.js” file. There is the only Entry point, Output, Module & Plugins. The entry point is the main file where you will be importing various modules and stylesheets. The output is where you state the directory for the bundled javascript file. Modules accepts an array called “rules”. This is where you can use certain loaders for sass, es6 (babel), images etc.. Then at the end are plugins. This is where you can uglify your Javascript, extract your CSS into files and much more. At the end of the day, all your files will be running through Webpack. Giving you super powers, instead of writing old css and js.
SCSS responsive mixins for organization
Quick frontend tip when using sass/scss. Use the code block above as a mixin for your responsive design breakpoints. Then when you want to modify a property, you can “@include breakpoint(xs) { display: none; }”. This may increase file size of the compiled css version, but having this power makes your responsive workflow so much more intuitive.
Node build systems
The frontend ecosystem is ever expanding, but one thing is for sure. The importance of build systems for the modern day developer is necessary. These preprocessors are able to take multiple JavaScript files, bundle them, minify, lint etc… while processing your sass, less or postcss at the same time 💣. Some of the popular build systems are Webpack, Gulp, Grunt & Brunch.
