/topic Each week, the Web Applications Team (WAT) at WillowTree uses Slack to post interesting articles, share development tricks, and discuss technologies used in our world. Here’s a breakdown of what we talked about this week.
Anime.js is a new animation engine that can animate any property or attribute in CSS (including transforms), a SVG, the DOM, and a JS Object, as long as it contains one numerical value. Check out these examples on CodePen!
webpack: Development vs. Production Code
Webpack can be a frustrating sequence of configurations, and it seems that no one has written the one savior blog post on how to implement it. I’ve personally found this beginner’s guide to be a solid starting point. It has a webpack boilerplate on github , explanations about the different sections of configurations, and package recommendations. It even covers strip loaders , which remove development code from production code. Unfortunately, it follows Webpack 1.x, rather than Webpack 2.
@Codrops: CSS Text Inputs Effects transferred to a React Native library
React Native Textinput Effects apply animations to the text input line, float input labels above content, insert icons in the input field when typing, and much more. This library was inspired by the Text Input Effects github repository created by Codrops , a web design and development blog.
@record.terminal: Putting together a presentation? Want a cool installation gif on your github?
Asciinema is a program that allows you to record your terminal. You can embed the link to the cast or the player itself on any blog post, markdown file, or presentation. As an added bonus, viewers can copy and paste content directly from the asciinema terminal.
@performance: High Performance Browser Networking
High Performance Browser Networking: What every web developer should know about networking and browser performance …the title speaks for itself. Ilya Grigorik wrote this book to discuss all things web performance. He offers the book for free on the web and a hardcopy is available online on Amazon.
ashley.joost joined #WAT-Up3.0 by invitation from @emily.seibert
Links. Anchors. The A tag. If you’ve built websites or written any content for the web, you’ve probably written loads of links. Links make the web interesting and compelling. Hell, links make the web. If links are so important then, why is so much link text poorly written or downright deceptive?
Anyone who’s written web content knows better than to write “ click here ” for link text. That guideline wasn’t newly invented for touchscreens, it’s a guideline older than Space Jam and some of our interns.
But what’s worse is that “ click here ” gives the user no hint about where the link will take them without investigating its context. And it’s not just the vintage “ click here ” that’s a problem. It’s anything generic. I’ve seen a lot of sites relying on “here,” “read more,” and “learn more” — new words but just as bad.
Why is relying on link context bad? Well, people don’t really read whole web pages; they scan them. The Nielsen Norman Group (NN/G) has done a bunch of eye tracking research, and it turns out that people scan web pages, using links and link text as signposts in long content. And it’s the same for people who use assistive technology to access your site.
Users of screen readers also skim web content and some use links, read out of context, as a technique for quickly navigating through a website.
What’s good link text? The easiest way of evaluating whether link text makes sense or not is to think of that screen reader scenario: take your link out of context and read it. If you take the previous paragraphs as an example, most of the links fail our test.
Ok. So now you’ve learned about writing link text from a bunch of web developers. Why are we writing about this?
In Slack, a couple weeks ago, we were talking about the W3C protocol ARIA (Accessible Rich Internet Applications) and some of the challenges introduced by using its new HTML attributes.
One of our teammates posted an article from Simply Accessible about a tab interface they were testing for accessibility. In their testing, Simply Accessible found that certain attributes added to links removed the elements from the list of links screen reader users used to skim through a web page.
Because these elements weren’t in that list of links, the inactive tabs were basically inaccessible to those users. To solve the usability problem, they ended up removing the ARIA roles from their code so the links were treated…like links.
So remember, link text and link functionality shouldn’t be an afterthought; both have a huge impact on how users interact with your site.
ashley.joost left #WAT-Up3.0.