In this post I explain line-by-line what happens between a click, state change, and re-render of a tic tac toe game from the official React documentation. The goal is gain a deeper understanding of how React components, props, click handlers, state, render, and other class methods all work together to allow time travel in a user interface.
Read More
Film Photography: Bangkok, Thailand. Pentax MX | 28mm | Fujicolor C200
New Dribbble Shot: Playing around with color.
Playing with an earthy, desaturated color palette. View on dribbble.
Removing jQuery from TodoMVC's edit Method
I'm going through the exercise of removing jQuery from TodoMVC's jQuery example. My strategy is to first remove it from the core methods like create, destroy, toggleAll, renderFooter, edit, etc.
I will then remove it from the bindEvents method.
Today I removed jQuery from the edit method. I should note that there is one place where jQuery is still touching the edit method: edit takes an argument e which is a jQuery event. I've left this as is until I get to removing jQuery from the bindEvents method.
Here's what the edit method looks like with jQuery:
Read More
"Designing Fluid Interfaces" - A Great Talk From WWDC 2018
Watch the video here: https://developer.apple.com/videos/play/wwdc2018/803/
Improving the render method in TodoMVC
How To Add An Animated GIF to a Still Image
Today I had to figure out how to put an animated GIF inside of a static image. I wanted to show an animation in a larger context of UI and other static content. Photoshop isn't my favorite tool, but was necessary here, so I was lucky to come across this helpful step-by-step tutorial on how to place an animated GIF inside of a larger (static) composition. After going through this process I was able to create a realistic mockup that included motion inside of inVision.
How Underscore's mapObject Works
In today's exercise I look at how the source code works for Underscore's mapObject function. I still need to figure out what the hell _.cb does. One step at a time.
How to Limit The Number Of Times A Function Can Be Called in Javascript
A quick example.
Read MoreTutorial: How To Create a Range Of Numbers with Underscore.js (includes video)
With Underscore's range function, you can easily generate a range of numbers customized to your liking. You could do the same thing with a basic Javascript for loop, but _.range is a faster and easier to use alternative.
Read on for a tutorial on how to use range along with a video walkthrough of the source code.
Read More
10 Useful Things You Can Do With Underscore.js
Underscore is a widely used library of Javascript functions that help you do common things quickly and easily. There are a whole bunch of functions that help you manipulate arrays and array-like objects, which I'll focus on here.
Read MoreAn Oldie But Goodie
Mastering Javascript Fundamentals: formatColumn, Thinking Recursively, and Broken Tests
A summary of the last few days.
Read More
Mastering Javascript Fundamentals: unformat, new RegExp
Summary
Use regular expression constructors to dynamically use variables in our regular expressions.
Chain together several .replace methods to strip out cruft.
Return a nice clean number.
Mastering Javascript Fundamentals: Lookaheads and backreferences
Mastering Javascript Fundamentals: Regular Expression Capture Groups
Summary
We can use Regex to do Find and Replace type of actions using .replace.
Capturing groups () let us refer to pieces of you match within .replace using $1, $2, etc.
We can refer to our whole match with the token $&
Mastering Javascript Fundamentals: Regular Expressions
Summary
Regular expressions let us look for matches in strings.
Specify options using a concise syntax.
Allows us to do certain things much more easily than in Javascript.
Put the thing we want to match in between // in 'string'.match(/s/)
. will match any character: 'string'.match(/./)
The global flag, g, will give us multiple matches (find all): 'strings'.match(/s/g) // ["s", "s"]
The pipe | will look for a or b: 'abc'.match(/a|b/g).
Specify or by putting our matches in brackets: 'abc'.match(/[abc]/g)
Specify ranges with the - symbol: 'abc'.match(/[a-z]/g)
Combine ranges: 'abcDEF123'.match(/[a-zA-Z0-9]/g)
Use the negation operator, ^, to get things that don't match our specified values: 'abc123'.match(/[^a-z]/g) // [123]
Match consecutive characters rather than single characters, using quantifiers {}: 'string'.match(/[a-z]{1, 20}/g)
Leave of the upper limit to go to infinity
'string'.match(/[a-z]{1,}/g)
Or just type: 'string'.match(/[a-z]+/g)
Match uppercase or lowercase by adding the case insensitive flag, i: 'string'.match(/[a-z]/gi)
Mastering Javascript Fundamentals: Recursively Mapping Arrays
Summary:
We can use recursion to solve unknown depth problems
Here we use it format values within arrays while still maintaining the original array structure.
We combine .map and a recursive call within .map's callback function to do this.
Diagramming the call stack is great way to understand and visualize the journey to the base case.
We can then use the debugger to let that journey play out for real and check our understanding.
Mastering Javascript Fundamentals: Recursing Through the DOM
Summary
Recursion is a great technique for working with the DOM, since the DOM has unknown levels of depth, and lots of nested elements.
We can create a function forEachChildElement that runs a callback on each element of the DOM.
Mastering Javascript Fundamentals: Recursion
Summary
Recursion is when a function calls itself.
Just calling itself will cause stack overflow.
We need a recursive case and a base case to ensure that the function stops calling itself at some point.
We can use this powerful concept to repeatedly call a function until we get to the base case, which returns a useful value, and then we come back out with that value, informing each step out until we have a final return value.
We can see nice examples of this with factorials, and unwrapping arrays.
Examples inside.
Read More