1% better

Coding for designers

By June 30, 2020No Comments

When I was a pre-teen, I had the best Myspace profile.

I used code to hide my list of friends and overlay the ugly default profile with a custom one. I’d download some recent album off of LimeWire and feeling inspired would change the code to suit my mood. I wish I could show you my Picasso-level outcome.

I was able to do this because I’ve taught myself how to code. HTML and CSS opened my mind’s eye to the possibilities of digital design. From Myspace to GeoCities (remember those?) to my own domain, I dabbled in front-end coding for many years. Little did I know this hobby would into a full-fledged career.

It’s important to note I still use the skills I’ve picked up back in the early 2000s. For example, this WordPress-powered website is using a theme I’ve customized. Whenever I run into “design bugs” I troubleshoot them myself. Sometimes I add extra elements by rolling up my sleeves and narrowing in on the code.

Add and check, adjust and check, fix and check, so on for hours…

There are rare occasions I curse at my browser for not producing exactly what I want. That’s the time I force myself to step back and take a walk away from my screen.

I’ve been lucky to work closely with developers throughout my career. Understanding programming allows for better communication.

My self-taught front-end skills are limited and dusty, so I recently took a refresher course at General Assembly.

Anyone who has lost track of time when using a computer knows the propensity to dream, the urge to make dreams come true and the tendency to miss lunch.

Sir Tim Berners-LeeInventor of the World Wide Web
Sir Tim Berners-Lee

A quick history of internet

Sir Tim Berners-Lee, the father of the modern internet, is a British engineer and computer scientist who invented the World Wide Web and constructed how the world uses the internet today.

In March 1989, Tim laid out his vision for what would become the web in a document called “Information Management: A Proposal”. Believe it or not, this was his boss’ response to Sir Tim Berners-Lee’s vision for the web:

“Vague but exciting.”

In 1990, he wrote fundamental technologies of the web:

  • HTML: HyperText Markup Language. The markup (formatting) language for the web
  • URI: Uniform Resource Identifier. A kind of “address” which is unique and used to identify each resource on the web. Within a URI is an URL which is Uniform Resource Locator
  • HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the web

Development time

The process is not dissimilar to the design process:

Front-End

  • Graphics and images
  • UI/UX development
  • Security
  • UI layouts

Back-End

  • Feature development (programming)
  • Security
  • Architecture and design
  • CI pipeline development
  • Database administration

Coding is an iterative process – just like the design process. Heyo!

  • Are the requirements stable?
  • Are there caveats?
  • Are goals well defined?
  • What is the testing plan (unit & end to end)?
  • What is the team size? More is not better nor faster, it’s not ideal to have too many cooks in the kitchen.

HTML is the bones

HTML – HyperText Markup Language

Defines the content and the structure of the webpage (aka document). This is the standard markup language for designing and creating websites.

  • Opening and closing tags
<image></image>
  • Child and parent relationship – The parent design element influences the elements within it.

HTML: head

  • The brain of the document
  • Its properties are not part of the physical layout of the page
  • JavaScript and CSS files are references here
  • It also contains the document’s title. On the current page, it’s “1% Better: programming for designers”

HTML: body

  • Represents the area from top left to the bottom right corner of the page
  • Almost everything that happens on a webpage
  • Holds the physical structure of the page

HTML: tags 

  • Using code helps people identify what type of information it is and how it’s displayed
  • Elements have closing tags: this means they hold content
<p>Blah blah</p>
  • Some elements don’t have closing tags
    • Tags such as “img” do not enclose any content so they do not need an opening and closing tags.
<img src="image.jpg">

HTML: image path

  • File-path is the relative location of a file. For example: if image.png is in the same folder as index.html, the code would be
<img src=”image.png”>
    • If it was in a folder named /files, then the path would be
<img src=”files/image.png”>
  • Excellent organization is crucial
    • Ensures you avoid broken links

HTML: anchors aka link

  • Certain attributes may only have use for specific tags
<a href="url.com">Click me</a>

HTML: hierarchy

2 types of hierarchy: block and inline.

  • Block elements structure the main parts of a page, by dividing your content into coherent blocks.
  • Inline elements differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or a few words.

CSS is the skin

CSS – Cascading Style Sheets

Rules that specify how elements appear on a page. Without CSS websites would look dull.

  • Property is the quality you want to change
    • Pre-defined terms that will change the way elements look and behave
  • Value is the amount of change
    • Properties can have either a specific value or take a broad range of values
  • Declaration – each property-value pair forms a declaration
  • Rules cascade down (get it?)

3 ways to use CSS

  • external – reference to a CSS file in Head
  • internal – includes styling in the HTML
  • inline – included styling within each element

CSS: .classes

  • Custom rules can be written using the class selector. To apply a class, we add a class attribute to our HTML element.
  • Class selection uses dot notation – “.”

CSS: #id

  • Custom rules for only one element.
  • Id selection uses hashtags – “#”
HTML
<div id="aloha"> <.....> </div>

<div class="hawaii"> <.....> </div>

CSS

#aloha { background-color: #ccc; padding: 20px } 
.hawaii { color: blue; font-weight: bold; }

CSS Box model

  • Describes the HTML object structure.
  • Defines the spacing on a webpage
  • The paradigm for how to describe things on the page

JavaScript is the nervous system

JS – the brains behind your web app. Javascript allows you to write small scripts to make your apps dynamic and interactive. It connects it all together.

  • Allows the site to interact with a server using text. It also allows the load of different languages.
  • It interprets your commands and responses to them.
  • This is where you start understanding how programs work.

API – Application Programming Interface

  • API is an agreed-upon way of getting information from one server to another.
  • Routines, protocols, and tools which specify how programs interact.
  • When we use APIs, we use them to route requests to a pre-defined set of responses.

They come in distinct types: get, post, put, patch, delete

  • get – Read – retrieves information
  • post – Create – creates new resources
  • put – Receive – receives capabilities
  • patch – Update/Modify – changes capabilities
  • delete – delete – deletes information

Function syntax – functions have keywords, name, argument(s), and a block. After defining a function, we must call it to execute its commands.

function sendMessage (msg) {
alert ("New message: " + msg);
}
SendMessage ("my message")

Argument
An argument is a piece of information that you give to a function. In this example, the “hello world” line is an argument.

console.log(“hello world”)

Defining functions

  • keyword – function
  • name – send message
  • argument – msg

Naming functions

sendMessage (“Hello world!”)

Build-in functions

console.log (“Hello world!”)
alert (“This is an alert.”)
confirm (“Click OK if this is correct”)
prompt (“Enter your name”)

JS: Data types

There are many types of data.

  • Numbers include all integers (positive and negative) it doesn’t include any decimals
  • Variables – objects that temporarily stores data to memory. Their names and arbitrary and the values can be any object.
  • Loops – allow us to iterate on objects repeatedly until it meets a certain condition.

Terminology

Stack – a bundle of software that comprises the back-end – everything from the operating system and web servers to APIs and programming framework. Basically, it’s the language that a website runs on.

Front end

  • HTML – webpages – bones
  • CSS – design – skin
  • Javascript and framework- dynamic scripts – the nervous system

Back end

  • App server – app logic – location of information
  • Web server – maintains files and content of the website
  • Database – organized way to store information – zip codes, first names

& others

  • Document – synonyms of webpage
  • Continuous integration – the practice of implementing minor changes and testing code to upkeep version control.
  • QA -responsible for identifying any faults in the process and correcting those weaknesses to ensure continual improvement,
  • Future-proofing – making sure you can easily add code or features without breaking existing functionality
  • Console Interpreter –
  • Multi-paradigm –  a programming language that is equally well-suited in more than one programming paradigm.
  • JS objects – containers for named values called properties or methods.

FAQ

What is the difference between webpages & web apps? 

The distinction is that a web app interacts with the user by manipulating data, but a website could be as simple as a single picture or line of text.

Why do pages allow you to inspect the code and alter it? What is the benefit?

At its core, a browser (Chrome, Firefox, etc…) is software that takes HTML and displays it as the website you see. When you open the inspector, you are looking at an HTML document that represents the website you are inspecting. This is useful if you are developing a website as you can look at what the browser is rendering and identify problems.

How is a web developer different from a software engineer/developer? 

All web developers are software developers, but there are other types of software developers.

What is REST API?

REST is an architecture style that helps standardize how we write APIs. It is a set of rules that makes sure anybody who wants to use our API knows what functions they can call.

What is a full-stack developer?

A Full-Stack developer writes both Front-End and Back-End code. In most junior-level jobs this dev will act as both a back-end and a front-end developer, which industry calls a Full-Stack developer.

…about as clear as mud.