Spinning Animation Cards

I created these four “spinning” animations using React, TypeScript, and CSS. These are pretty basic tools, so you could say I did it the hard way… for fun, and to get better at tools I use in my job. If I do more animations I may look for free or inexpensive software to speed up the process.

Almost all of the cool things I know about CSS, I learned from Josh W. Comeau’s excellent course, CSS for JavaScript Developers. Josh is a very gifted teacher and it’s definitely the best online course I’ve ever taken.

For fellow geeks, the source code for this React app is here on GitHub.

Standard

Code testing sites: A couple recent favorites

regex101.com

I learned about this site when looking over a coworker’s shoulder as he tested a regular expression. This is a great site for understanding, debugging, crafting, and testing regular expressions. Some highlights:

  • You can choose to edit/test regular expressions using PHP, JavaScript, Python, or Golang regex syntax.
  • You can enter a regular expression and see (through syntax highlighting) whether it is valid and how it breaks down.
  • The site gives you a character-by-character explanation of what the regular expression means.
  • You can type (or paste) sample text into the Test String text area, and see how the regular expression matches it.

repl.it

There are a number of online tools for interactively running code line-by-line and testing snippets of code. They come in handy when you want to see how some code will work without having to install the compiler/interpreter on your system. repl.it is impressive for the number of languages it supports. (Its name, REPL, is short for Read-Eval-Print Loop, the loop that reads a line of code, evaluates it, and prints its result.) repl.it may not be the most full-featured REPL tool for your favorite language, but it’s handy if you occaisionally want to try out code in a language you aren’t super-familiar with.

Tip: When you’ve typed in some code in the repl.it code editor, you can press Ctrl-Enter to run it. (This shortcut works in many other online editors.)

Standard

Learning AngularJS: Codecademy vs. Code School

AngularJS Logo

AngularJS seems to be leading the pack of JavaScript MVC (or MVC-like) frameworks. This is not too surprising, considering that it is backed by Google and is one of the easiest frameworks to get started with. I have been exploring Angular using two popular e-learning sites, Codecademy and Code School. Both are excellent sites. So far I have used Codecademy a lot more than Code School, mainly because Codecademy is free, whereas Code School is subscription-based. However, Google has sponsored the introductory Angular course, making it free.

My first experience with Codecademy was very positive. I wanted to learn Ruby on Rails for an internship at Workbar. I quickly got hooked on Codecademy’s Ruby lessons and I completed the entire Ruby track within a couple of days. Learning Ruby was a lot of fun, partly because Ruby is such an elegant and powerful language, and partly because Codecademy does a great job of concisely explaining the concepts and leading the learner through increasingly difficult programming challenges.

My first impression of Code School was not as positive. I worked my way through the “Rails for Zombies” course, one of Code School’s early courses. The cutesy theme song and zombie jokes seemed superfluous. Also, I was not initially a fan of the video-then-challenges format, as a fair amount of the video time was spent explaining concepts with which I was already familiar. (It’s easier to skip over sections of text than it is to skip through parts of a video.) Looking back, though, I have a greater appreciation of Rails for Zombies. It challenged me more than any of the Codecademy material, and its videos did a good job of explaining important concepts and demonstrating the benefits of using Rails (for example, by showing a naĂŻve approach to solving a problem followed by a more elegant “Railsy” approach).

(My favorite introduction to Ruby on Rails, though, is the Ruby on Rails Tutorial book, available online for free. It goes into much more depth than any other free resource I know of.)

Fast-forward to today: learning Angular. Having spent a couple hours on the Code School tutorial and less than an hour on the Codecademy tutorial (so far), I prefer Code School’s approach to teaching Angular.

Codecademy starts out by prompting you to type a few sections of code into the online file-system exactly as they are shown in the tutorial column. Then you press “Run” and the magic happens, and Codecademy follows up with a brief description of some of the main concepts that were used to make the magic work. And I do mean brief. Of course, eventually these concepts get explained in more detail, but who likes typing in code without understanding it?

Code School, on the other hand, presents one or two concepts at a time, with fairly detailed and memorable explanations, then dishes out a few appropriate exercises. To be able to do the exercises without using the “hint” button, it’s important to either take notes or have a photographic memory. Or better yet, build an Angular application on your own computer as you make your way through the videos. This brings me to another strength of the Code School tutorial: from the beginning, it presents all the steps you need to set up Angular (and Twitter Bootstrap) on your own system, assuming you are already running a web server. So this tutorial makes it easy to end up with a working web application that I typed in myself. I feel that the process of building an application on my own computer as I work through the tutorial is one of the best possible aids to understanding and remembering the concepts. A final upside of Code School is that I can buy access to additional content after working through the initial tutorial. But at $29/mo. I’m a bit hesitant to sign up.

So my verdict is:

Codecademy’s AngularJS tutorial may be your best bet if you don’t want to set up a web server on your own computer but want to get a feel for what AngularJS can do. The caveat is that you may not retain enough of what you are learning to build a simple Angular app on your own.

Code School’s tutorial, “Shaping up with AngularJS,” may be a good choice if you have a web server running on your own computer and don’t mind building an Angular app on your own computer as you work through the tutorial. I feel that this approach leads to a greater clarity and retention than you can get from either tutorial on its own.

Standard

An upcoming vacation

Happy New Year to all my devoted fans who regularly visit this website!

I am looking forward to visiting my sister and her family in Escondido, CA (a suburb of San Diego). I will be there from the 17th to the 26th of January. If you want to get in touch with me, I’d suggest calling or texting as I may not check my email often while I’m away.

Standard

December in Boston and St. Porphyrios

St. Porphyrios

St. Porphyrios

Last week the temperature dropped from a high of 63 degrees to a high of 33 degrees in one day. The low with wind chill was 7 degrees. Not too unusual for November in New England, but I have not adjusted from the perpetual sunshine of San Diego.

Today is the first day of December, and tomorrow will be the first celebration of the feast day of St. Porphyrios, previously known as Elder Porphyrios of Wounded by Love fame. Wounded is definitely one of my favorite books of recent years. In it, St. Porphyrios talks about his life and experience: the central topic of the book is God and communion with Him. In St. Porphyrios’ opinion (as well as my own) the solution to most of life’s problems is to turn to God, both in prayer and in relationships with others through which God shows us His love.

Elder Porphyrios was glorified as a Saint on November 27, 2013.

Standard