Part 3 of Pagination: Telling the client if there is a next page available.
Read More
GraphQL Pagination with Connections
Part 2 of Pagination. Cursor-based pagination with Connections and a PageInfo object.
Read MorePhilip Glass - Glassworks
GraphQL Pagination
Step 1 of cursor-based pagination.
Read More
Inter Is A Free, Cross-Platform Alternative To San Francisco
Setting your CSS to use a system font will get you the beautiful San Francisco font on Apple devices, but your design will look much different on other platforms.
Use the Inter font to achieve a similar look to San Francisco but with cross-platform support.
Get if for free here: https://rsms.me/inter/
GraphQL Enums
Using enums in GraphQL to improve our role-based permission system.
Read More
Role-based permissions in GraphQL
My working notes while building a GraphQL server.
Read More
Why Use Custom Date Scalar Types in GraphQL?
My working notes while building a GraphQL server.
Read More
Password Reset in GraphQL
My working notes while building a GraphQL server.
Read More
Shotty Dark Mode Is Out Today!
I made some fun updates to the Shotty website to celebrate the launch of dark mode. Website built with Gatsby.
Read More
How to use Material Design SVG icons in React
Getting quality SVG icons into your React project is so easy with the Material Icons npm package. A quick explanation…
Read More
Use My Sketch File: Mac App Icon Template
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.
Focus on fonts: Klim Type Foundry
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’s new website
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 More
How 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.
