Giftern Note #1 — Design vs Code (Well, Not Really)

So, this is my very long, overdue journal for my interning life at Giftpack.io.

Not really sure what to talk about for this first entry. So, let’s talk about design and code.

I am a full-stack designer, which means I can design from visual, web, motion to UI/UX. It essentially means I can design across multiple platform and give the end product to you in a nice, little knotted bow. But the problem with design, especially when it comes to visual design, is that it is very subjective. What is appealing to one might be tasteless to another.

A simple example, hmmm, let’s use pieces created by two of my favorite painter (Ok, this might be off topic, but stay with me and you’ll see!):

…But seriously, if you don’t want to read my talking on art just skip to the TL;DR section, and I’ll see you there :D

Untitled (Black On Grey), Mark Rothko, (1952)

This piece is called Untitled by Mark Rothko at around 1952. It is one of my many favorite pieces by Rothko. But I loved this one the most because of the strong resemblance it has to another one of my favorite painting called The Monk by the Sea by Caspar David Friedrich.

The Monk by the Sea, Caspar David Friedrich, (1808–1810)

How are these two similar to each other, you asked? Well, while it is true that Rothko’s painting might look just like a duo color paint on a canvas, but there’s so much more to his painting! Lemme go into art history analysis mode for you over here.

Even though both artists used the same color scheme in completely different styles, they managed to send the same message. In Rothko’s Untitled, viewers see the canvas was divided into two color blocks, black on top and grey on the bottom. There was no particular subject within the art. But viewer can sense the idea of calmness and loneliness by just staring at the painting. It was as if Rothko was trying to portray the message of solitude in his color fields. Comparing the piece to Friedrich’s The Monk by the Seashore. Again, the painting was divided into two sections, the sea and the land. In the painting, viewers see a lonely monk staring out to the open, black sea. The sky and the ocean took over so much of the canvas that the monk was barely a blimp. But the light in the sky showed a sense of enlightenment that the monk was searching for in the dark. Same with Rothko, the light in the top of the black color field and the scattered light reflecting off of the grey color field illuminate the viewer onto the path of enlightenment. In Friedrich’s painting, the monk was searching for a spiritual sense of the truth. His painting offered a sense of infinity. Rothko also achieved this message by the simple of use of color fields. His portrayal choices hinted in searching for the truth, all the while offering a sense of calmness and limitlessness. It was minimalist and beautiful.

TL;DR: Ahem, ok, the point is, art is very subjective. Design is also very subjective. What is good to one might be terrible to another (Paint blobs, ughhhhhh).

— -
But coding is different. Code is very different. Sure, there are good code and bad code. But as long as the code works, everybody is haha-hehe-yay!

So, I am transitioning from a full-stack designer to a front-end developer. That also means (dum, dum, dum) I need to code (*gulps*). Let’s talk about what I did this past few weeks, when I am slacking off in terms of writing this blog (ahem, har har har).

As a front-end developer intern at Giftpack.io, I am in the learning phase. I taught myself how to write HTML and CSS, when I was in my teens. But I am still honing my crafts in grad school. So, what’s better than putting my skills into actual work. Time to dive into the unknown world of front-end development…

To start, some useful resources that I was assigned while doing interning works (can I even talk about interning work on here, Archer? I feel like I am breaching some confidentiality code… Earth to Archer!) are:

1. Read You Dont Know JS
Seriously, if you want to learn more about the core mechanism of JavaScript, go read this. You can grab paperback copy or Kindle versions on Amazon. The link above gives you free access to all 6 copies in the series (There I just saved you like USD$54 bucks, lol).

By the way, a useful tool that I use when I am reading the online version on Github is a Chrome plugin called Super Simple Highlighter. What this free, little tool does is that when you select texts on the web page, you can choose to highlight it with its predefined colors or your custom color settings. This plugin will save all your markings on the webpage, so even when you reload you won’t lose any of your notes! It’s quite helpful for me, so here’s for you :)

2. CS50 Harvard
Ah, the oh so famous Harvard’s Intro to Computer Science course. Really great for building foundations in computer science. You can stream the whole 12 weeks for free on edx.org. Just click on the link in this title.

The problem set, at least for week 0, is actually math and logic problem set, which is quite interesting. I haven’t solve any math problems since college, lol.

3. Medium Journal
Yep, this is the intern journal that I am supposed to write weekly (shame on me, har har). Supposedly, writing this journal keeps us on track with what we learned, in terms of coding and everything else. Soooo, here’s my first journal. But I feel like I didn’t talk that much about code, more like I talked too much about paintings O.O”

— -

Hmmmm, ok for the seriousness of my journal and commitment to front-end development. I will talk about front-end coding here (Feel free to correct me anytime, you gurus out there!)

Let’s talk about website layouts!

A very, very long time ago, maybe back in like 2000s when web 1.0 just launched. Web design at that time was mainly off of HTML and minimal CSS. Designers focused more on practicality and less on design itself.

And, a way of layout for web design was born — table based web layout.

Yes, no one (hopefully, no one!) now a days uses table based web layout anymore. But in the 2000–2004, it was quite a thing!

<Table> was originally used as, well, tables. This practice was awful… But this markup tag gave designers so much more option structure to their designs (That means more design options!). A regular layout for a layout that looks like this:

An Example for a simple web layout

Would probably be written as…
<table>
<tr><td>Header</td></tr>
<tr><td>Aside</td><td>blah blah</td></tr>
<tr><td>Footer</td></tr>
</table>

Anyways, you get the idea. This practice now is not only frowned upon. This table doesn’t accommodate to phones, tablets, and all sort of screen devices we have. So, what do we propose for web layouts?

Let’s try divs!

Again, a layout similar to the image posted above can be written in many ways. With a bit of CSS settings, the div layout can be completed (Do you really want me to write that out…? *sniff sniff*)

To keep up with HTML5 standards, let’s look at two different ways to write a layout like that.

  1. We can use Flexbox, or
  2. We can use new HTML5 Element/Mark Up Tag

Flexbox
To read more about Flexbox, you can refer to a complete guide to Flexbox on CSS-Tricks, just click here!

Accoding to CSS Tricks, the Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

HTML5 Element
In my personal opinion (again, correct me, gurus!), nothing too different from your regular divs, except it has its own markup tags now. For example, we can simply build a layout with the HTML5 tags, like this:
<header>Header</header>
<aside><nav>Nav goes here</nav></aside>
<main>Main content goes here</main>
<footer>Footer goes here</footer>

With a bit of CSS defining and responsive CSS, we can put this layout to work (Just like magic! *wipes tear of proud-ness*)!

Oh, speaking of CSS, I did something stupid this past week. I overlooked a problem in the code (*face palm*)…

CSS is called cascading style sheets for a reason. Simply explained, CSS is like a waterfall. What is written last will be applied to the script, but obviously there are a lot of exceptions…
1. The more specific you are with a certain rule, the more specific css will be applied

Say you have a structure like this:
<div class=”cute”><h1>Title</h1></div>

Your stylesheet is something like:
h1 {
color: #000000;
}

.cute h1{
color: pink;
}

What will the color of h1 title be? Pink
Because it’s more specific!

But what if the web structure is the same, but the CSS is like this:
h1 {
color: #000000 !important;
}

.cute h1{
color: pink;
}

What will the color of h1 title be? #000000 or Black
Because it has !important set on the CSS

Anddddddd, long story short, while working on a responsiveness view (something I pride myself on, well guess not anymore, sigh), I missed the specific rule and wonder quite a while on why the responsiveness setting won’t apply…

Story/lesson of the day, <del>hire a better developer</del> AHEM, double check all CSS settings, especially when you’re coding with other developers! So, you don’t make the beginner mistake like me (*face palm again*)

Okie, I rambled on for too much. I’ll talk less in my next entry. Let this one be a combination of my weeks of missing journals haha. I’ll come back next week and bore you with some other things I’ve use. Like my exciting journey with the oh so wonderful GitHub Desktop and Source Tree (I know I am noob to da maxxx).

Cya all next week :3