If you’re looking for some high-quality fonts that are unique and aren’t overused, take a break from Google Fonts and check out Klim Type Foundry. They have some really well-crafted typefaces in a variety of styles. I love the video on the homepage as well, an interesting way to bring some feeling to a site about fonts: https://klim.co.nz/
Shotty has a new website built in React & Gatsby →
I’m proud to launch Shotty’s new marketing site, which was built in React with Gatsby. I felt it was important to move Shotty’s marketing to its own domain separate from my personal site. This way I could have some fun developing the brand, adding animations, and building the kind of first-touch experience that could speak to the simplicity and ease of using Shotty.
In the coming weeks I’ll do a few blog posts here describing how I did certain things when designing and coding the new site, such as the sticky header that adapts its size based on the scroll position.
I’ll also continue to make updates and improvements to the site. It’s a fun and simple site where I can play with new animation techniques, so I look forward to future releases.
Check out the new site! https://meetshotty.com/
Tutorial: How to add an official "Download on the App Store" badge to your website in 3 steps
If you’re selling an app, you’ll want to use the official “Download on the App Store” button provided by Apple. This will give you more credibility, so users know they’re dealing with a legit app approved by Apple. Luckily, you can add this button to your site by simple copy/pasting some HTML from Apples handy iTunes Link Maker Tool.
Read MoreHow to get past wifi limits on public wifi networks
Ok, before I jump into the how-to I just need to say: please don’t use these powers for evil! Don’t use this to screw your local mom and pop coffee shop out of a scone purchase.
With that said, sometimes you’ll find yourself in a bind where you’re on a public wifi network, like at an airport, and you’re trying to finish your work, and suddenly you get a popup saying you’ve exceeded your limit.
If you must reset your limit so you can do work on the internet that helps other people and is generally positive, here’s what you can do:
React talk: Recomposing your React application by Andrew Clark
Tutorial: How to use SVGs from Sketch in React
It’s easy to create SVGs in Sketch. But how do you get them into React so you can use them? Better yet, how can you use them in a way where you can change their color, shape, and other properties based on user input? It’s surprisingly easy.
Read MorePricing Design Work & Creativity
Google Analytics Tutorial for Beginners
Use the table of contents in the description to skip to whatever section you’re looking for.
Understanding State in React
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 MoreFilm 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 More10 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 More