Thoughts from working on the JavaSCript 30 Challenge.
Day 2 - Notes
It’s been a while since I’ve used the CSS transform property. Elements can be translated, rotated, scaled, and skewed.
There is a cubic bezier editor in Chrome dev tools that lets you pick just the right curve. To use it, add the transition-timing-function property to an element and then click on the small purple icon next to the value.
Practiced using some of the prototype methods for Date, such as getSeconds. In the tutorial, Wes named his instance of Date now which confused me briefly since there is also a native now method. I used a different name for my variable of the Date instance.
I did a bit of logic and math thinking about how an actual clock works.
I wanted to fix the bugginess of the clock hands rotating backwards every time they reached the start position. When I tried to re-apply the transition-timing-function property it did not kick back in like I expected, so I spent some time reading up on CSS transitions here and here. Adding and removing the transition property is best done by creating a new class just for the transitions and adding/removing that class. This has the benefit of keeping all the values for the transform properties in the CSS and not duplicating them in the JS.
I’m working my way through Wes Bos’ JavaSCript 30 Challenge which is 30 coding exercises using vanilla JavaScript.
The course has 30 videos and corresponding starter files. It’s a great collection of lessons for anyone who is somewhat familiar with code but wants to get more practice with native JS methods, the DOM, and CSS.
I’m keeping track of things that are new to me and sharing my notes here so I can reference them in the future.
Day 1 - Notes
This lesson is a good example of why you might want to use HTML data attributes. Data attributes are custom attributes that begin with the keyword data-.
HTML5 media elements (such as audio and video) have a currentTime method as well as many other methods you can make use of.
Adding and removing classes from elements is easy with the Element.classList methods to add, remove, and toggle. They are just as easy to use as jQuery's addClass method (and don’t require jQuery!).
CSS transitions have a transitionend event that you can listen for. Similarly, you can also listen for animations using the animationend event.
Template literals, new with ES2015, are a nice way to combine strings (enclosed in back-ticks) with variables (using ${} to insert).
How to Create a Custom Tumblr Theme & Get This Theme
I have shared the code for the theme that this blog uses over on GitHub.
Follow the link for step-by-step instructions on how to install this particular theme on your own Tumblr blog. You can use these instructions to install any theme, just change out the theme you are copying!
For people who may be beginners to editing Tumblr themes or to coding in general, there is also some information about plain text editors.
I want to share five applications/tools/hacks that I use on a daily basis, no matter what type of work I’m doing. All of these are free to use and available on both Mac and Windows.
They are: Momentum Chrome extension, Evernote, Gmail filters and labels, F.lux, and LastPass. I discuss how I use each of these to add focus to my days and help me to get stuff done!
1. Momentum on Chrome
I use a Chrome browser extension called Momentum to make surfing the web a bit more peaceful and beautiful. The extension gives you a lovely photo and simple reminder of what to focus on for the day, each time you open a new browser tab.
It acts as a small reminder to focus when you open a tab to “just check Facebook real quick” and the random scenery images make me feel just a little bit fancier for the day.
2. Evernote
I have Evernote installed on my computer and my smartphone. I keep a running daily To Do List and add notes as ideas pop into my head. I especially love it for those times when I’m falling asleep and have a brilliant idea or remember something important for the next day. I can add a note on my phone, which I keep next to my bed as an alarm anyway, and when I open my computer the next morning, Evernote has synced and the note is right in front of me. This lets me put those “oh shoot!” moments out of my head so I can drift off to sleep.
I also use it as a running grocery list. I have a note containing items I commonly purchase from the store with empty checkboxes next to each item. I check the boxes as I shop, and the next time I go to make a grocery list, I just un-check the boxes to make them empty again.
I do use the free version which does not come with backups or customer support. I have a friend who relies on Evernote heavily for work and the premium version’s customer support option sure came in handy for him when his notes all disappeared one day. I’ve been using it for four years and luckily have not had any issues.
3. Gmail filters and labels
Inside of Gmail Settings you’ll find options for Labels and Filters.
You can color code the background and the text colors of labels. This helps me to visually filter out or to not miss important emails. Hover over the square to the right of your folders in the folder menu on the left to find the options to change the color.
You can use filters to apply labels, skip the inbox, delete, etc., to all emails from a certain sender, or matching a specific subject line, etc. I use this for emails that I don’t want cluttering up my inbox but I don’t want to unsubscribe from.
I use filters for mailing lists of blogs I enjoy reading. These emails never make it into my inbox but they are always in my “To Read Later” folder. Then when I have free time (waiting in line, riding the bus) I open that folder and get to reading!
I have found the easiest way to get started is with an email you want to filter open. Click the More button and choose Filter messages like these. Then create filters as you go so you’re not overwhelmed by doing it all at once.
4. F.lux
I use F.lux on my Mac to remove the blue tint from my screen during non-daylight hours. I try not to look at screens close to bed time because I find it harder to fall asleep. During winter months where I live it gets dark outside pretty early though!
Adjusting the brightness as well as the color of the screen saves my eyes and lets me use the computer longer. Not as ideal as turning off the screen altogether would be, but it’s a good compromise. For people who have to look at screens for long periods of time I highly recommend this.
I use a similar app on my Android phone called Twilight, and according to this article the new Apple iOS has a feature like this built in.
5. LastPass
A password manager such as LastPass is a huge time saver with the added benefit of making your online life more secure. As of today, I have 366 websites requiring login credentials that I manage with LastPass. LastPass creates randomized, secure passwords and saves login credentials for each site so that you can have a unique password for every site. You do need to remember your one master password that gets you into your LastPass account, and then everything after that you can let LastPass take care of.
Now that I have all of my accounts in LastPass, whenever I am prompted to login to a site, I use a drop-down on the page to paste my username and password. This is much faster than typing everything out and more secure than remaining always logged in or using the same password across multiple sites.
It can take time to get all of your accounts in there, and my tip for that is like my tip for setting up Gmail filters - adding accounts as you use each is less overwhelming than adding them all at once. LastPass prompts you to add/update a site whenever you type in or change your login credentials.
I also recommend setting up Two Factor Authentication on your LastPass account for added security since it holds the passwords to all of your other accounts.
I believe that developing positive working relationships with your colleagues is what’s best for people, the projects they work on, and ultimately, the company.
From the article:
“…the best teams respect one another’s emotions and are mindful that all members should contribute to the conversation equally. It has less to do with who is in a team, and more with how a team’s members interact with one another.”
Career changes are rarely easy, but how do you actually figure out what you want to do so that you're happy with your new job? We have answers.
Lindsay's Notes:
Make a list (yes, write it down!) for what you want to get out of your job, and look for that. I’m fortunate that I’ve worked in plenty of jobs over the years and have learned what I like or dislike a little bit more at each job. My Happy List includes working in natural light, regular face-to-face interaction with other people, a sustainable workload and balanced environment (i.e. working more than 40 hours/week is rare, I’m not expected to check emails outside of normal business hours, realistically scoped project deadlines), plus regular check-ins with my team/boss/coworkers.
So as it turns out, the front-end JS ecosystem is fairly complicated. So many libraries to do basically everything, 100 …
Lindsay's Notes:
A nice quick introduction to the JavaScript DevOps ecosystem. As the author explains, by DevOps, she is referring to tools that are NOT front end frameworks/libraries, but rather, tools that “help you put everything together and smooth the actual process of coding out."
First Men on the Moon is one of my favorite little educational resources. It’s the closest I’ve ever felt to being part of the Apollo 11 moon landing. They took the actual video filmed outside the window of the lunar module, the audio recorded between astronauts and mission control, and a bunch of data about the landing itself — including Armstrong’s heartrate over time — and synced it all together into a sweet interactive experience.
Looks something like this, ‘cept on the site you hear everything and can scrub back'n'forth from descent to “The Eagle has Landed!”
Playing w/ this site is how I learned about a software glitch that almost botched the whole thing. Neil Armstrong is a couple minutes from touching down when he says “program alarm” so calmly you could almost miss it amid the chatter. Goes something like:
Armstrong: "Program alarm." [4 seconds, unrelated chatter] Armstrong: "It's a 1202." Aldrin: "1202." [16 seconds of silence] Armstrong (now with urgency in his voice): "Give us a reading on the 1202 program alarm." Mission control: "Roger. We got...we're go on that alarm."
And on the Mission Control loop in Houston — the one the astronauts can’t hear — they say:
Steve Bales: "If it doesn't reoccur, we'll be go."
Go listen to it! For those of you who haven’t spent your lives in software, let me translate from Super Professional NASA Speak™ into ordinary developer chat for you:
This is obviously a silly caricature. NASA are professionals. But I read about this event after listening to the audio. Turns out there’s a bit of truth here — when that 1202 error first showed up, there was a lot of confusion. Only one person, thanks to a previous simulator failure, happened to have a hand-scribbled list of various possible program alarms and was able to suggest that it was safe to keep going. The alarm would pop up three more times before landing.
It’s always been one of my favorite moon-landing stories — almost aborting right at the very end.
So I was really happy to learn about the programmer behind this success: Margaret Hamilton. I’d never heard her name until a recent reddit thread and a followup on hacker news.
Turns out she’s not only responsible for this alarm not ruining the mission but she actually coined the term 'software engineering’. Apparently she spent a lot of time arguing for software safety checks that prevented astronauts from accidentally doing the wrong thing, despite being regularly assured that this code wouldn’t be worth its weight because professional astronauts don’t accidentally do the wrong thing.
In Apollo 11’s case, a switch in the lunar landing module was set in the wrong position, causing its computer to process data from two radars instead of just the one pointed at the moon. This was too much to process, so Hamilton’s system began (impressively) dropping its low priority tasks in order to have enough CPU to properly handle the critical lunar surface radar input. Wasn’t a software glitch at all — quite the opposite. A graceful handling of a critical situation.
Rest is history. Enjoy it for yourself, and be sure to thank Margaret when Neil gets to ignore those scary-sounding alarms.
I compiled this list for a talk in Chattanooga recently, and wanted to share with the rest of you the best videos on hardware/nodebots/other things on the web.
This week for our class project we got to have some fun and choose a library or tool to integrate with JavaScript. I wanted to create something with a small amount of user interaction and a pleasing visual design. Paper.js was recommended as a framework that is easy for beginners to work with. After looking through the examples and showcase pages, I was sold. My favorite examples are ‘Voronoi’ and ‘Hit Testing’. The tutorials also seemed pretty straightforward and I was excited to try them out.
The basic tutorial gives an example with Paper.js code inside of an HTML file. That’s okay for a small amount of code, but the more code we write, the more it makes sense to keep things organized and put all of our JavaScript and PaperScript into external .js files, and keep the HTML file to mostly HTML code. To keep things organized, we want to structure our files like so:
Structure goes into the HTML file. What order do you want the items on the page to appear in?
Styling goes into the CSS file. This is the file that tells us how the items on the page should look.
Actions go into the JavaScript file. This is the file that manipulates the page when we interact with it.
Unfortunately, when I used the Paper.js tutorial example and removed the Paper.js code out of my HTML file and placed it in an external JS file, things got less beginner-friendly. At first, no browser would load anything at all. Then I added in JQuery and tried the Paper.js tutorial’s suggestion of using “with (paper)” at the beginning of my code. I was able to view my file in Firefox and Safari, but not Chrome. In Chrome I was getting a console error saying "XMLHttpRequest cannot load file:... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource”.
Here is what I did to get everything working together, with my JavaScript in its own JS file. This worked in all browsers, including Chrome, so I could use the Chrome Developer Tools to help myself debug while building my project.
In my HTML file:
Placed my <script> tags at the bottom of the <body>, just before the closing </body> tag.
Loaded jQuery, Paper.js, and my script file that I creating, in that order. I used publicly hosted versions of jQuery and Paper.js, also called a CDN, or Content Delivery Network, rather than copies of these libraries on my own computer.
Gave my script file a property of "type=‘text/javascript’” and worked with it as a JavaScript file rather than as a Paper.js file.
In my JS file:
Placed “paper.install(window);” at the top of my JS file, per the Paper.js tutorial’s first suggestion on “Using JavaScript Directly > Setting Up a Scope.”
Added a “window.onload = function( )” which wrapped around all of the code I was writing. I also added a “console.log( )” message to check that the files were talking to each other as expected.
Created the canvas before adding any other code by using “paper.setup('myCanvasID’);”
Just before the closing bracket for the window.onload function, I included “view.draw( );” - which doesn’t seem entirely necessary, but if it is included, it appears to help speed up the drawing of the items when the page loads.
One other change I needed to make to the Paper.js tutorials was to create a Tool( ) variable that I could place before any mouse or key events.
That’s pretty much it for getting started with the basics. I ran into some other challenges with resizing the browser window and using custom fonts in the Paper.js TextItem, which I’ll cover in a later post.
You can check out the project I made using Paper.js over on http://lindsayelia.github.io/etch-a-sketch/.
We had a guest lecture today by one of the instructors from the Colorado Galvanize campuses. He gave an engaging talk about priming yourself to learn, putting yourself into the best possible state so that you can learn at your optimal self.
Some of this I’ve heard before, but I thought it was a nice way to set the stage for the beginning of our learning adventure over the next few months. Now we all have a few more tools to help us get through when things get uncomfortable.
These are my notes from the talk.
Set the Stage
1. Clear the stage, prime your brain.
we have only so much ‘working memory’ space - can process about 4 things at a time
turn off notifications
write down anything that you need to do later that is distracting you, a place that you know you’ll check later
2. Clarify the what and the why.
what is the objective, what is this thing that I hope to achieve in this next period of time, and the why
the why is the purpose, we are social creatures, we operate best when we have a mission, a reason to do what we’re doing
take a bit of time at the start of doing my homework, for example, to focus on the why, why we’re doing what we’re doing
if operating from a place of fear, you are not going to be operating in a state of flow
fear literally shuts down your frontal cortex, you are operating at less than your potential, it makes us “sub-human” ?
why? not quite sure why this thing is important, but eventually I want to build web apps, or whatever, etc
it’s ok to put small things in context of larger goals, so long as that goal is motivating
3. Prioritize process over product.
it’s the journey, not the destination
sometimes failure is valuable, we can learn from our failures too
pleasure in process, it can be fun to go through the process
quoting Malcolm Gladwell - ‘focused practice’ - all about setting aside time to work on the things you are weak at, the goal is not to become perfect, but rather, to just put in the time
focus on the things you are weak at, not the things you are good at
set aside certain amount of time, I know this is going to be difficult, will spend the next 30 min working on this thing, and I’m going to have fun goddammit, and THAT is success, not whether or not I finish it
when get good at process, will start to produce like a well-oiled factory, really fast
Play
1. Wrestle with it.
like puppies playing with each other (his analogy was playing with your siblings when you’re a kid, but I never did that haha), you know what to expect when they get that look in their eye
when I learn new info, play with it, turn it, twist it, get to know it
when first learn something, have a 2 dimensional view
if can learn something else about it, start to learn about the other angles
eventually develop a clear picture, a 3 dimensional view
another analogy is to chew on an apple, don’t just look at it, bite into it, smell it, taste it, fully experience it
“this is not college. this is a completely different experience"
“there is no such thing as intelligence, only familiarity"
People who are experts on a topic are not geniuses, they are experts because they have spent so much time playing/wrestling with it.
2. Take risks. Growth mindset.
if you tell kids that they are smart, they will try to maintain that label by doing easy things that will label them as smart
if you congratulate them on effort, they will take on harder challenges/problems because they want to try hard
fixed - crap, i’m only going to learn 20% of this material
growth - awesome, I got 20% so far and have just 80% left to go
Mistakes are an essential part of the learning process.
3. Have fun.
people learn best when they feel safe, that they feel they can make mistakes
no “coding in anger”! haha
stop if I find myself yelling at my computer, take a step back to remember that this stuff is fun, I’m making awesome things
only when you are having fun is when you will learn as much as you possibly can
will not enter a state of flow unless you feel safe and competent in what you are doing
we want to set ourselves up for success
by playing, I will get myself there a lot faster
Reflect
1. Self-assess.
Look back at what the what was, that I said I was going to do, how did that go? did I do that?
celebrate if I achieved it,
be honest about what went well and what didn't
maybe I got distracted
try again next time
how did I do with the process? how did I do with making progress towards my objective?
Research shows that what moves the needle the most, is when students are able to become their own teachers, when they can assess where they are, what they need help with, here’s how far I still need to go, etc.
2. Ask more questions.
creating good questions are essential about the learning process
forces me to identify what I don’t know
Write questions out for myself of things I want to learn, know, to find out.
Configuring Sublime Text to open files from the Command Line
How to configure Sublime Text to open files from within your CLI (terminal or command line).
Why?
The default installation of Sublime Text (a text editing program, used for writing code) gives the option to open files using Sublime Text by typing type a command into the CLI.*
However, it needs to be configured sightly. So it’s really more like 80% installed (for someone like me who is still learning to use the CLI), or 99% installed for experienced developers, or 5% installed for anyone not familiar with using the CLI. Not as useful as 100% installed and ready to go.
*CLI is short for command line interface, or Terminal, or Shell. Depending on what operating system you use, you might call it something different.
How?
Glance at the Sublime Text overview of configuring the CLI command. Don’t worry if it doesn’t make sense. Move on to the next step.
Check to make sure you have Sublime Text installed on your computer. I’m assuming you already do, if you want to configure it to use the CLI command to open files. On Mac, open Spotlight and search for Sublime.
Read this stackoverflow Q&A about this topic and scroll down to the third answer, the one that includes:
“There is a easy way to do this. It only takes a couple steps and you don't need to use the command line too much. If you are new to the command line this is the way to do it.
Step 1 : Finding the bin file to put the subl executable file in
Step 2: Finding the executable file”
Note: the answers in this stackoverflow Q&A may be shown in a different order if you read this blog post at a much later date. I’ve also outlined the steps here below, to use if the Q&A doesn’t make sense to you.
For more help with Step 1 : Finding the bin file to put the subl executable file in I searched on the internet for “how to find mac bin file” and came up with these steps, for a Mac:
Open a Finder window
Open the “Go” menu
Choose “Go to Folder…”
This will bring up a new window in which you can type “/usr/local/bin”
That should take you to the folder location where bin lives
Now, open a second Finder window and open up your Applications folder. This is typically found at the same folder level as where your Desktop is locations. You can also use Spotlight to search for your “Applications” folder.
Find the Sublime Text application. Right-click on it so you get a pulldown menu.
Click on “Show Package Contents”. Click into the “Contents” folder.
Click into the “SharedSupport” folder and then into the “bin” folder.
Copy the file “subl” from here and go to your other “bin” folder that we searched for earlier, and paste it into there. You need to make sure to copy and paste it, not move it, and not make a shortcut or alias to it. You can right-click on files or folders to get the “copy” and “paste” options.
Open your terminal and test to see if it works by navigating to a folder with a file that you want to open with Sublime, type “subl” and see if Sublime opens to the folder or file where you are. If it does, that means it is working.
Today in class we were asked to come up with an analogy for JavaScript objects to help solidify the concept in our heads. Often the analogy I see in lessons about object oriented programming is to think of the original prototype object as a car or other item in a factory, and the factory stamping out copies is like creating instances of the class (original object).
This is fine up to a point, but when it comes to adding properties, or features, to that car, I can draw a blank, since I am someone who has never owned a car in their life (I live in an urban area and use public transit, bike, or walk).
I do like to eat, however, and dislike spending a lot of time cooking, so I often make salads out of ingredients that are ready to go. I also thought a food-based analogy is more universal than a car-based one.
In my analogy, the salad is the original object and the ingredients are the properties. We can create different salad recipes by making instances of the object. There can be categories of ingredients (greens, protein, vegetable, fruit, nuts, dressing) for each property. The values of the properties will change when we create each new instance (spinach or kale, tofu or lentils, cucumbers or carrots, oranges or apples, walnuts or cashews, oil/vinegar or lime vinaigrette). Methods would be actions we could take on the salad, such as determining how many people the salad can serve or how much dressing to put on.
Okay, now I’m hungry. :)
Note: I used two equal characters == in the title of this post rather than three === because this is an analogy, not a direct correlation. In JavaScript, two equal characters is used to check when things are “sort of” or “mostly” equal. Three equal characters is used to check for “strict” equivalence. One of JavaScript’s many fun quirks!
Day two at Galvanize started out by writing down characteristics of a good developer. I think the number one quality for a great developer to have is empathy. I’d probably say the number one quality for most things in life, is to have empathy for other people - the people you work with, the people you’re working for, and the people you ride the bus with every morning.
I was also reminded of advice from the venerable Jillian Michaels: “get comfortable with being uncomfortable.” I heard her say it on tv once and now I like to replay her voice in my head when I want some encouragement.
We all do things we believe will be good for us, even if they’re painful, because we’re motivated by the results. I like to take this view towards personal growth, self-help, being a good person, whatever you want to call it, and use it as a constructive way to approach anything new, such as learning an entirely new topic in a few months.
I plan to learn at least one new thing every day for the next 6 months and to spend some of that time furrowing my eyebrows at my computer, being uncomfortable while I figure things out. I’m very much looking forward to it. :) (Or should I say >:| hehe)
In addition to a few inspirational life lessons, today I also learned that people-who-are-not-programmers also use GitHub, and how to configure Sublime Text to open files from with the terminal.
I’ve been using GitHub for the past few years for work, and hadn’t given much thought that it can be used outside of programming-land. Writers, musicians, artists, government organizations, and many others, use GitHub as a place to store, share, and track changes to information. GitHub holds quite a variety of file types. Version control is everywhere!
