DEV Community: Iqra Masroor

5 Basic Design Concepts for Front-End Devs

Iqra Masroor — Tue, 10 Mar 2020 14:17:40 +0000

As a graphic designer, diving into coding is a bit daunting and scary. My coding process is a bit different. I like to start my project off with thinking of a client. By doing so, I can define the theme of my app and figuring out what functionality I can add. From there, I create a wireframe. The wireframe allows me to see the layout of my application. After that, I start coding. I start by building out the functionality and testing to see if it all works. Finally, I start coding the front end and use different CSS frameworks to design my applications.

Below are the concepts that I apply to my design.

1. Wireframes

The term means to sketch out the placements of buttons, images, and text with the most minimal amount of details. This allows you to visually think about how you want your final product to look. This also allows you to physically see how many pages or elements you might need to build into your code.

2. Composition

The composition is when elements are arranged to look a certain way. One concept that you should familiarize yourself with is the grid system. It is used with most of the CSS frameworks, like Bootstrap and Foundation. Have contrast with size and color to help information flow better. The best way to have your work look and feel meaningful is to have a focal point. check out this blog for a better understanding of composition.

3. Repetition

Repetition means to reuse the same or a similar image/or style throughout your design. For example, if you are using a round button on the form, that style of the round button should be consistent whenever a button appears on your page.

4. Color

Always have a color palette for your work. This helps your work look cohesive, well-thought-out, and just visually pleasant to look at. There are many tools/websites out there that generate a color palette. The one I usually reach for is color Mind or coolors.
Tip Use three colors at most. One primary color, one secondary color, and one accent color. Use the 60-30-10 rule. 60% should be your brand color, 30% should be your secondary color and 10% is the accent color.

5. Typography

Typography refers art of arranging type to be more legible, and pleasing to look at while conveying information. Some basic types of typographical elements you have seen in the code are:

<h1> This would be the largest text. </h1>
<h2> This would be the second largests text. </h2>
<strong> This would be bold. </strong>
<p> This would be the smallest size of font. </p>

This is where composition comes into play. First, you need an understanding of what the most important information you want the user to see is. For this information, you would most likely go for an h1 tag or maybe make the text bold to make it stand out from the rest.

Another way to use typography is by pairing two different font families together and create contrast. The most common pairing is a san-serif typeface paired with a serif font face. Below are some examples:

images taken from here
Example of San-serif pairs:

Example of a Serif pairing:

Hopefully, this has helped you become more aware of design in general. The more you practice the better you get. As for now check out these resources.

Here is a list of resources to check out:

Color Combos to avoid
BootStrap Templates Blog
CSS Grid guide MDN
Google Fonts

A Beginners Guide To DOM Manipulation

Iqra Masroor — Fri, 21 Feb 2020 17:02:24 +0000

DOM or Document Object Model is a representation of the web page or document, which can be modified with a scripting language such as JavaScript according to MDN.

It characterizes the DOM HTML document as a hierarchical tree structure and each element in the document tree is called a Node.

DOM nodes represent all components that make up a web page. For example, a head tag is considered to be a node. Most nodes have a starting tag and ending tag. Things can be nested inside these tags. The inner node is called a child node and the outer node is considered to be its parent node.

Some nodes are self-closing tags like the "img" tag. These are called void nodes and cannot be a parent node, meaning things can’t be nested within them.

Refer to the graph below.

Since 'document' is an object which has properties and attributes, it will have properties & methods. In order to access things within an object, we use selector and query methods to change the content displayed in the browser.

Element Selectors

document.getElementById("idName")

//This method only returns the one element by the specified ID. 

document.getElementByClass("className")
//This method returns all elements inside the whole document by the class you specified.

document.getElementById("someElement").getElementsByClassName("className")
//It works in all elements of the DOM, this will return all elements by the class you specify inside the element you want

Query Selectors

document.querySelector("#idName")

//This method takes one argument, which is a CSS selector & returns the first element that matches the selector. 

document.querySelectorAll(".className")

//Works similar to above; returns a node list collection of all matching elements.

Create an Element

APPEND

document.createElement("body")
//this method creats the element, but it does not show up on the page.

document.body.append(element)
//this method gets the element to appear on the page.

.INNERHTML

<h1 id="greetings"> HELLO </h1>

let element = document.querySelector("#greeting")
element.innerHTML = "Welcome"
//selects the h1 called greetings and changes HELLO to welcome

Changing Attributes

const element = document.querySelector(".container")

element.style.backgroundColor="#f0f0f0"
//changes the selected elements(in this case the container class) color to grey

Removing Elements

element.remove()
//removes a whole element from the page

This is just a basic overview of some of the methods used to manipulate the DOM.

Releasing Your Inner Unicorn

Iqra Masroor — Tue, 28 Jan 2020 22:33:12 +0000

Welcome, readers. Today, I will be showing you all how you can reach deep into your soul and find your rainbow.

Recently, a friend and I developed a simple CLI application that allows users to order coffee using Ruby. It performed simple CRUD actions that are able to take in user input. Let’s sidetrack for a second, CRUD stands for Create, Read, Update and Delete, and is the life of coding.

I was amazed at what we had created! Our application was able to perform all these methods (shoutout to Julz)! Now, what bothered me was how plain and boring it looked. Well, it is a CLI app what else would you expect, is what you might be thinking but coming from a design background: I did not like it at all. So I embarked on a journey to find a way to add a wow factor to our CLI app. After many quests, and article after article about the colorize gem, I read about a 'unicorn'. That's right: a unicorn - or a Ruby Gem called 'LOLCAT'.

Now what this gem does is that it prints out your whole terminal in a rainbow-like so:

If you want your terminal to spit out all its info in color simply follow the following steps:

Using LOLCAT directly in the command line.

Open up your terminal.
Type in 'gem install lolcat'.
Once installed simply add '| lolcat' after a command.
Now you can add a splash of color in your dark dark terminal life.

Using LOLCAT within a program.

Now if you want to use this within a program simply do the following:

First, create a method (or don't if you don't want to...).
Then, write fork{ } . This allows you to run the lolcat command in the program itself.
Finally, Within the { } add whichever file or method you want to call lolcat on. like so:

The code above created the following results:

I have mentioned fork but you might be asking yourself what the -a and -d stand for? In this specific piece of code, we wanted our title screen to be animated so -a stands for animate and -d stands for the duration. The title is now an animation that runs for 4 seconds.

This was able to help me add a few gems to the project (pun intended) and make it sparkle.

If you're still a bit iffy about how to lolcat feel free to check out their GitHub link here, but what helped me the most was this article written by Deka Ambia. I definitely recommend reading this once if you want to use lolcat within your program.

Thanks for reading!