The Library
300 items
Nothing here. Try fewer words or another tag.
-
GitHub - deepfounder-ai/desigma at producthunt
deepfounder-ai/desigma: Free Figma alternative made on Rust
-
ArtCraft — Controllable AI for Artists
Everyone’s freaking out over this shit. Beware, Adobe!
-
JustDeleteMe
Just Delete Me | A directory of direct links to delete your account from web services.
-
The invisible mechanisms in your interfaces
Documentation of tons of micro interactions across a suite of apps
-
When you browse Instagram and find former Australian Prime Minister Tony Abbott's passport number
“Do not get arrested challenge 2020”
This is one of my favorite things on the internet.
-
getdesign.md
Copypasta component soup for making stuff look like other stuff without using the underlying solid infrastructure.
AI!
-
Why do enums transpile into weird, large JS?
Vanilla JS has no concept of enums, just primitives, functions, and objects, so transpilers do their best at turning it into a thing that behaves exactly like one. transpiles into: Big thanks to my team’s tech lead for…
Includes code, 9 lines
Continued on the note page → -
atipo foundry
It is a crime how the most talented foundries give away their typefaces for prototyping and I am very ok with it
-
How People Use ChatGPT
10% of the world’s population is crazy. Findings make sense: very good at helping me do stuff, not replacing anything I do entirely
-
https://noahburney.net/
iconic, honestly. idk that it’s as good as 2016 bgrins.net but kinda close, why do i even bother designing shit
-
Design System Deviation is a Signal
“This is where posture matters. If your design system team acts like the UI police, you’ll get silence. But if you treat deviations as the start of a conversation, as evidence of unmet needs, you’ll begin to build trust with your consumers.”
”Deviation isn’t usually the problem, it’s the evidence of one.”
-
Renaming a branch, i.e., `master` —> `main`
git branch -m master maingit fetch origingit branch -u origin/main maingit remote set-head origin -agit remote prune origin -
How to give a great product design portfolio presentation
The GOAT on the subject as far as I’m concerned. I think it’s actually a good idea to send this to candidates in advance to a) set them up for success and b) make sure they’re actually doing their homework. S/o to Duncan for this one
-
Smelly fucking nerds
Just some really fabulous Internet lore. They hate us cause they ain’t us
-
Should I use a carousel?
The quick answer: no
The longer answer: use a gallery instead
The longer longer answer: the fuck’s the difference?
Carousels don’t show the user what all of their options are. Statistically, the first slide receives 84% of the clicks… meaning only 16% go to the stuff users can’t see. Check more stats here.
A gallery by comparison shows image previews of the other options. Steam is a great example of a gallery that shows image previews and works well.
-
Screenshotting things
Shift + cmd + 3: screenshot the entire pageShift + cmd + 4: screenshot a section of the page that you selectShift + cmd + 4 + space: screenshot a window that you select (gives you a lil’drop shadow as well)
-
Why use HSL in your next design system?
Hex codes and rgb(a) both operate on thinking about color in terms of red, green, and blue color mixing—not terrible, very elementary school art class, could be worse, but also not great. HSL thinks of color in terms of…
Continued on the note page → -
Ensure screenshots hang on Mac
defaults write com.apple.screencapture show-thumbnail -bool true
-
lucide.dev
Import icons one by one from a library à la shadcn philosophy. Reeeeaaallly nice not having to futz with a Figma library.
-
Define the index type (ts7053)
const myObj: {[index: string]:any} = {}alt:
Record<string, any> -
Apply style modifiers to text
Swift rolls out sizes out of the box (caption/body/headline/title1-3, etc.), and then you can use
.center,.weight(), and.italicfor the other styles:Text((textVariable)).font(Font.caption.weight(.light)).multilineTextAlignment(.center).italic() -
Animated background gradient
LinearGradient(colors: [.purple, .yellow], startPoint: animateGradient ? .topLeading : .bottomLeading, endPoint: animateGradient ? .bottomTrailing : .topTrailing) .ignoresSafeArea() .onAppear { withAnimation(.linear(duration: 10.0).repeatForever(autoreverses: true)) { animateGradient.toggle() } } -
Release notes
Really well done release notes. Wish I’d done this so well for my own portfolio, with notes on how things had been accomplished.
-
Checkout a git tag
git checkout tag-nameAlternatively, to make it into a branch:
git checkout -b branchName tagName -
Apollo mutation and caching reading
- Mutations in Apollo Client
- Understanding Apollo Fetch Policies
- Caching in Apollo Client
- Update Apollo Cache after a mutation and get instant benefits on your UI
-
Cell architecture
us000: free customers/the companyus001: paying customersus005: most important paying customers -
Change date variable in InDesign
1. Type \ Text Variables \ Output Date (this allows you to export PDFs with today's date). 2. Type \ Text Variables \ Define (this brings up the format changer). Date Format Shortcuts | Category | Type | Placeholder |…
Continued on the note page → -
Comparing JavaScript functions, i.e., “Is () ⇒ {} === () ⇒ {}?”
Most code goes through uglification/minification for production. To compare two functions as being the same you need to compare the actual content of the functions—for example, Function.toString() === Function.toString() will work despite an uglification process, becuase the .toString() function will return their contents and evaluate those
-
Drop things from database
rails cto open consolePersistedViews::ViewDocument.destroy_all« thing you want to destroy -
example globals.d.ts
interface UniversalComponentProps { /** Applies the classNames to the containing div of the component. **/ className?: string; /** Sets the theme for the component. Defaults to `theme--light`. */ theme?: "theme--light" | "theme--dark"; } -
Force a favicon refresh
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" /> -
How can I alias a default import in JavaScript?
import { default as NextImage, ImageProps } from "next/image"; -
How do you run a function over and over again at a particular time?
setInterval(() => { console.log('you can see me every 3 seconds') }, 3000); -
Infinite CSS Animations
You may have seen my other article about Ampersand Conference, which really just goes to show that I learned a lot. In any case, Trent Walton’s talk on various CSS tricks was very informative and I wanted to try out…
Includes code, 67 lines
Continued on the note page → -
Issues with local db
Try stopping Postgres:
brew services stop postgresqlTry stopping Redis:
brew services stop redisTry resetting the db:
bundle exec rake db:resetTry seeding the db:
bundle exec rake db:seedTry clearing your local cookie cache
Drop things:
bundle exec rake db:drop db:create db:schema:load -
next-view-transitions
See if your browser supports this spec yet (get your sh!t together Firefox)
-
Preventing grid blow-outs
Set a min-width. If you have a grid-fraction, use
minmax(). If it’s a flex element that is overflowing its parent, check that its parent isn’t a grid somewhere -
React Hydration Error
Make certain that the wrapping divs make sense, i.e., a
<p>should not wrap a<p>
-
Ruby decorators
Decorates can be used to set up switch cases between a ruby type and a typescript enum:
def status_indicator if object.reconciled? Types::StatusIndicatorStatusEnumType::COMPLETE elsif object.unreconciled? Types::StatusIndicatorStatusEnumType::INCOMPLETE ... end end -
setting up modules with sanity
Connect your schema files to the CMS: Add your newly created schema files to the schemaTypes definition within the CMS: src/lib/cms/schemas/index.tsx Make module available to the CMS page builder by adding the type to…
Includes code, 40 lines
Continued on the note page → -
Tailwind container queries not working
Make certain the container is a parent of the place you’re trying to apply classes
Debugging this:
-
Tailwind styles not loading
This article covers the basics:
- Tailwind CSS not working? It’s probably this…
HOWEVER, if you are still running into issues, make sure that
tailwind.config.tsandpostcss.config.jsare not in yourtsconfig.jsonfile. -
Why am I getting a React re-render 🤔???
keyandidfor React/Apollo respectively let each other whether or not to re-render state, causing entire refreshes in the UI when they’re not there
-
Why is grahQL spitting out random “true” or “false” strings into my generated `.gql` files?
You need to define custom functions in your ruby type to return true/false. Annoying but it’s how the system works
-
Command Line › Git › Aliases
Helpful ZSH Alias
If you use ZSH, you have access to the git plugin with a variety of git aliases. You can access these on the command line with ``
alias``. -
Command Line › Git › Common Problems
Change Date on Last Commit
If you want to change the date on your last commit (for either valid reasons or to maintain a streak, I don't judge) this is how you do it.
-
Command Line › Markdown › Cheatsheet
Github Flavored Markdown
This is the most common markdown syntax I use, so I reference this page a lot.
-
Command Line › Markdown › Tools
iAWriter
Hands down my favorite tool for writing Markdown. Looks great, works great, and syncs with iCloud so you can write on your iPad and iPhone too.
-
Command Line › Markdown › Tools
MacDown
Side-by-side editing for Markdown, which is great for code documentation. I prefer it over Mou because it's less of an energy hog.
-
Command Line › Markdown › Tools
Dillinger
An in-browser Markdown editor built with Angular that's quite nice.
-
Command Line › Terminal › Cheatsheets
lsof Survival Guide
Awesome SO thread on all the various things ``
lsof`can do. The most useful one for me has always been`lsof -i :22``, which allows you to find processes running on a certain port. (Occasionally I find that I have to kill ghost processes). -
Command Line › Terminal › Tools
iTerm2
I prefer iTerm over the regular terminal for a variety of reasons. It also feels pretty much the same if you're antsy about switching over.
-
Command Line › Terminal › Tools
oh-my-zsh
Themes and apps for the terminal. I currently use the Halloween theme.
-
Command Line › Unicode › Library
The Absolute Minimal Every Software Dev... Must Know About Unicode
Eye-opening: not everyone speaks English mother fuckers.
-
Design › Color
Design Tip: Never Use Black
Favorite design article ever, in my opinion. Why dark dark black is unnatural.
-
Design › Data › Inspiration
Earth: An Animated Map
Beautiful map with weather conditions, wind patterns, and ocean conditions.
-
Design › Library
A Brief History of Web Design for Designers
Fun gifs showing how ui design has changed over the years.
-
Design › Library
Before You Hire Designers
Before you hire designers, you need to clean up shop so that they can actually do their thing.
-
Design › Library
The Anatomy Of A Winning Product Critique
Structure for how to critique products well.
-
Design › Designers Whose Work I Love
Axel Herrmann
Detailed illustration work and a superb control of color.
-
Design › Designers Whose Work I Love
Timothy J. Reynolds
The lowpoly king. He's made me interested in cars even though under other circumstances I wouldn't give a damn.
-
Design › Icons › Resources
Simple Line Icons
-
Design › Icons › Resources
Chapps
-
Design › Icons › Resources
Tab Bar Icons
-
Design › Typography › Library
Typography Basics
No-nonsense explanation of letterforms. Weirdly, it's from one of my alma maters (not known for design).
-
Design › Typography › Library
Typeface Mechanics
Explains how font weights are almost never mathematically perfect because of optics with lots of examples.
-
Design › Typography › Beautiful Fonts
Calendas Plus
Gorgeous ligatures, pretty fucking obsessed right now.
-
Design › ui
The Right Way to Ask Users for iOS Permissions
-
Design › ui
7 Rules for Creating Gorgeous UIs
solid advice about how designers make things on-screen feel interactable.
-
Front End › D3 › Library
Square's Guide to D3
-
Front End › Javascript › Future of Javascript
Treeshaking with Dart
Explains what tree-shaking is and how the future of web dev needs it.
-
Front End › Performance › Progressive Enhancement
Performance As Design
-
Front End › Performance › Need to Be Vetted
React Server Example
-
Front End › Responsive Design › Library
Responsive Design Resources
Better round-up than anything I can put here, I assure you.
-
Front End › Sass › Library
Shame.css
Keep your hacks in a separate file where they're well documented. It just makes sense.
-
Front End › Sass › Library
Sass Tip: The Double Ampersand Selector
Fun tricks with the ampersand that I send to forget, noteably:
-
Front End › Sass › Library
All You Ever Need to Know About Sass Interpolation
How it works and some useful examples.
-
Front End › Sass › Library
The 30 CSS Selectors You Must Memorize
I reference this a lot - all of the ways you can reference different descendants.
-
Front End › Sublime
Using EditorConfig to Manage Coding Styles on Team Projects
We did this at a previous place I worked at and it worked pretty well - meant you never had huge commits because someone's editor had changed all the 2-space tabs to 4-space tabs.
-
iOS › iOS Development › Tutorial
Push Notifications
-
iOS › iOS Development › Tools
Node Push Notification Library
Great push notification library - worked as sort of a copy & paste-type situation for me which was pretty great. Also in combination with Ray Wenderlich's tutorial above, generating the keys was pretty simple using their documentation.
-
Mac › Application List › Design Programs
Sketch
It took a bit to get used to Sketch (the key commands are different from the Adobe programs and its strengths are very different from say, Photoshop) but I now use it exclusively for UI design and love it. It's worth learning in particular if you do or wish to get into app development as it's easy to export assets for XCode and Android.
-
Mac › Application List › Design Programs
Illustrator
The Adobe monolith for vector design and illustration. When creating icons/vector illustrations I still use Illustrator over Sketch as that's its real strength.
-
Mac › Application List › Design Programs
Lightroom
I use Lightroom for all of my photography corrections - it's built for it, as opposed to Photoshop.
-
Mac › Application List › Design Programs
After Effects
I use After Effects less and less over CSS animations/protoyping with code, but occasionally for more complex animations I'll use After Effects.
-
Mac › Application List › Design Programs
Photoshop
I only use Photoshop for photo manipulation/retouching these days (whitening teeth, removing blemishes, those sorts of things). I don't think I've started anything new it in in over a year but it's still a monolith in the community.
-
Mac › Application List › Design Programs
Sketch Mirror
Allows you to mirror your artboards/designs onto devices with the Sketch Mirror app on them, which is pretty nifty. There are other apps you can find that do this for Photoshop that ou can find with a quick google.
-
Mac › Application List › Design Programs
LiveSurface Content
I used this a ton while preparing assets for my portfolio. It's a huge list of templates for product design display (imagine, "I need to get this poster design on a huge banner in NYC to show it off"). The selection of free templates is fairly limited but I was happy to pay the $10/month to get the whole lot.
-
Mac › Application List › Development Programs
Dash
Offload documentation. I bought it because I was tired of waiting for the docs to load. When you're without internet it beats nothing by a long shot.
-
Mac › Application List › Development Programs
IconSlate
-
Mac › Application List › Development Programs
iTerm
-
Mac › Application List › Development Programs
JPEGmini
-
Mac › Application List › Development Programs
MacDown
-
Mac › Application List › Development Programs
Patterns
-
Mac › Application List › Development Programs
Screenhero
-
Mac › Application List › Development Programs
Sublime Text
-
Mac › Application List › Development Programs
VirtualBox
-
Mac › Application List › Development Programs
Xcode
-
Mac › Application List › Miscellaneous Productivity Apps
Calibre
-
Mac › Application List › Miscellaneous Productivity Apps
GifGrabber
-
Mac › Application List › Miscellaneous Productivity Apps
iAWriter
-
Mac › Application List › Miscellaneous Productivity Apps
Pocket
-
Mac › Application List › Miscellaneous Productivity Apps
Spotify
-
Mac › Application List › Fun Stuff
Simple Comic
-
Mac › Application List › Fun Stuff
sixtyforce
-
Mac › Application List › Fun Stuff
Year Walk
-
Mac › Application List › Not Out Yet, but Puchasing Second It Is
Night In The Woods
adventure game that's truly beautiful.
-
Mac › Applications › AppleScript
AppleScript
-
Theory › Regex › Tools
Patterns
Mac app that does the same thing, although this is based on language support.
-
Work › Advancement › Work Smarter, Not Harder
The Art of Not Working at Work
Who are the people who aren't passionate?
-
Work › Advancement › Sticky Points
How to Respond When Someone Takes Credit for Your Work
Man, adults shouldn't have these problems.
-
Work › Advancement › Odds and Ends
How to Be Polite
-
Work › Public Speaking › Proposals
Speaking.io
A site completely devoted to helping you speak publically.
-
Work › Public Speaking › Proposals
Risk When You Assume Your Audience
Other people don't know everything you do.
-
Work › Public Speaking › Writing
Words to Avoid in Educational Writing
Things you shouldn't say in education writing and why.
-
Work › Work Life Balance
7 Strange Questions That Help You Find Your Life Purpose
tl;dr: like anything else, you have to work for it.
-
Work › Work Life Balance
A Short Lesson in Perspective
The importance of giving design breathing space.
-
Work › Work Life Balance › Why You Should Take Breaks
Programming Sucks
Programming is hard and it's frustrating for even the best of the best - this article always is a good reminder for why I need to be allowed to chill out sometimes.
-
Work › Work Life Balance › Work Better
The Problem With Positive Thinking
It doesn't necessarily get you to your goals faster.
-
Work › Work Life Balance › Tools
Working Not Working
Freelancing website. Seems pretty rad, but you need an invite :cry:
-
Work › Working Remotely
Slack
Super awesome communication tool. Lets you have dedicated chatrooms and private message threads, and then as many teams as you'd like.
-
Work › Working Remotely
Screenhero
Screenhero's integrated with Slack now, which is rad. Lets you remotely control other people's computer screens while the two people video chat. Both people can still interact with the screen, which makes it perfect for remote peer-programming.
-
Finances › More Established Tools on the Market
eTrade
-
Finances › More Established Tools on the Market
Fidelity
I have my 401k here because that's how my employer set it up. It's definitely a clusterfuck of information
-
Finances › More Established Tools on the Market
Vanguard
-
Typography › Type History + Resources › Emojis
Emoji: A Lovely History
-
Typography › Type History + Resources › Emojis
Emoji: Looking Good!
-
Typography › Type History + Resources › Emojis
Inside "Emojigeddon": The Fight Over The Future Of The Unicode Consortium
-
Typography › Type History + Resources › Tools
opentype.js
Read and write OpenType fonts using Javascript.
-
Empathy › Horrific Examples of Bad UX
How Bad UX Killed Jenny
Why we need more UX designers in 'untouched' (not necessarily sexy) fields.
-
Empathy › Other Cultures
Chinese Mobile App UI Trends
Super fascinating look at how different app design is in China from language concerns to what their app ecosphere looks like.
-
Empathy › Other Cultures
Un web en voie de développement
Explanation on the state of internet access in Senegal and how the large sites that have become the norm are completely inaccessible to many.
-
Stuff That Starts Debate
The Ugly American Programmer
Should everything be in English? (I don't think so, but my native tongue is English, so am I even allowed to get up on a soapbox about it?)
-
Minorities in Tech › Companies Doing Good Work
Etsy’s Trying to Fix Tech’s Women Problem. Why Aren’t You?
"We need to throw out the hoodie-wearing boy-genius and build a new archetype."
-
Minorities in Tech › Companies Doing Good Work
Clef's Inclusion Handbook
-
Minorities in Tech › WTF Moments
Diversity Efforts in Need of Funding
Nice little list from @daneden.
-
Minorities in Tech › Inclusivity
Alcohol and Inclusivity: Planning Tech Events with Non-Alcoholic Options
-
Minorities in Tech › Inclusivity
Can We Stop Equating Success in Engineering with Acting Like a Man
Succinct steps on how to
-
Minorities in Tech › Inclusivity
Technical Interviews Are Bullshit
They tend to celebrate biases and prove only that you know Big O-Notation on a whiteboard - if that isn't what your company does, than who cares?
-
Minorities in Tech › Inclusivity
What Google Learned From Its Quest to Build the Perfect Team
I'm not sure that they noticed that stronger teams are diverse ones.
-
Minorities in Tech › Black Cause
Where Are The Black Designers?
3eighteen media's in-depth explanation as to why blacks are so poorly represented in design.
-
Minorities in Tech › Hiring
25 Tips for Diverse Hiring
Mostly iterations on: Expand beyond your network.
-
Minorities in Tech › Personal Stories
The Other Side of Diversity
One woman describing the struggles of never fitting in in the tech scene.
-
Minorities in Tech › Personal Stories
Jesus and the Uber Driver
Middle-class people shouldn't get to rate the lower class.
-
Minorities in Tech › Personal Stories
Tweaking the Moral UI
Personal story about why codes of conducts are so important.
-
Minorities in Tech › Odds and Ends
Dear Young Man of Color
-
Needs to Be Vetted
Speed Design with Illustrator
-
Needs to Be Vetted
Foundations of Computer Science
-
Needs to Be Vetted
Butterick's Practical Typography
-
Needs to Be Vetted
JSConf 2014
-
Needs to Be Vetted
WURFL
-
Needs to Be Vetted
Semantic SASS
-
Needs to Be Vetted
SQLite vs MySQL vs PostgreSQL
