This style removes the "ugly" focus ring on inputs and links, but it means keyboard users can't navigate; it totally breaks the experience for them (and any non-mouse users) 😬
A thread with some solutions 🧵
First, some quick options:
• Leave them as-is! Outlines aren't so bad.
• Provide an alternative focus style, like changing the background color, or adding a border.
There's a nifty new pseudo-class you may not be aware of, though…
🌠 The `:focus-visible` pseudo-class is just like the `:focus` one, but it only matches when the browser determines that a visible focus state is necessary (eg. not a mouse user).
Keyboard users will see the focus rings, but mouse users won't.
In terms of browser support: It's missing IE and Safari, but you can fix this with a polyfill!
I've heard that this solution isn't perfect — there are certain mouse-users who still benefit from the focus indicator — but it strikes me as a pretty good solution, especially for folks who are having a hard time convincing their design team to keep the focus outlines!
This is one of those nice areas where we don't actually have to do much work to make things accessible — the browser already does this for us, built-in!
It's on us to preserve that behaviour, though! One way or another.
At a couple jobs now, I've been tasked with reviewing incoming applications, so I've read _a lot_ of cover letters. IMO, a lot of them miss the mark 😬.
Today I thought I'd share some cover letters I've written which led to an offer, + some cover letter tips.
This letter isn't my best work, but it tells a compelling story about why I'm passionate about the space + the organization. Could be improved by sharing more about my skills/background
Letter 2: Glitch
I'm proud of this letter. I cover why I care about their mission (online code education), their product (mentioning specific features), and why my skills/background are valuable to them in their mission / for their product.
So many folks have lost their job in the last 2 weeks :(
I've been writing a short book on software dev portfolios. It isn't ready yet, but I wanted to share some of the highlights, to hopefully help folks who are job-hunting again!
The most important stuff I know, in-thread 👇
Your developer portfolio is a showcase of your most important projects. I'm using the term "project" loosely, to include:
• Stuff you shipped on-the-job (if not restricted by NDA)
• Side-projects
• OSS contributions
• Volunteer work
Your homepage should list your 2-5 most impressive projects. You should have an image, a brief summary, and a link to a dedicated page to learn much more about this project.
I'm so glad I used MDX for my blog. It enables things that otherwise would not be possible with Markdown or a CMS, while still being a consumable data source (unlike having the posts be all-JSX)
For tangential information, I have a `Sidenote` component. It has a `title` prop which accepts JSX, so I can use any special formatting within it. Also a `type` which accepts info/warning/error/success.
Over the past couple years, I've had the opportunity to coach quite a few aspiring developers. I'm going to start sharing some of the things I've learned in this capacity, since I think it could really help folks looking to start their career as a dev.
First up: enthusiasm.
If you're looking for your first job as a developer, as a recent college/bootcamp grad or someome self-taught, one of the biggest assets you can bring is enthusiasm. You see this in a lot of corny job descriptions, talking about "hunger" (which always felt so primal/weird to me).
For non-college grads in particular, finding that first job can take ~1-2 months of pretty intense work. Lots of networking, cold emails, interview prep, portfolio development, all that stuff.
It can be draining, especially since it comes right after an intense bootcamp!
I know many of you work on side-projects, projects where you don't have the benefit of a product & design team. I'm betting a bunch of y'all have goals to create something new in 2020!
Thought I'd share a thread with all my favourite resources:
1. A long-time staple in my toolbox, @LeaVerou made this *amazing* tool that lets you visualize custom cubic-bezier easings. This is super helpful when the built-in timing functions don't feel right.