Where Does SQL Fit Into My Project?

SQL in laymen terms is a language we use to save data permanently with. To better understand this so it makes a bit more sense, let me further explain a little more. You usually have a project that usually consists of a front-end maybe written with HTML/CSS/JavaScript and then you usually have a back-end like NodeJS or Rails. Where SQL comes in, is that your back-end usually through an ORM (Object Relational Mapping), like Mongoose or Active Record, connects to your database of stored data, where this data is created using SQL. This is how any software remembers your username and password so that you can log back in again at a later time.

CRUD

The basic operations of SQL is CRUD, which is an acronym for Create, Read, Update, Delete. You’re mostly always either creating, reading, updating or deleting a table inside you database. Usually you have one database that you connect to and in that database you create tables that you store data in through records. If you’ve worked on Excel sheets, then imagine a database being the Excel file itself, the tables you create in your database being the table pages in your Excel sheet file and a record is the row in your Excel sheet page.

To create a new database for your project run:

CREATE DATABASE name_of_database;

For this example we’ll create a database named project

CREATE DATABASE project;

Now we’ll have to state that we’ll use the database name project:

USE project

Create

Now that we have created and are using a database we namedproject, we need to start adding some tables to it so we can save some records to it.

This will create a new table inside of your database.

CREATE TABLE table_name (
  table_name_id INT AUTO_INCREMENT PRIMARY KEY,
  column_name VARCHAR(20)
);

For our example, let’s create a table named users in our database. The following line of code should help us accomplish this:

CREATE TABLE users (
  user_id INT AUTO_INCREMENT PRIMARY KEY, 
  username VARCHAR(20),
  age INT
);

Now that we have a table, we can now save some type of data, which in SQL we call a record. The way you would insert a record is through the following:

INSERT INTO table_name (column1, column2, ...) VALUES (value1, value2, ...);

So let insert two records to our table, the way we would do this is by:

INSERT INTO users (username, age) VALUES ('john', 34);
INSERT INTO users (username, age) VALUES ('mary', 18);

Read

Usually once you have a table, you’d like to retrieve information from it. The way you’d retrieve all records from a table is by the following:

SELECT * FROM table_name;

Let’s retrieve everything from our users table:

SELECT * FROM users;

We can then specify so that we don’t get everything by using the WHERE clause in SQL.

SELECT * FROM table_name WHERE column = value;

So if we’re to get john in from our table users, we’d do something like this.

SELECT * FROM users WHERE username = 'john';

Update

Update is for when things have changed or we’ve made a mistake and like for that record to reflect that.

UPDATE table_name 
SET column = value, column1 = value1, ...
WHERE another_column = another_value;

So lets say mary in our database has gotten one year older and we’d like to update that

UPDATE users
SET age = 19
WHERE username = 'mary';

Delete

Delete is pretty self explanatory, but it allows us to delete records that we no longer need or remove tables we no longer use.

DELETE FROM table_name
WHERE column = value;

Let’s say john decided that he no longer wants to be apart of our software and would like to delete himself from our product.

DELETE FROM users
WHERE username = 'john';

Since we’re almost done with our SQL Primer Pt. 1, lets remove our table from our database and then also DROP our database.

To remove our table

DROP TABLE table_name;

For us it’ll be

DROP TABLE users;

And now to end it, lets drop our no longer needed database itself.

DROP DATABASE database_name;

For us.

DROP DATABASE project;

Hope you guys liked that primer and had a good time going through it. Follow me for Pt. 2 ! I’ll go through JOIN and database relationships!

Thanks for reading! Please share and recommend to other interested readers!

Check out my portfolio http://mohammedchisti.com

SQL Primer — Basic Operations was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

I love designing websites and I’ve designed plenty of sites to start to realize there are certain CSS tricks I always keep on my master sheet to make my life easier. A lot of the time, if I’m building my CSS from scratch, they’re always a copy and paste. I’m not a pro by any means, so take my advice with a grain of salt.

Defaults

In my index.css or master.css I usually have the following below.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: <Font of Your Choice>;
}

html,
body {
  width: 100%;
  height: 100%;
}

Reason:

Everything has their own padding and margin size and by simply setting your own padding and margin with box-sizing set to border-box, everything manually will allow you to perfectly align items better. Setting width & height of html & body to 100% will allow you to set a background wallpaper, without it seeming like a website from when the internet first came out.

Classes

Also in my index.css or master.css are these classes. They really help when I need some obscure random spacing or size.

Space

.space-small {
  heigth: 3em;
}

.space-medium {
  height: 5em;
}

.space-large {
  height: 8em;
}

Reason:

There are times when I need some space between divs, but it’s a unique situation and padding isn’t going to cut it.

Icon

.icon-small {
  width: 3em;
  height: 3em;
}

.icon-medium {
  width: 5em;
  height: 5em;
}

.icon-large {
  width: 8em;
  height: 8em;
}

Reason:

Sometimes you make a call from an API and get returned images that are random sizes. So you you just want them all to be a specific size, you can just add these into it and you’ll have them all a certain length.

Align

.left {
  float: left;
}

.right {
  float: right;
}

.center {
  align-text: center;
  margin-left: auto;
  margin-right: auto;
}

Reason:

Sometimes you just need a quick way to set something to the left, right or center of the page and these come in handy time to time.

So these are some of my tips and tricks, of course it’s also created to encourage you guys to not be afraid to build your own CSS classes that you really helpful for when you code. I hope you guys liked it!

I’ve had my fair share of trouble implementing Google Maps in ReactJs using a npm package. Hopefully this article helps you avoid the troubles I’ve gone through.

Finding the Best Package

The trouble was mostly finding the best package with good documentation to follow through so that I can get my Google Maps on my page and going. The package I found best was google-map-react by istarkov.

Google Map Example Project

What was really nice of him to also do, was to also create a React.Js example project implementing google-map-react. This way you can have real world application to see an example of.

Quick Start

He does a pretty good job getting you quickly started through his documentation, but I threw in this example just in case you wanted to copy and paste it immediately.

While in your current React.JS directory, run the following lines of code in your terminal.

npm i -S google-map-react

Then create a component, I’m going to call mine map.js. Copy and paste the following lines of code to that file.

import React, { Component } from 'react'
import GoogleMapReact from 'google-map-react'

const AnyReactComponent = ({ text }) => <div>{ text }</div>;

export default class Map extends Component {
  static defaultProps = {
    center: { lat: 40.7446790, lng: -73.9485420 },
    zoom: 11
  }

render() {
    return (
      <div className='google-map'>
        <GoogleMapReact
          defaultCenter={ this.props.center }
          defaultZoom={ this.props.zoom }>
          <AnyReactComponent
            lat={ 40.7473310 }
            lng={ -73.8517440 }
            text={ 'Where's Waldo?' }
          />
        </GoogleMapReact>
      </div>
    )
  }
}

Now you can just import this file onto any other component/container file you have and it should display Google’s Map in your project! For more understanding of Google Maps, I’d recommend reading the google-map-react GitHub repo with the Google Maps API documentation while using the project as a reference.

Hope this helped!

Implement Google Maps in ReactJs was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

This kind of came up, when I was getting an interview. What is Execution Context in JavaScript and I pretty much blanked out. I was told to make an educated guess and I said “Scope? Bind?”. That was terrible. Now I’m going to figure it out for myself.

I don’t completely know it in depth, but in laymen terms, Execution Context in JavaScript is pretty much what it sounds like, which it’s the environment in which the code is executed in. To be more specific, there are two types of execution context, first one is global and the second one is functional. Global context can be accessed from anywhere in the program while functional context can be accessed by the function itself and inner functions of it.

// Global Context everything in the file.

// Function Context 
function bar() {
    console.log("Foo Bar")
}

// Functional Context
function foo() {
  bar()
}

Execution Context Stack

Something that you’ll have to understand along to the Execution Context is the Execution Context Stack. Execution Context Stack is created by from the order of which things are called. So lets take our code and call Foo().

// Global Context everything in the file.

// Function Context 
function bar() {
    console.log("Foo Bar")
}

// Functional Context
function foo() {
  bar()
}

// Run
Foo()

So if I were to call Foo() now, the way the code would be executed is in the following order:

Hope fully these visuals help on understanding what Execution Context is and how the stack is created.

Thanks for reading! Please share and recommend to other interested readers!

Check out my portfolio http://mohammedchisti.com

Everyone who’s a web developer should understand how to make their website responsive to even the smallest extent. It’s expected that everything that is currently digitally available will be mobile friendly in some possible way or it seems like your site and skills are somewhat out dated. So I made a quick start guide on how to make your site minimally responsive by adding only two things to your CSS file.

Fluid Design

The first thing to realize about Responsive design is to make sure your website is fluid. What that means is that your website components should scale with your screen size. The way you start to make your site fluid, is by using percentages for your height and width instead of static pixel sizes. This way when someone resizes their browser window, your html tags will shrink or expand accordingly instead of breaking the page.

The following will scale based on the percentage of your screen.

div {
  width: 25%;
  height: 50%;
}

@media Breakpoints

The second thing you want to add to your arsenal is to create @media breakpoints in your CSS file. This will cause your CSS file to use different CSS styles based on the screen size of the device its on.

However for you to first be able to use them, make sure you add the following meta tag in between your <head></head> tags in all you .html files.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The following line of code is a @media breakpoint:

@media screen and (max-width: 480px) { 
  /* CSS Code for when the screen size is 480px Screen size */
}

That line will cause every screen at 480px width and below to apply the CSS code between the curly brackets to your website. This way if your website is on a mobile device, which is usually less then 480px wide, will apply those css styles to itself.

Just to make sure you understand how to use them I’ll give an example. The following lines of code will cause all div to be blue and will then they will turn green as soon as it’s window size is below 780px.

div {
  width: 300px;
  height: 300px;
  background-color: blue;
}

/* MEDIA QUERIES */

@media screen and (max-width: 780px) {
  /* tablet */
  div {
    background-color: green;
  }
}

You can have multiple breakpoints by simply adding multiple ones like so:

@media screen and (max-width: 1020px) { /* Large Desktop */ }

@media screen and (max-width: 780px) { /* tablet */ }

@media screen and (max-width: 480px) { /* mobile */ }

Hope these tricks help greatly on your journey to a much more responsive website!

Thanks for reading! Please share and recommend to other interested readers!

Check out my portfolio http://mohammedchisti.com

Occasionally, I’d hear about linters, but never gave it much attention. I’d rationalize, I’m coding pretty well without a linter already, why bloat my coding experience?

Linters save time for you, by debugging your code before you even run your application. Additionally it makes sure you and your team are all following clean code practices. ESLint is quick and easy to setup and the benefits are too great to ignore.

Imagine.

You had a misspelled variable named people and you run your code, then your projects breaks, you go on console, console says some arbitrary line number like error on line 43, then you go to line 43, see that you passed a variable named purple instead of people. You probably wasted 3 minutes, where your linter would’ve immediately caught it, Error: No variable named purple, you fix it, you move on.

Installing Atom Packages

For you to be able to use ESLint you have to make sure you have two packages installed in Atom.

Let’s go to Atom’s settings, which you can get to by simply pressing ⌘+, or Atom > Preferences on a Mac and by pressing ctrl+, or File > Settings on Windows. Once your at the settings tab, click on Install and you should see a search bar to search for package names.

Type the title of these two packages and install both.

Setup ESLint

All you have to do now is create a new file and name it .eslintrc at the root of your project directory with ESlint rules. These rules can be created yourself or you can also npm install rules that others have created to quickly get started.

For this example, we’ll use a set of rules that Google has created and you can install it through the following command.

$ npm install --save-dev eslint eslint-config-google

Afterwards, you’ll need to add the following to your .erlintrc file.

{
    “extends”: “eslint-config-google”
}

Try It

If everything was done correctly, you can try the following code below and eslint should automatically give you an error. Once you correct it by having a space after the closing parentheses and opening brace, it should disappear on its own.

If you don’t see any errors show up, try quitting Atom and starting it again.

Some Help from ESLint to Create Your Own Rules

The guys from ESLint let me know, they can also help you get started quickly with your own rules.

The following line will install ESLint globally.

$ npm i -g eslint

Then this line will prompt you with some questions about your coding preferences so that you can use your own set of rules.

$ eslint --init

Thanks for reading! Please share and recommend to other interested readers!

Check out my portfolio http://mohammedchisti.com

What is ESLint? How do I set it up on Atom? was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

Configure Github Pages to use a Custom Domain

First, go to your Github Page repo and click on Settings, then scroll down until you see Custom Domain. In the input box, type the domain name you just bought to set your Github Page too, e.g. www.yourDomainName.com.

Lets return to the Code tab of your repo, you should now see a new file created, named CNAME.

If you don’t, then create a new file, name it CNAME, type www.yourDomainName.com in it, save and push it to your repo.

Configure Namecheap DNS Settings

Lets get your domain to point to your Github Pages server.

Go to Namecheap, click Domain List in the navigation bar, then click manage next to your domain url and then click Advanced DNS.

Now create the following records I have listed from the picture below, except replace seeyouspacecowboy.github.io with yourGithubUsername.github.io.

The Wait game

You’re all set and all you have to do is wait anywhere from 5–30 mins for it work.

Thanks for reading! Please share and recommend to other interested readers!

Check out my portfolio http://mohammedchisti.com. (Hosted on Github Pages and domain bought from Namecheap) :p

Custom Domain on Github Pages Tutorial Using Namecheap was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

Express + Node.Js is as simple as it seems.

We’ll create a directory for our project and then execute the following lines in terminal. ( The command code . is to open the directory in Visual Studios, but if you use another text editor, you can omit or replace it)

mkdir node-express-intro

then run the following in your terminal

cd node-express-intro
npm init -y && npm i -S express
touch index.js
code .

Copy the following code and paste it into your index.js file. Then save.

const express = require('express')

const app = express()

app.get('/', (req, res) => {
    res.send('Express works!')
})

app.listen(3000)

Now run the following to your terminal :

node index.js

If you go to your browser and type localhost:3000 you should get the message Express works! on your browser screen.

Here’s an amazing link that got me started on my path of Node + Express https://www.youtube.com/watch?v=L5Nle1VXYnw&t=649s.

If you’re like me, you dread TDD because you it kind of feels like more work then it needs to be, but we all know that TDD can make sure you don’t forget what your project guidelines are if their put in place. If I wanted my project to have a single button on the screen and then ended up 3 buttons instead, test code I’ve written will remind me that I’ve got 2 more buttons then I had originally hoped for. Aside from when you’re solo, this is extremely beneficial to your team who will also be working on the project with you. If you’ve been working on a React project then I’ll show you how you can make it a TDD ready project.

Step 1

If you’ve been using npm’s create-react-app then you’ve already got Jest installed on your project, Step 1' s already finished!

Step 2

Go to your scripts on your package.js file and type/edit the following :

"scripts": {
    ...

    "test": "jest"

    ...
}

Step 3

Create a folder in your src folder called __test__. It’s usually convention to have your test folder named test followed after double underscore dashes and then also followed after with double underscore dashes. With in the __test__ folder add a file named test.js in it.

Step 4

Copy and paste the following code to your test.js file. Replace Foo with any component you have in your folder:

import React from 'react';

import Foo from '../components/Foo';

describe('<Foo />', () => {
  it('Some possible tests', () => {});
});

Step 5

Run the following line in your terminal :

$ npm run test

Finished!

You should see a test that was complete in your terminal. If want to see some better examples of TDD, they checkout Airbnb’s examples here. Be sure to npm i any libraries like enzyme to your project.

I’ve usually used frameworks for CSS and didn’t really worry too much about having SCSS or SASS support for my React projects, but on a recent project of mine, I’ve decided that I’m going to build my own CSS framework and grid for myself, since I wanted some of my own tweaking flexibility. While building my own CSS framework, I’ve had so many redundancies in my CSS that I knew it was time that I just had to port to SCSS.

Getting Started

The way we’re going to support SCSS is sort of how Webpack picks up our ES6 Javascript using Babel to recreate regular Javascript. We’ll be taking our SCSS files and then recreate regular CSS files that our index.html can read.

The way my project tree is structured is the following :

project-dir
├── .git
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── stylesheets 
│   │   └── index.css   
│   └── index.html
└── src
    ├── components
    ├── App.js
    └── index.js

And I hope you use it as a reference for this blog. We’ll create a new folder for our SCSS files so that their separate from the CSS folder when their built. Let’s create a new index.scss file in our new folder with the following :

$ mkdir public/scss-stylesheets
$ touch public/scss-stylesheets/index.scss 

After your tree should now look like this :

project-dir
├── .git
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── scss-stylesheets
│   │   └── index.scss   
│   ├── stylesheets 
│   │   └── index.css   
│   └── index.html
└── src
    ├── components
    ├── App.js
    └── index.js

You’ll also want to install the following npm package:

$ npm i --save-dev node-sass

Then in your package.json file located in your project root directory add the following two lines to scripts:

"script": {
    "build-css": "node-sass public/scss-stylesheets -o public/stylesheets",
    "watch-css": "npm run build-css && node-sass public/scss-stylesheets -o public/stylesheets --watch --recursive",
    ...
}

You can change entry path public/scss-stylesheets on both build-css and watch-css to any folder you prefer instead. Same holds true for the output path public/stylesheets for the code above. The build-css let you build the SCSS files to CSS files once, but if you want your project do this while you code, you run watch-css and it’ll reload as you change you SCSS file. You could try this with the following :

$ npm run watch-css

Now you might be thinking we’re already watching our react project when we run npm start and we’d have to then also watch SCSS with npm run watch-css. A bit of an annoyance, so why don’t we fix that bit too, so that SCSS is also watched when npm start is ran. We’re going to need the following package to be installed :

$ npm install --save-dev npm-run-all

Then change the following lines from your package.json ( — are lines we’re getting rid of while + are lines we’re adding) :

"scripts": {
     "build-css": "node-sass src/ -o src/",
     "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build": "npm run build-css && react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

Once you’re done with it all you can now just write the following and you should have SCSS support on your project :

$ npm start

Bonus : .gitignore

So that we’re not adding redundant code to our git repo, we can add the following folder path to our .gitignore :

public/stylesheets

Hope you liked my posts! I’d love any feedback and follow me more posts.