Have you ever read the Alchemist? There’s a famous line from it that goes something like
“And, when you want something, all the universe conspires in helping you to achieve it.”
The past 24-hours kinda feel like that.
So, this week I decided to venture out a little. Since I’ve been going through the FreeCodeCamp curriculum, I decided to see if there was a Facebook group in my area and joined it. One of the organizers sent me a friend request and we started chatting about the curriculum. He invited me to the group’s Slack chat (man you’re just not a legit group of developers unless you have a slack chat). A lot of the members were online and someone mentioned something about RSVPing to an event. I clicked through a few links and it turns out it was that night! After coordinating with my husband, and rushing home to get my laptop, there I was sitting in a new-to-me software development MeetUp group.
The people were super friendly. Ironically, the group started because of 3 people who were *also* accepted to the Grow With Google program— but they were doing Front End Web Development while I was working on Android. One of the organizers made a very good presentation on hosting, domains, and DNS and the group was actually engaged! People were asking good questions and they led into really good sidebars.
I left early because I had to run to my parents’ house, but I’m so fucking jazzed about this. My husband has been pushing me to venture out and go to meetups like I did in Chicago, but I had been avoiding it because of time and, tbh, my spirit has been a little crushed lately. For the past year, I’ve worked 7 days a week, averaging 56 hours/week. I’m still working this schedule and I’m pretty tired all the time. It makes me moody and generally unfit for human consumption. I do it because it takes these two jobs to make anywhere close to the same amount of money that I was making in Chicago.
Going through the FreeCodeCamp curriculum and logging my time/lessons has helped me find pockets of time to continue to study. Finding *this* group of straight-up nerds is a fucking godsend and I cannot wait to see what we make and learn from each other.
Speaking of learning, here are my notes from this week’s FCC lessons:
Applied Accessibility
17-Mar 8:45 10:00 1:00 11
“The goal is to make the web more accessible to everyone regardless of abilities. To do this, website content must make semantic sense.
<div> – groups content
<section> – groups related content
<article> – groups independent, self-contained content
Photos need alt text for images that don’t load and for people who are visually impaired and use screen readers. Audio needs alt text for clips that don’t load and transcripts for people who are hard of hearing/deaf. (mind blown)”
18-Mar 21:00 22:01 1:01 11
date & time tags.”.sr-only {” creates things in the CSS that are only accessible to screen readers and not visually visible to website visitors. contrast ratio for text readability is 4.5:1 contrast for normal text. this is calculated by comparing relative luminance values. white against black creates the strongest contrast @ 21:1. A good way to achieve this is by declaring w/ hsl(). Tabindex tells the visitor’s keyboard what to focus on when tabbing through a website.
Responsive Web Design Principles
19-Mar 18:03 19:03 1:00 4
Responsive Web Design Principles: Create a Media Query (UGH……………. this was difficult to understand. I think I need to realize that I’m given very direct and explicit directions. there are no inferences to make. JUST DO IT EXACTLY AS YOU’RE TOLD.)
The 4 different viewport units are:
vw – viewport width- ie: 10vw – would be 10% of the viewport’s width
vh – viewport height – ie: 3vh – would be 3% of the viewport’s height
vmin – viewport minimum – ie: 70vmin – would be 70% of the viewport’s smaller dimension ( height v width)
vmax – viewport maximum – 100vmax – would be 100% of the viewport’s bigger dimension (height v width)”
CSS Flexbox
20-Mar 21:15 21:55 0:40 17
“Flex, flex-direction/ row, column.
Justify content:
flex-start aligns items to the start of the flex container (row default left, column default top)
flex-end aligns items to the end of the flex container (row default right, column default bottom)
space-between aligns items to the center of the main axis with extra space placed between the items.
space-around similar to space between, but first and last items are not locked to the edges of the container. flex-shrink controls the size of the items when the container shrinks. The flex-grow property controls the size of items when the parent container expands. flex-basis specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.
ALSOOOO There is a shortcut. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property. For example– flex: 1 0 10px; will set the item to flex-grow: 1;, flex-shrink: 0;, and flex-basis: 10px;.
align-self : adjust each item’s alignment individually. useful since other adjustment techniques using the CSS properties float, clear, and vertical-align do not work on flex items.
FYI SELF, YOU ARE 22 LESSONS AND 4 PROJECTS AWAY FROM JAVASCRIPT ALGORITHMS
::breathing intensifies::
CSS Grid
22-Mar 22:43 23:17 0:34 10
“fr : sets the column or row to a fraction of the available space
auto : sets the column or row to the width or height of its content automatically
% : adjusts the column or row to the percent width of its container
grid-gap is a shorthand property for grid-row-gap and grid-column-gap from the previous two challenges that are more convenient to use. If grid-gap has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.
Refer to CSS Grid: Use grid-column to Control Spacing for 3×3 grid example… trust me, it’s much better than trying to figure it out in your head.”
—————————–
Wish me luck and lots of sleep.
Code on peeps,
Alex