Extending Paul Irish’s comprehensive DOM-ready execution
I've been using this method for a long time, to execute scripts on specific templates. Jason's interpretation comes in handy when implementing using vanilla javascript.
Website strategy & development
I've been using this method for a long time, to execute scripts on specific templates. Jason's interpretation comes in handy when implementing using vanilla javascript.
Links to files can be a surprise for users, especially those who cannot use, do not notice, or do not have the status bar to show a link destination. Some users may appreciate knowing a link points to a file, sometimes even a particular file.
There's an impressive depth of consideration here for such a visually small component. For bonus points, substitute toast(s) for any other website feature you can think of:
Toasts are a pattern best used carefully and only after testing with users — your users and their technologies. If you opt to build toasts, be certain your timelines account for accessibility testing. If you instead use toasts from a third-party, then be even more certain your timelines account for accessibility testing and potentially changing to a different third party solution.
I spent some time today moving to this setup. This post and the links contained within, were a great help. It feels right to have the files live in their natural location without the need for symlinks for the purpose of version control.
Even though I think that blogging is essential to becoming a better writer, the process around the writing can be super annoying and right now requires a ton of manual work for me. Over the past couple of weeks I’ve noticed how this process is actively hindering me from sharing links, quick ideas, or even embarassing relationship melodrama
Robin's template has helped me create my own workflow to remove friction from the process of sharing links.
A painfully obsessive cheat sheet to favicon sizes/types.
Git is hard: screwing up is easy, and figuring out how to fix your mistakes is fucking impossible.
This is useful when deploying to WP Engine's Git whilst ensuring our repository's master branch is kept up-to-date. Relying on the developer to remember two pushes is a potential blindspot of the standard workflow.
Unlike responsive typography, which changes only at set breakpoints, fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which we have a practically infinite number of screen sizes to support. Yet, for some reason, it is still used far less than responsive techniques.
by default, Gravity Forms saves files to /wp-content/uploads/gravity_forms and stores their URLs. ACF on the other hand, saves files to the WP Media Library and stores their attachment IDs.
As it turns out, a reasonable set of styles can create a consistent and attractive
select
across new browsers, while remaining just fine in older ones too.
And, if you want to become a bit better at it (whatever “it” is) then you just keep doing it and don’t quit. I tell my two children this all the time and I add this point because I think it’s important and true: Repetition can make you better but it won’t make you perfect and it doesn’t guarantee that you’ll be the greatest.
It amazes me that new techniques with relatively mature features are still cropping up. This is especially true when they're so practical as well.
This approach doesn’t fully respect the aspect ratios of photos (but it’s close) and occasionally leads to some weird results, but I absolutely love the simplicity and flexibility of it all.
When I’m running interviews I’ll always ask “name something that you’ve done that was 100% you - something you had the idea for and then made, doesn’t matter how big or small”. You’d be surprised how many people pause at this question and struggle to think of an answer. Most people in fact will answer this question by talking about a project that they were a part of.
Nice little monochromatic color palette generator, to save on the tedium.
In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS browser compatibility issues are much less likely than they were in the old IE 6 days.
button placement can make or break a form, and a form can make or break a user’s experience. That’s why it’s essential to get it right.
So much gold in this article that translates perfectly to website strategy.
plan for adoption, rather than just deployment, and focus on user success.
A nice visual approach to planning out a website.
Jason Pamental proposes letting an editor choose from a prescribed number of layouts, to best represent the article content. The markup remains unchanged, with a parent class dictating stylistic changes — all very CSS Zen Garden.
Not willy-nilly-all-over-the-place different, but clear, purposeful variation that’s built into our design systems so they fit within the whole. This, coupled with a bit of per-page design flexibility afforded us by technologies like CSS Custom Properties and variable fonts, gives us the kind of layout and design flexibility that make publications like Vanity Fair so good.
A sign-up form I'm working on requires multiple AJAX requests to an API on form submission. The receiving server did not like being hit with parallel requests and the operation failed with "MIME type mismatch errors" in the dev tools console. After much debugging pain, changing course to sequential calls fixed this.
The code below makes uses of Promises in jQuery to wait for ajax calls to complete before starting the next call in the sequence. All the ajax calls are made to the same API, but the data sent in the call are defined in the items array.
Thank you Tobias:
To spare you the time, I’ve compiled this practical reference guide with some of the most common jQuery patterns and their equivalents in JavaScript.
Nice little technique for multiple fancy borders.
The hamburger menu is so engrained in the minds of clients and those that make websites, it's not going anywhere anytime soon. That's a shame as the stats speak for themselves:
hidden navigation (hamburger menu) significantly decreases user experience both on mobile and desktop. On mobile, people used the hidden navigation in 57% of the cases, and the combo navigation in 86% of the cases, i.e. 1.5 times more!
If you want your content to be seen, reduce the barriers to entry.
- Obey the Law of Locality
- ABD: Anything But Dropdowns
- Pass the Squint Test
- Teach by example
As most of my projects are WordPress based, the much maligned jQuery is still very much in the toolbox. Here's a nice overview of different scenarios involving Promises. The section on multiple dynamic ajax calls came in handy recently.
Clever technique using <iframe>
's srcdoc
attribute, which I'd never heard of prior to reading.
I'm giving this plugin a go for syntax highlighting and initial signs are good. The server-side rendering is a selling point compared to other solutions that load an additional JS file and result in FOUT. It's also straightforward to change the colour theme.
I'm thankful for posts like this popping up in my RSS reader — a reminder that there are things we can do to respect our environment.
it’s still vital we do more at home because individual choices and actions will compile into collective pressure that cannot be ignored. Everything positive is protest.
I'm seeing more and more personal sites echoing these sentiments, including my own:
In typical perfectionist fashion I was planning on getting my own site looking exactly right before revealing it to the world. But, as I've been saying recently in one of my talks, perfect is the enemy of good. Getting something up is infinitely better than getting nothing up at all!
Natty animated logo, also.
A solid tutorial that helped guide the way on a recent project.
Squeezing that extra bit of performance juice out of the can:
At Google I/0 2019, we announced that we would finally be bringing support for font-display to Google Fonts. I'm happy to share this is now available in production for all Google Fonts users via the new display parameter.
A thorough dive into the implementation of accessible icon buttons.
Ah, the ol' hamburger icon:
Putting aside the UX side of the coin and whether or not an icon alone is enough to convey meaning and functionality to users, many implementations of these buttons today lack the proper accessibility that makes them meaningful to users of assistive technologies.
A natty little tool for generating accessibile text colours from a user-defined background colour.
An empassioned plea that we take aim at favicon madness:
The ideal situation, my wish, is that we, our field, define and push for a simple standard: a favicon.svg (with browsers falling back to favicon.png and then favicon.ico) that sits at respective site root and is not required to be referenced from the markup.
A nice change of pace to read a general productivity article from someone working in development.
How many of us are guilty of sacrificing quality time elsewhere for the sake of work, especially easy as an freelancer:
what you work on informs your values. You may think it’s no big thing to work overtime for a little while, but something will be sacrificed with this decision.
where you invest your time is not just about what you value, but also what you don’t value.
Countering the view that a productive session stems from tackling the biggest/hardest/most valuable task first:
Part of the reason we do the small things first is that morale is important. I feel more incensed to get my other work done because being productive feels good — there's a small dopamine rush associated with every check.
I use Bullet Journaling for similar sense of accomplishment:
Alice Goldfuss: "I have a kanban board for my personal life todo list and a cron job that empties my Done column and texts it to me every week, so I feel accomplished"
Knowing yourself is the crucial factor in any personal productivity system:
Most of these systems work for me because I know my strengths and weaknesses and I play to them: I work more efficiently when things are broken down into steps. I work best when my work has the most meaning, and I remove the cruft. I work best when I work along with, not against, my energy levels, where possible.
And for days like today:
There’s one more thing I haven't addressed yet: forgiveness. You’ll be more productive on some days (or hell, even years!) than you will be on others, and that's OK. Life is full of ebbs and flows.
An impressively thorough browser extension for analysing webpage accessibility. Wish it was available for Firefox, but worth opening Chrome for.
CSS Subgrid will make use of Grid way more practical so it's great to see it's one step nearer, largely thanks to the efforts of Rachel Andrew:
For the CSS Grid fans who have been following along, last night the subgrid value for grid-template-columns and grid-template-rows landed in Firefox Nightly.
All my writing is done in Vim using Markdown, so yes, pretty magical:
If you copy and paste markdown into Gutenberg, it will automatically convert the whole document to blocks. All your links, blockquotes, code snippets, and other formatting are nicely converted to their proper Gutenberg blocks. It’s pretty magical.