Tale of a designer trying to code
My tricks to write something that works with HTML, CSS & Javascript.
It’s a cold evening in Amsterdam and our class is informed that our last project is going to be about coding. I know that I have some sort of background but I get kind of afraid, as means coding for me “stuff that doesn’t work”.
However, coding follows a process and surely there is a way to make it work.
Why do designers need to know how to code?
Design is not enough
Most of the time we create awesome looking designs and new innovative features. It’s easy when we focus on the user to create something unique.
The problems come once we need to build it. Is our new design or feature even doable?
What would be the cost and how long would it take to produce?
Some companies like “Space X” have limitless resources and expect their designers and engineer to do the impossible.
But that’s not the case in most company. As a designer, you will be limited by your infrastructure and by the resources that could be invested in the new project.
A designer needs to know how to code in order to understand what is within reach and what is almost impossible to build.
Research and Design are expensive
Small businesses always go for a developer first, because they need the product to get built.
This means that the designer comes after the problems are baked into the code. Your mission is most likely to be “fix” before it can become “improve & and expand”.
A designer needs to understand how the code infrastructure was written in order to identify where changes can be made.
Understand the basics of coding
Every coding language comes from Mathematics
x = (a - b)*(a + b)The first computer was built by a Mathematician and Linguistics scientists and the first mission of the was to decrypt a message.
Since then, all of what a computer has ever done is to receive a text, doing mathematics with it and delivering a new text.
Every programing language is coming from mathematic thinking and uses formula made in advance for us to use.
For example if we want to define a border-radius, we will call in our language a function and indicate a value, but we don’t have to specify how each pixel on the screen will have to behave due to that value.
A formula as already been written for us.
A website is like a puzzle with layers
A website is composed of blocks, they come in many differentiating names (div, section, header, articles, …etc… ) but they all do the same thing:
They indicate the presence of a group of elements.
The idea is that you are going to build something layers upon layers, blocks inside of blocks and inside of some blocks, you will have elements (like images, text, title, buttons, …etc…).
Steps to build any web project
Pre staging
Preparation is the key to any good coding project if you made your design on Sketch a good start is to export it to Zeplin which will give you styling properties. Nowadays every prototyping tools (adobe Xd, Figma, invision, etc) have similar options.
Your second mission is to extract all the necessary images, place them on a specific folder and use a meaningful naming convention. When you will code you will only have access to the name to understand what the image is about.
Then it’s always nice to prepare a structure. The idea is to take a piece of paper and to name all the big blocks your website is going to use.
Finally, you can open your code editor (I would recommend visual studio code but you can use CodePen or even GitHub) to create your pages. A web project will have an HTML file (index.html), a stylesheet (style.css) and a javascript page (script.js).
Build a structure when you are writing the mainframe
Your Mainframe (HTML) is going to be the core of your website, it has to contain the block structure that we talked about before but it must also have “tags” to be able to call the other pages of the code.
They are 2 types of “tags” that you can use:
_class: to identify multiple elements that will look and behave the same way.
_id: to identify a specific element that will have a unique look or behaviour.
Try to use a meaningful name for your tags as you will have to refer back to them.
For example:
If your structure is a text inside 3 blocks, your names should be:
“parent”
— “parent-child”
____”parent-child-baby”
______”parent-child-baby-text”Doing this will help you define what and where you are changing things.
Create your design and functionality by calling your structure
Your stylesheet in CSS and your script in javascript are not going to create new elements on your website. But they will call your HTML elements to give them new properties.
In both Java and CSS, you can call you elements by they global name (h1, p, section), class name (that you gave to a group of similar elements) or the id name (that you gave to a specific object)
Note, technically you are not required to create a separate page for your style and functions. Everything can be written in HTML, but doing so will make your code messy and hard to read.
Always do “get help”
Coding is hard, there are hundreds of different things that you can do and many different ways to write something that will create the same result.
Some of the best website to find answers are :
_W3School
_CSS-Tricks
_Stack-Overflow
Google is always your best friend.
Write a simple landing page with HTML & CSS
The design
In this challenge, we had a sketch template to customize and then try to make it in code.
You can download my template here if you would like to do the same challenge and compare your code to mine.
For the purpose a simplicity in this article, I will share the code of a simple webpage that you can copy and read in your editor.
This easy project has the basics of what you would need to do to create any webpage.
Create a structure on your HTML file
<!-- This is our HTML code --><!DOCTYPE html>
<html lang="en">
<head><!-- this is some general info to tell what is the type of our page -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medium Demo</title><!-- this is the link with your stylesheet page where you will write the design -->
<link rel="stylesheet" href="style.css"/>
</head><body><!-- this is where you can write your main HTML code -->
<section class="our-content"><!-- this is going to be our place holder-->
<img src="https://placekitten.com/300/300" alt="this is our image" id="image"><h1 id="title">I Love : </h1>
<p id="text"> Kittens</p>
<!-- h1 are titles and p are paragraphs for our text --></section><!-- this is the link to your javascript page where you will write your functions -->
<script src="app.js"></script>
</body>
</html>
3 things are happening in this HTML code:
_We have set a <head> that define our page as standard html5 code.
_We have 2 links to connect to our external pages:
<link rel=”stylesheet” href=”style.css”/> for the CSS &
<script src=”app.js”></script> for the javascript
_We have a body structure with one section called “our-content”, this section contains an image identified as “image”, a tittle id “title” and a paragraph id “text”.
Style according to your calling elements
/* this is our stylesheet where we write the design *//* let's first define some default values */
:root{
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background-color: #F5F7F8;
}/* let's center our content */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}/* let's align the content */
.our-content{
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
}/* style the image */
.our-content img{
width: 30%;
border-radius: 300px;
margin: 10%;
}/* style the text */
h1, p{
font-size: 30px;
font-weight: bold;
padding-right: 10px;
}
The best way to write a stylesheet in CSS is first to style global elements like the root and body, and then to go to each section and elements inside of them.
Check my code and the resources I used for this project
You can see the whole KYLO REN website and his code with Codepen: https://codepen.io/Jeremie_R/pen/BaNmpbM
The best place to learn about HTML is :
https://www.w3schools.com/html/
And the best way to get a great CSS is:
https://css-tricks.com/
Create a web app with Javascript and API integration
The concept
After I finished with my school challenge I wanted to do something for myself. I have this long term project of creating my own weather app.
I have already made a design in the past but needed to make it work.
The pre-staging for this project was to follow the documentation provided by the weather API we will use: https://darksky.net/dev/docs
For the icons, the API will return a plain text as follow :clear-day, clear-night, rain, snow, sleet, wind, fog, cloudy, partly-cloudy-day, or partly-cloudy-night.
I had to name my weather icons in the same fashion and host them on an online folder:
https://sandbox.roberrini.com/wp-content/uploads/2020/03/
If you code your own weather app also use this folder to grab your icons I’m happy to share them.
Finally, in order to use this API, you need to create an account and get your own API KEY. The API is free but limited at 10 000 calls so I would highly appreciate if you create your own instead of using mine.
#UPDATE#
On March 31, APPLE has purchased DARKSKY and immediately announced the end of the API. You will unfortunately not be able to create your own key and this code will cease to work by the end of 2021.Thank’s to APPLE for making information harder to access.
#
Let's continue on the same code
The way I worked is that I used Class for the css styling and id for the javascript function, it is not a best practice but it is easier for my brain and works well.Create a Javascript app that calls weather information and overwrite our HTML elements.
//this is our javascript code//window.addEventListener('load', ()=>{
//we will define variable for the location
let long;
let lat;if(navigator.geolocation){//let's get your location thanks to the navigator//
navigator.geolocation.getCurrentPosition(position => {
long = position.coords.longitude;
lat = position.coords.latitude;//we need to bypass some proxy issue to use ou api //
const proxy = 'https://cors-anywhere.herokuapp.com/';
fetch(proxy)//we will need a free api key, please get your own on https://darksky.net/dev //
let apiKey = "95d282b8e8345a1c7fb56df9f6a5d95b"//this is our api request > notice the apiKey, lat, long, & unit at the end of the argument, they are giving instruction.//
const api = proxy +'https://api.darksky.net/forecast/' + apiKey + '/' + lat +','+ long + '?units=auto';//let's write our actions//
fetch(api)
.then(response => {//this is just to transform or response to text.//
return response.json();
}).then(data => {
//this will display all of the info in your browser console, you can access by cliclking inspect on your page.
console.log(data);//Let write our awesome function !!! ////you can change your images like so: //
document.getElementById('image').src = 'https://sandbox.roberrini.com/wp-content/uploads/2020/03/'+ data.currently.icon +'.svg';//lets quiclky change the image border radius if we loaded something //
document.getElementById('image').style.borderRadius = 0;//you can change your text like so: //
document.getElementById('title').textContent = data.timezone + ':';document.getElementById('text').textContent = data.currently.temperature + '°';})
})//this is just in case of issues //
}else { document.getElementById('title').textContent = "we couldn't find you";}
})
3 steps are happening in this javascript:
_We are getting the location from the browser and defining our API request with the key and information received.
_Then we use the “fetch — then” system to obtain the data.
_Finaly, we use instructions that call an element:
document.getElementById(‘name’)
we define the type of modification:
.textContent (change the text)
.src (change image source)
.style.borderRadius (change the border-radius style)
and we assign a value to it:
eg: = data.timezone
Check my code and the resources I used for this project
You can see the whole weather app I made on Codepen: https://codepen.io/Jeremie_R/pen/VwLyWBb
You can also use the app: Okay Weather App
I followed this awesome video about how to make a weather app:
https://www.youtube.com/watch?v=wPElVpR1rwA
And I found the best javascript answers in:
https://stackoverflow.com/
When your code stops working…
You might have mistakes
The most common issue comes when you have a typo in your names tags, you are trying to give instruction but the mainframe is not linked to it.
In javascript, if a function is not closed correctly the entire script might refuse to work.
An error is easy to make and something that breaks at one part of the code might have an implication on the whole page, the key is to take time to read everything.
You can get back to your browser console inspector, the console often contains information about where it stopped reading the code because of an issue.
You can also use the console log to ask your code to provide you with a piece of information. In Javascript: console.log("information");
Sometimes “get help” doesn’t work
Every Programmation languages contain formulas already written for us.
Behind a language, there is a group of developer that define how the pre-made formulas will behave and how they should be used. And the language will evolve over time, what is best practice today, will be considered old school and become obsolete in the future.
You will find obsolete information on the internet, snippets of code that no longer work and read debates about what should be the best way to do something.
Don’t feel frustrated if your code doesn't work, is probably due to a change in the rule book. To fix it to check your console error code or to search about the function you are trying to use with the google keywords “not working”.
Congratulation
If you followed the code in this article and it still works, you are now a developer. yeah!
You will find in your console log an ‘object’ that contains all of the weather information you can get from the API. You can use them to tweak your code and ad results to your webpage.
Let me know if you’ve made something new out of this article, I would love to hear about it.
