I’ve been doing a lot of coding on the front-end lately; actually I’ve been doing so much that I might need to create a quick primer about it. If you’re just like me and need a refresher or are just getting the hang of SQL and need a quick reference, you might appreciate this one. For this primer, I’ll use MySQL syntax.

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…


Image for post
Image for post

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…


Image for post
Image for post

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…


Image for post
Image for post

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…


Image for post
Image for post

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…


Image for post
Image for post

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…


This is a quick tutorial for if you already have a Github page and want to change your domain url from username.github.io/repo to customDomain.com. If you haven't already, buy a domain from Namecheap, I recommend it since you usually pay around $1-10 for a year and the UI is beautiful.

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.

Image for post
Image for post

Lets return to the Code tab of your repo, you should now…


Image for post
Image for post

Express + Node.Js is extremely simple to start serving things with. At times, I even had to ask myself if I was even doing it right. Hopefully this is post is just as simple to understand.

I do want to say a disclaimer that this isn’t your final version since you’ll be adding folders likemodels and controllers, but its mostly to get you past the Node + Express intro hurdle. Another disclaimer, Node + Express is much more relatable to Sinatra then Rails.

Make sure you have the following installed.

$ npm i -g node express nodemon 

We’ll create a…


Image for post
Image for post

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…


Image for post
Image for post

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…

Mohammed Chisti

Archive blogs for myself, but written to be shared with everyone. Visit my personal site http://mohammedchisti.com

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