ON  LEARNING  NEW
THINGS

Blogging as a Developer

I haven't posted in a while (though I've got some good stuff in the works), but I wrote this up for a talk I gave on blogging as a developer. I though these tips could be helpful for people here as well! Why Blog? Reinforce your knowledge on topics. The best way to really learn something in depth is to teach it to somebody else! Demonstrate your knowledge. You can show to the world that you really know a topic inside and out! Build a community and meet other people who have similar interests to your own. Challenge yourself and keep yourself accountable. Help people who are learning the topic you are blogging about! How to Get Started? Find a topic or a theme -- for example Vaidehi Joshi 's BaseCS. It will be easier to come up with posts if you have a theme behind your blog, plus your…

Continue reading...

Designing with Sketch

I've gotten asked a couple times when showing people my portfolio site what my design process is. Up until this week, I would (truthfully) say I didn't have one. I would just code and then tweak my site until it looked the way I wanted it to. This week, I decided that I should at least try to use a design software when I prototype sites instead of just winging it. A lot of designers I know use Sketch , so I decided that was the way to go! I hadn't used any design software before, other than Inkscape for SVG editing, but the interface was very intuitive. I didn't have many issues getting started. I did play through a few of the YouTube Sketch tutorials by LevelUpTutorials on 2x speed to familiarize myself with the UI, but other than that it was mostly trial and error. Full disclaimer…

Continue reading...

Building a MarkDown Reader in Electron

Ever since it came out, I've been interested in Electron because it allows you to write desktop apps in JavaScript. This allows you to use all the JavaScript packages you are used to using! Plus, I spend so much of my life using VS Code, I should probably learn the tech behind it, right? Getting Started I started out by installing Electron globally using npm . I then walked through the "Hello World" example on the Electron site. It mostly shows how to launch an instance of an Electron app and how to handle closing windows. I ended up using most of the code in my final project. I then did some Googling to see how people separated out their code. I initially didn't understand fully that there should be separate code for the creation of the desktop app and then "view" code for the user to…

Continue reading...

Functional Programming in JavaScript with Hyperapp

I kinda feel like a traitor given my pretty long history with Vue and React, but I think I have a new go-to frontend framework. Hyperapp is everything that I wanted Elm to be -- it's easy to build code with, highly organized, and state is handled flawlessly. That being said, it's not as production ready as the aforementioned frameworks, but once it is I can see it being huge. Let's start with zero on building a Hyperapp app -- with tools that are still emerging, I usually go more in-depth. I'll do the same here for Hyperapp. Getting Started A few weeks ago, I saw a few articles about Hyperapp when they released version 1.0 and surpassed 10,000 stars on GitHub. I looked briefly at the counter "hello world" in their documentation. I really liked how clean and simple it looked, and I wanted…

Continue reading...

Learning Angular 5 as a React and Vue Developer

I try not to play into the "war of frameworks" narrative that some programming articles use. I will admit, though, that I've been pretty critical about AngularJS (aka Angular 1). The syntax and structure often seemed clunky to me, and the error messages were not fun to deal with! With the rise of React, I also preferred the component-based architecture that became more popular. The rocky non-backward compatible migration to Angular 2 lost me, and I stopped paying attention to Angular. Recently, I've heard more discussion about Angular 5 and I wanted to try it out and compare my experience to my experiences with Vue and React since I use those on a very regular basis. Getting Started I started with the tutorial on the Angular website, it seemed very straightforward and similar conceptually…

Continue reading...

How I Built an API with Mux, Go, PostgreSQL, and GORM

I've been seeing a lot of discussion about how fast Go is. According to the Benchmark Game Go is much faster than Node, somewhat faster than Java, and runs laps around Python and Ruby. Despite the performance level, Go still has a relatively nice developer experience. Semicolons are implicit, some typing is inferred, and the non-object oriented nature makes it more flexible. That's not even mentioning the built-in concurrency! I decided that I wanted to build something in Go to see if it would be a viable programming language for my apps in the future. Setup I first had to download Go on to my computer. Downloading it via the Go site didn't work on my computer -- it kept hanging and freezing. I ended up trying to install it via Homebrew. When you install Go, you also have to set up a…

Continue reading...

Facial Recognition in JavaScript using Tracking.js

Earlier this week, I saw a really cool article about how to create Snapchat like filters in Python. I was curious whether similar opensource technology existed for the frontend. I found a couple resources: Tracking.js clmtrackr ccv headtrackr I was really excited that this data-sciencey technology existed on the front-end instead of just in more traditional data science languages like Python or R. I thought all of the above projects were very interesting, and they all had relatively similar star-level's on GitHub. I decided to use Tracking.js because the documentation was really good, and there were a bunch of examples which, for me is the easiest way to learn! I do wish there was better documentation on what was going on behind the scenes with this library -- I'm not sure what…

Continue reading...

Socket.io: Making Web Sockets a Piece of Cake!

This week, I decided to learn about websockets because they are super cool. According to MDN , websockets “make it possible to open an interactive communication session between the user’s browser and a server.” In other words, you can build applications where multiple users can communicate in real time pretty easily using websockets. One of the best known JavaScript libraries to implement websockets is Socket.io , so I decided to use it for my project. Let me just say, Socket.io is amazing. It made writing an application with websockets super simple and fast, and I didn’t need much extra code — it probably, in fact, was easier than making a simple AJAX request. The Learning Process I started by going through the tutorial on the Socket.io website — in about 20 lines of code you have a…

Continue reading...

How I Re-Wrote my Portfolio Site

This week, instead of learning one new thing, I got a little bit obsessed with re-writing my portfolio site . I decided to write a blog post about that process and the things I learned along the way instead of the typical article on one technology. I used three tools that I haven’t done a ton with in the past during this project: P5.js, CSS animations, and FlexBox. Earlier this week, I noticed an animation that I liked on the Creative Coding Club’s website . The “Creative Coding Club” title moves dynamically on hover. I fired up a Code Pen and started trying to recreate it. I ended up with a pretty different animation where the letters fell and then returned to their original place after a few seconds. I originally had a CSS animation that ran on hover; however, the animation ended after…

Continue reading...

Learning CSS Through Creating Art

Earlier this week, one of my co-workers found a single div all CSS image of Admiral Grace Hopper by Trish Katz on CodePen. It seemed like magic — I’ve written thousands and thousands of lines of CSS for projects I’ve worked on but this was on a different level! I immediately wanted to learn more. Single Div Grace Hopper I am not an artist in any way, shape, or form. I manage to make my sites look okay by keeping them as simple as possible and relying heavily on material design rules. Drawing things in CSS seemed like a challenge I couldn’t turn down! The Process I started doing research on CSS art and found some great resources such as: Sasha Tran , Coding Artist , and the #PureCSS hashtag on Twitter. Through these resources, I ended up finding a tutorial called “ How to Make Pure…

Continue reading...

How I (Finally) Built an App in Elm

Two years ago, I was asked by a company I was working for to learn Elm — a functional front-end programming language. I found the syntax strange and the functional programming paradigm difficult. We ended up moving to other front-end frameworks and eventually all but forgot about Elm. I recently taught a lesson on Redux and was asked a bit about Elm by my students. It prompted me to think about Elm and see if now, two years further into my programming career, the pieces would fall into place and I could figure it out. The Learning Process I decided to start with the documentation. Elm is pretty well known for their documentation, and many technologies with higher barriers to entry have to so that people use their tools. I started at zero with the tutorial on their website and quickly…

Continue reading...

Objection + Knex = Painless PostgreSQL in your Node App

It's no secret that I'm a total PostgreSQL fangirl -- I rarely see a use case for using a different database, especially with the support for array and JSON fields. I also love Node and Express for simple APIs (without auth). In the past, SQL support within Node and Express hasn't been perfect. I've been hearing great things about Objection , so I decided to try it out! Objection, which is built on top of Knex , uses the new ES7 class features to build a nice ORM query language for Node. ORMs allow you to use whatever programming language you are using for your app to query a database rather than querying in the natie language of the database (here we will use JavaScript to interact with our database instead of SQL). Since Objection is still really new, I will be walking through all of…

Continue reading...

Building Web Components with Vanilla JavaScript

Back in 2015, I was in the midst of learning my first front-end framework -- AngularJS. The way I thought of it was that I was building my own HTML tags with custom features. Of course, that wasn't what was really happening, but it helped lower the learning curve. Now, you can actually build your own HTML tags using web components! They are still an experimental feature -- they work in Chrome and Opera, can be enabled in FireFox, but they are still unimplemented in Safari and Edge. Once they fully roll out, they will be an even more awesome tool for building reusable components in purely vanilla JavaScript -- no library or framework needed! Learning Process I had a lot of difficulty finding articles and examples on web components written in Vanilla JS. There are a bunch of examples and…

Continue reading...

About

Hi! I’m Ali. I’m a (mostly) self taught software engineer, and my favorite thing to do is to learn new things.

The entire field of development is rapidly evolving — it seems like every day there is a hot new JavaScript framework or code challenge trending on Twitter. It gets really hard to filter out the noise and only stick to learning some of these technologies.

I’ve decided to temporarily throw caution to the wind and try to learn all the things — one thing per week in fact. This blog focuses on me learning one thing a week and then reporting back here on how it went.

Tags