I darkened the MacBook so it doesn’t jump so much in dark mode. I’m happy with the subtle shadows around the device.
Getting quality SVG icons into your React project is so easy with the Material Icons npm package. A quick explanation…Read More
Designing app icons for Mac is a tedious process because you have to export the icon at various sizes to match Apple’s specifications. If you want a drop shadow on your icon, you have to take extra care to make sure the shadow isn’t clipped.
I made this Sketch template to help make it easier. The artboards are already set up to export all the required sizes. Get it for free here:
This is the source file I used to create the app icon for Shotty.
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/
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/
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 More
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:
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 More
Use the table of contents in the description to skip to whatever section you’re looking for.
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
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
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.
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.
A quick example.Read More