38 private links
Forms. Without them, the web would not be what it is today, but they are challenging from a markup and styling standpoint.
In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including
- new HTML5 field types;
- validation, error messages & formatting hints;
- how to mark up and style forms for the greatest flexibility in responsive designs; and
- best practices for enhancing forms with JavaScript.
There are too few things not to like about SVG, and I don’t mean the things that browsers cause by incomplete or lack of certain features or buggy implementations. via Pocket
JavaScript code to process elements on page load on a Drupal 7 site uses behaviours.
Some practical ARIA examples to enhance your application accessibility (by @heydonworks).
Do you add a descriptive title attribute to your links? Did you know that you might be making your site even less accessible? Everything I thought I knew about the title attribute was proved wrong when I started using a screenreader.
Icons! We see them all over the web, and they're essential to most pattern libraries and web design systems. I recently needed to implement such a system. It had to be non-prescriptive, scalable, and dynamically editable via CSS. The icons were to be used by multiple teams in many different applications, built with various frameworks and techniques. They needed to have the ability to be restyled, get cached, and be updated quickly and easily as more icons are added. Basically, the icon system needed to be really, really flexible. Challenge accepted.
Lint: Bad practices of CSS with explanations
The BBC HTML Accessibility Standards and BBC Mobile Accessibility Standards and Guidelines outline the requirements and recommendations necessary for ensuring the BBC’s digital products are accessible to the widest possible audience.
Slideshows, sliders, carousels: whatever you call them, in terms of web design they are just evil. Do a quick Google search and you will see that most frontend developers and UX/UI designers can agree on this point and have been talking about it for years. But why do we still constantly see them? Part of the issue is that slideshows, especially in the hero region, are so ubiquitous that many clients see them as necessary and keep asking for them. They have essentially become a “home page standard.”
12 мая Россия присоединяется к международной системе автоматического обмена налоговой информацией. Теперь российская налоговая служба сможет получать данные об иностранных счетах россиян из десятков разных стран. Правда, ФНС придется подождать до 2018 года, когда соглашение начнет действовать.
Anybody who’s followed me or my work for any length of time will no doubt know that I’m a huge proponent of the BEM naming convention. What I’m about to talk about in this post is not an alternative or different naming convention to BEM, but an augmentation: small additions that level BEM up a notch. This extended BEM syntax has been dubbed BEMIT, as it borrows some paradigms and patterns from the (as yet unpublished) Inverted Triangle CSS architecture. BEM + ITCSS = BEMIT.
The @extend directive in Sass can produce undesirable side effects. David Khourshid shows how to use @extend effectively to produce clean & organized CSS.
The more your website resembles an application over a document, the more global typography styles become a pain to build upon. Even heavily content-based websites seem more like an app in the modern world of responsive design. The solution? Just scope typographic styles:
.text h1 {...}
.text p {...}
Back to architecture, shall we? I usually go with what I call the 7-1 pattern: 7 folders, 1 file. Basically, you have all your partials stuffed into 7 different folders, and a single file at the root level (usually named main.scss) which imports them all to be compiled into a CSS stylesheet.
base/ - resets and basic typography
components/ (or blocks/) - components with their separate mixins, images, variables, (also possibly scripts and markup)
layout/ - structural styling for main elements (asides, mains, headers etc.)
pages/ - styles specific to certain pages
themes/ - if site contains several color/typography themes - put here styling that should vary according to different themes
abstracts/ - common vars, functions, mixins, extends
vendors/ - external scripts or frameworks specific styling (jq-ui etc.)
Collapsible content areas are frequently presented in web sites and applications as a way to let users to control how content is shown or hidden on the page. Also called collapsibles, spin-downs, toggle panels, twisties, and content disclosures, they're ideal for selectively displaying optional information — like instructional text or additional details, for example — so users can focus on the task at hand and view this content only as needed.
About a year ago, I wrote Mixin or Placeholder (my first article here at SitePoint) immediately followed by What Nobody Told You About Sass Extend. And here I am, one year later, changing my mind again and writing why I think the @extend directive from Sass is really far from being the Eldorado.
Accessibility is an important part of modern web development. It is our responsibility as creators of WordPress themes to make them accessible to all users, on any device. In this article, I’ll offer some simple tips to create better, more accessible WordPress themes.
If you’re using input fields on a web page your users will need to know what they’re supposed to put in them or which ones to choose for radio buttons, checkboxes and dropdowns. Sighted users can see any accompanying text next to the text box or radio button but that’s not always possible for users who are blind or suffering from other visual impairments. How can these people know what’s expected of them?
Even in the ancient times people knew about the great power of motion. Literature, art, folklore, technologies all witness numerous attempts of people to explain motion as one of the brightest features of life. via Pocket
Listening to your web content rather than looking at it can be an "eye-opening" experience (pardon the pun) that takes sighted users out of their normal comfort zone. It gives sighted users a chance to evaluate their content from an entirely different perspective: from the perspective of a blind person. A lot of times you'll end up finding mistakes that would have been hard to catch visually. For example, spelling mistakes become very obvious when you hear words mispronounced by the screen reader. Screen readers are also very good for checking the accuracy and quality of image alternative text. Screen readers can also help you identify problems with reading order, table markup, form elements, and many other aspects of accessibility.