De Weekly Nerd is een vak binnen de de minor Web Development bij CMD Amsterdam.
Waar dit uit bestond?
Kennismaken met het beroepenveld
Orienteren op het vakgebied
Vakgerelateerde artikelen leren schrijven
Speciaal hiervoor ontvingen wij een nieuw, mooi sketchnotingboekje en bijbehorende tools (Fineliners, Sharpie, Twinmarker, dat soort dingen..).
Het was dan ook de bedoeling dat overal deze aantekeningen van gemaakt zouden worden.
Aangezien ik eigenlijk al een tablet aan had geschaft inclusief de notitie-app Notability (dus: voor sketchnoting!) voor dit soort dingen, iets met een onleesbaar handschrift, heb ik ervoor gekozen het fysieke boekje even links te
laten
liggen en digitale aantekeningen te maken.
Maar, nu leek het mij dan weer wel zo leuk om mijn sketchnotes in boekvorm te presenteren! Klik op de pagina’s hiernaast om een pagina verder te bladeren, of juist een pagina terug.
Artikelen
Eerste Hulp bij Techvakken
‘Waar begin ik?’
Velen hebben dezelfde eerste struggle; waar begin je überhaupt?
Dit is iets waar ik zelf uitzonderlijk veel ervaring mee heb, dit is hoe ik tegenwoordig meestal te werk ga:
1. Kijk goed naar de opdracht
Het eerst wat ik doe als ik tegen iets opkijk, is maar eens uitzoeken wat ik überhaupt zou moeten gaan doen. Ga naar de plek waar al het materiaal voor het vak verzameld is; DLO, GitHub, Google Drive, wherever het ook is neergezet door
de
docenten. Vaak is de opdracht door hen ook al opgedeeld in kleinere stappen!
Ga naar Brightspace of een ander intranet, check het beoordelingsformulier en verdere instructie bij de opdracht (20 min?)
2. Beginnen aan de opdracht!
In de meeste teksten die over code gaan, zul je nu wel dingen lezen waarvan je denkt ‘ja dit is echt magie, ik skim er maar even doorheen want ik snap al deze termen niet en ik moet ze volgens mij al lang al begrijpen’. No stress; bij
het
eerste
woord dat je tegenkomt en niet begrijpt; google het!
Stel jezelf voor dat je iemand naast je hebt zitten die jóu vraagt: ‘hey wat bedoelen ze met deze zin?’; dan open je waarschijnlijk ook Google en klik je snel door wat websites heen om erachter te komen. Kom je er dan nog niet uit, stel
dan
gewoon
snel de vraag aan iemand (wij, docenten, klasgenoten, etc) die het hoogstwaarschijnlijk wel weet, het kost ons namelijk een stuk minder tijd, zweet, moeite of tranen.
Oké, terug naar de opdracht. Je hebt een beetje gezien wat er moet gebeuren, en dat je een concept moet verzinnen voor de opdracht. Zet een timer; besteed zo’n 30 minuten aan een concept waarvan jij denkt dat ‘t haalbaar is om te
realiseren.
Project gaat over leren programmeren, niet om een supergeweldig perfect world-changing concept. Houd het zo compact mogelijk; uitbreiden kan naderhand altijd nog, houd voor nu de focus op je ‘Minimum Viable Product’.
Niet te lang aan besteden dus, keep it simple, ‘t gaat zometeen om je code.
Probeer in één of twee zinnen je concept te bedenken/omschrijven (30 min?)
3. Schets
Maak een snelle schets van hoe je je concept er visueel uit wil laten zien. Hoeft geen hi-fi schets te zijn; alleen een houvast waar je naar kan kijken wanneer je bepaalt welke stappen je moet doorlopen om tot je eindproduct te komen
Maak een snelle schets van je concept als houvast (10 min?)
4. HTML
Top, je hebt een concept om mee te werken! In het wilde weg beginnen met code rammen is echt heel onpraktisch, dus nu ga je het opdelen. Wat zit er allemaal in de website? Vaak pas je JS toe /gaat het óver dingen die in je HTML staan,
dus
begin
daarmee voor zover mogelijk.
Maak je HTML-file aan en zet daarin de basiselementen die in jouw website voorkomen. Wel semantisch volgens internetstandaarden! (15min?)
Denk aan: een header, een image, twee buttons, een checkbox, etc. Niet te lang over dubben, en als je ergens op vastloopt: schrijf het op.
5. CSS
HTML/CSS-kennis zijn vaak wel de basisvaardigheden die je al bezit, dus daar gaan we hier nog even niet de focus op leggen. Voeg voor zover je dat weet/kan, wat styling toe waarmee je alles een beetje op de positie krijgt zoals je op je
schets had
staan. Wederom; niet te lang blijven hangen, je wil eigenlijk z.s.m. door naar JS. Zet anders een timer van 15 min, en als je zit van ‘ik weet nu al niet wat ik moet doen’; zeg dit in Discord/Slack/any communicatieplatform!
Loodsen
we
elkaar erdoorheen 🙂
Geef jezelf 15 minuten om wat basic CSS toe te voegen
6.1 Javascript!
Oké, je hebt nu je HTML-elementen, en misschien een beetje CSS. Tijd voor Javascript!
Maak een nieuwe Javascript-file aan, en link deze gelijk middels de script-tag in je HTML-bestand.
6.2 Features uitschrijven
Leeg Javascript-document voor je; wat nu?
Zet op een rijtje wat de basic features binnen je project zijn.
Even een kort voorbeeldje;
Schrijf uit wat de core features van je project zijn (10min)
6.3 Omzetten naar functies
Top, nu weet je dus al beter wat je moet gaan doen.
Hoe ga je dit nu omzetten naar functies? Eigenlijk heel makkelijk, voor nu:
Dus, begin bij je eerste feature. Heb je al een idee qua hoe dat moet?
Dan kun je vast gaan inlezen op functionaliteiten binnen JS waarmee je dat kan doen, bijvoorbeeld die in de les met de huiswerkopdrachten behandeld zijn.
Zoek in één zin op wat je wil doen
Of, zoals ik zelf vaak doe; domweg Googlen en een voorbeeldje van een ander uitpluizen. Niet simpelweg **copypasten en denken dat ‘t daarmee klaar is; daar heb je vrij weinig aan als je ‘t niet helemaal snapt,
en
kleine
kans dat iemand het precies zoals jij had gewild, heeft gedaan.
Kijk vervolgens naar wat bijvoorbeeld MDN of W3Schools voor voorbeeldje erbij heeft staan; doet dat wat je wil?
Ik ben zelf meer van MDN (mozilla) als resource,
maar
soms
is W3Schools wat makkelijker te begrijpen (al zijn ze niet altijd semantisch correct bezig..).
6.5 Begrijpen
Als je niet direct begrijpt hoe ‘t werkt; ga naar ‘try it out’ en pas wat dingen aan zodat je ziet welk deel wat doet. Probeer het als een soort verhaaltje te lezen; begin bovenaan, en loop dan alles door.
Snap je hoe ‘t werkt? Kun je dit goed gebruiken voor je feature? Noteer dan de bron, en zet deze code om naar je eigen data/project/code
Noteer URL/bron, en zet het om naar een bruikbaar stuk functie voor je project
Best practices
Praktisch
Check ff of je bestanden (HTML/CSS/JS) goed gelinkt zijn
Google anders gewoon even de tags, dan kun je daar niet zo snel de fout mee ingaan.
Tikfoutjes komen echt immens vaak voor, ook bij de beste developers
Al je bronnen noteren. Gooi ze direct ergens in je mapje, en houd ze bij. Geen tabbladen sluiten tot je die linkjes hebt genoteerd!
Zorg er wel voor dat je begrijpt wat je uit een bron hebt gehaald; als je het niet begrijpt, komt dat al snel naar boven. Je kunt hiervoor ook altijd om aanvullende uitleg vragen bij anderen :)
Important side notes
Stel je vragen gericht; wat wil je precies weten?
Google, google, google! Ik google soms nog voor de meest basic HTML-tags, gaat een stuk sneller dan naar m’n scherm staren en van mezelf verwachten dat ik het na vijf minuten inene wél uit m’n geheugen kan trekken. Na 20x Googlen en
meer
ervaring in coderen komt ‘t vanzelf wel in je hoofd, maar in de praktijk checken meer ervaren developers ook vaak genoeg nog even of ze alles wel goed hebben genoteerd.
Begin simpel, zorg dat je eerst een eenvoudige versie maakt van je project waar je later eventueel nog dingen aan kunt toevoegen. Die eerste versie is dan je 5,5 zogezegd, als je dan nog meer toffe dingen wilt doen hoef je daar minder
om
te
stressen.
Dit soort projecten zijn ervoor om je te laten leren werken met code. Het hoeft niet je levenswerk te worden, blijf dan ook niet te lang steken op punten die niet per se binnen het vak vallen want je doet dit vak om, juist: te leren
programmeren.
Vergelijk jezelf niet continu met anderen; voor sommigen verhoogt dit de drempel gigantisch hard ‘omdat zij al zo veel verder zijn’. Ja boeie, je hebt je eigen learning curve en da’s niet te vergelijken met anderen. Wees niet bang om
open
te
zijn over wat je wel of niet weet, en zie gevorderden als mensen die jou verder kunnen helpen. We zijn allemaal ooit ergens begonnen, en soms kost het nou eenmaal iets meer tijd/moeite dan anderen.
Wees ook alsjeblieft niet bang om het toe te geven als je achterloopt op de stof/opdracht. Ik heb het vanwege die angst gepresteerd om me door veel dingen heen te bluffen, maar als ik dat eerder getackeld had, was ik
nu
echt
veel verder qua kennis. Beter laat dan nooit 😉
Ask us anything; wees NIET bang om dingen te vragen. Er zijn zelfs vierdejaars (zoals ikzelf..) die nog de meest basic dingen vragen en Googlen. Leer je tenminste iets van, en ook niet bang zijn om iets te vragen wat
al
een
maand geleden is behandeld, want je zult het toch ooit moeten opzoeken en we zijn er voor ieders vraag.
Laat je niet demotiveren door anderen die echt prachtige dingen in elkaar kunnen knutselen; laat je juist inspireren! Ziet er tof uit en iemand laat dat zien, vraag ze hoe ze dat gedaan hebben en leer ervan!
When I first heard about the term ‘Atomic Design’, it was only 2.5 years ago. All this time, the idea of working with this principle lingered around in my mind. The concept was so easy and clear; this is how I would like to develop
things. Also, this year, I figured I really wanted to make some ‘personal’ set of resources/standard components to use in my projects so I can focus more on learning other things beside spending all my time on design only instead of code.
That’s when I got introduced to the so-called Design Pattern Libraries. I decided I wanted to combine those two and make my own examples to explain Atomic Design with.
What is Atomic Design?
Before, webpages were mostly just seen as whole pages. The header/footer was mostly the same though, and usually already ‘separated’ from the pages itself and imported in each one. This can be viewed as the first step towards an
Atomic-way of thinking. Then, Brad Frost came across with the actual concept of Atomic Design. It’s a methodology for the creation of design systems.
It wouldn’t surprise you that it’s based on chemistry; webpages are split up into elements, components, molecules, atoms and so on. Just like in real life (great mental model, y’all!); even though I only took one year of chemistry class
in high school and sucked at it anyways, I could understand it immediately.
TL;DR Atomic design is methodology for creating design systems
There are five distinct levels in atomic design:
Atoms
Atoms are the smallest parts. Everything is built out of them; they’re the basic building blocks.
Think of it as the ‘base’ parts in SMACCS, or just simply; the HTML-elements.
Form labels
Inputs
Buttons
H1, H2, H3, etc
Example of an atom:
Molecules
What happens when you combine atoms? You get a molecule!
These are the first valuable ‘building blocks’. They may form something like a search field. It’s just a group of atoms chilling out and working together, united.
Example of a molecule:
Organisms
Organisms are basically just molecules put into context. Meaningful chunks of blocks. It’s a standalone thing, like a header or footer and re-usable among pages.
Example of an organism:
logo
Atomic
Templates
Templates are an even bigger part; think of it like the organisms placed into a layout; just like bees inside their hive. It defines the content structure, like a wireframe. Now, it’s beginning to look like an actual page, right? You
only need to get rid of the Lorem Ipsum.
Example of a template:
logo
Atomic Design
✨ My blog ✨
Title
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Title
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Title
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Title
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Title
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Title
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Pages
This is essentially the ‘final product’. It’s the template(s) combined to a page, filled with content. Ready to test!
Example of a page:
logo
#BLM
✨ 8 Everyday Ways to Fight Racism ✨
Here are eight ways that you can fight racism in your community.
Learn to recognize and understand your own privilege.
One of the first steps to eliminating racial discrimination is learning to recognize and understand your own privilege. Racial privilege plays out across social, political, economic, and cultural environments. Checking your
privilege and
using your privilege to dismantle systemic racism are two ways to begin this complex process.
However, race is only one aspect of privilege. Religion, gender, sexuality, ability-status, socio-economic status, language, and citizenship status can all affect your level of privilege. Using the privileges that you have to
collectively
empower others requires first being aware of those privileges and acknowledging their implications. Learn more about the many types of privilege.
2. Examine your own biases and consider where they may have originated.
What messages did you receive as a kid about people who are different from you? What was the racial and/or ethnic make-up of your neighborhood, school, or religious community? Why do you think that was the case? These
experiences produce
and reinforce bias, stereotypes, and prejudice, which can lead to discrimination. Examining our own biases can help us work to ensure equality for all.
We encourage you to check out the PBS documentary, Race: The Power of Illusion, which tackles the social construct of race in the United States.
3. Validate the experiences and feelings of people of color.
Another way to address bias and recognize privilege is to support the experiences of other people and engage in tough conversations about race and injustice. We cannot be afraid to discuss oppression and discrimination for fear
of “getting
it wrong.” Take action by learning about the ways that racism continues to affect our society. For example, by watching documentaries, such as 13th, or reading books, such as Americanah or Hidden Figures.*
As advocates, we learn about domestic violence by listening to survivors of domestic violence. Similarly, the best way to understand racial injustice is by listening to people of color.
4. Challenge the “colorblind” ideology.
It is a pervasive myth that we live in a “post-racial” society where people “don’t see color.” Perpetuating a “colorblind” ideology actually contributes to racism.
When Dr. Martin Luther King, Jr. described his hope for living in a colorblind world, he did not mean that we should ignore race. It is impossible to eliminate racism without first acknowledging race. Being “colorblind” ignores
a
significant part of a person’s identity and dismisses the real injustices that many people face as a result of race. We must see color in order to work together for equity and equality.
5. Call out racist “jokes” or statements.
Let people know that racist comments are not okay. If you are not comfortable or do not feel safe being confrontational, try to break down their thought process and ask questions. For example, “That joke doesn’t make sense to
me, could you
explain it?” Or “You may be kidding, but this is what it means when you say that type of thing.” Do not be afraid to engage in conversations with loved ones, coworkers, and friends. Microaggressions, which can appear in the form
of racist
jokes or statements, perpetuate and normalize biases and prejudices. Remember that not saying anything – or laughing along – implies that you agree.
6. Find out how your company or school works to expand opportunities for people of color.
Systemic racism means that there are barriers – including wealth disparities, criminal justice bias, and education and housing discrimination – that stack the deck against people of color in the workplace or at school. For
example, the
African American Policy Forum (AAPF) reported that in 2014, a 12-year-old girl faced criminal charges, in addition to expulsion from school, for writing “hi” on a locker room wall. Their campaign, #BlackGirlsMatter, addresses
the issues of
overpoliced and underprotected Black girls within the education system. It is important for companies and schools to address these issues and promote a culture of equity.
7. Be thoughtful with your finances.
Take a stand with your wallet. Know the practices of companies that you invest in and the charities that you donate to. Make an effort to shop at small, local businesses and give your money back to the people living in the
community. Your
state or territory may have a directory of local, minority-owned businesses in your area.
8. Adopt an intersectional approach in all aspects of your life.
Remember that all forms of oppression are connected. You cannot fight against one form of injustice and not fight against others.
Conclusion
Okay so, it eventually took me a whole day to write this one article because it was actually so much fun to try and make a beginning with my pattern library, based on Atomic Design. I highly recommend building your libraries like that;
coding in isolation saves lots of headaches.
I’ve been coding in Codepen, if you’re curious about the structure of it all, check out my pens:
As some may know, or some might immediately notice, I cannot do visual design. I just can’t.
It usually looks like someone’s 6 year-old niece drew something and threw it on a webpage. Without the cuteness-factor, sadly. How problematic can it be that I can’t design for shit but I do wanna make webpages that aren’t extremely
ugly to look at? Quite.
So, for the past year I’ve been collecting useful resources/examples that directly help me become a better web designer. Specifically: with CSS. Thus, I came across a lot of cool things, I kept those sources all over the place but
haven’t been able to try everything out. But, I can tell other about the possibilities of CSS.
‘Wait, you do that with CSS?!’
Yup, that’s the phrase I hear quite often then. It seems like most devs go for the usage of Javascript right away and don’t even think about the possibility of using CSS. Because ‘it’s not a programming language and thus not really
coding anyways’, right?
Then why the f do so little people know about its endless possibilities? I mean; I’ve been trying to get more comfortable with writing CSS but as I can’t see alignment (seriously, I can’t see if something’s straight, bended or
aligned) I find it specifically hard to do layouts in CSS.
Given that I cannot do visual design, at all, kinda makes me see the value of it in particular. But that’s how I do now know some small
possibilities and tricks and I can keep reading blogs, examples and challenges about CSS-only designs. It just really fascinates me.
So, in this article, I want to share some of those cool things, links and other inspirational sources I came across lately. They were cluttered all over my tabs, notes, documents and whatsmore but now proudly presented below.
CSS custom borders
Border-image is super nice if the usual border-styles just don’t do it for you.
Found a pretty cool grid-generator a while ago and it’s very helpful for the visual-thinkers among us. You can also export your creation to codepen, or save it as is.
https://grid.layoutit.com/
Design inspiration search engine
Muzli is a search engine specifically for the one’s that are looking for design inspiration. What I like about is most is that you can also just search for a single word or color and beautiful designs pop up anyways.
Okay, this one’s not about CSS in particular but accessibility is also on top of my list so I’ll list some of those sources aswell. This one’s about building accessible HTML forms.
Fresh, cool and modern. People are very fond of Tailwind and I can see why.
You can also design your own system and use Tailwind for faster development.
This one’s the odd one out in this article: it’s Javascript. Shhht, don’t tell.
But look at this! It’s a package you can use for applying physics into your designs.
https://brm.io/matter-js/
Grid for layout, flexbox for components
Linking CSS-tricks is a bit of a cheat when it comes to CSS, but I find this article to be very helpful and want to try implementing this principle in my future projects aswell.
These are the first valuable ‘building blocks’. They may form something like a search field. It’s just a group of atoms chilling out and working together, united.
