The last days i spent a lot of time reading about and getting my head around SVG, which can be kind of complex and sometimes confusing if you’re just starting out. This talk by Sara Soueidan at Beyond Tellerrand helped me a lot to understand some of the basic concepts behind SVG.
The U.S. Government released a complete set of Standards to achieve consistency across federal government websites.
Built and maintained by U.S. Digital Service and 18F designers and developers, this resource follows industry-standard web accessibility guidelines and reuses the best practices of existing style libraries and modern web design. It provides a guide for creating beautiful and easy-to-use online experiences for the American people.
It’s really great to see more and more organizations – and especially governments – create and even release Style Guides for Web Design.
Some very interesting insights on what goes into building a huge CSS Framework for an Enterprise Solution like Salesforce.
At Salesforce UX, we are guided by four design principles. In order of importance, they are — clarity, efficiency, consistency, and beauty . These principles assisted us in prioritizing competing goals and helped us make tough calls.
I’d like to share some of the decisions we made while architecting the framework. Some of these choices may be unexpected. And there have been times when our ideas have morphed while building, as we discovered yet another platform or situation we needed to solve for.
Worth a read!
Handpicked code snippets you can use in your web projects. Find web design inspiration with code samples.
A nice collection of Tutorials and Code Snippets from all around the web.
The Mobile Checker is a tool for Web developers who want to make their Web page or Web app work better on mobile devices.
The W3C released a tool to check your mobile websites. Pretty sweet.
WP Rocket reminds us that we should never forget to measure the actual Page Speed results when optimizing a page, instead of only trusting the grades we get from tools like Google Page Speed Insights.
Do not blindly trust Google PageSpeed or take it at face value.
I couldn’t agree more on that one!
WP Rocket – Why you Shouldn’t Care About Google PageSpeed Insights
Another crazy experiment: Creating realistic looking text in CSS. Hard to believe that it’s fully rendered in browser and not photographed.
Let’s be honest. Centering in CSS can really suck! At least without the use of flexbox. “How to Center in CSS” is a neat little page i found today which helps you choose the right way of centering for different situations (known/unknown width and height, inline or block element etc.) and generates some code to accomplish what you need.
While i like the general idea of this, there are some things that should be improved and that would make it a lot more useful. First, the generated code uses inline-styles, which is just a terrible thing to teach to anyone. Displaying the generated styles in CSS (or even SCSS & CSS) would be a lot better. Second, it would be nice if it would promote the use of flexbox, too. Third, as with most things there are different ways to accomplish the same thing, so a little bit of background information on each technique and why it’s favored over another would be really great.
If you need to center something in CSS and are unsure about which technique to use, then i would still recommend this post on CSS-Tricks. I look it up frequently when i need to center anything, but i could also imagine such a generator to become a really useful tool.
Looks like some really helpful new things are coming to CSS. I especially like the proposed :has selector which i could have used a ton of times in the past. In combination with :nth-child or :not this will open up quite some possibilities for complex relational selectors and we won’t have to use complicated techniques like this quantity query.
The
:haspseudo-selector allows you to select elements that have the passed in arguments as children. For example, to select all anchor links that have image elements as children
But there’s more than the :has selector and i recommend you read the full post about those new CSS Level 4 Selectors.