Tag Archives: mozilla

Debugging CSS Grid Layouts With Firefox Grid Inspector

You may have heard quite a bit of talk about a CSS feature called “Grid” this year. If you are someone who cringes when you hear the words “CSS” and “grid” in the same sentence, then I highly suggest you check out this new CSS module called CSS Grid.
Browsers render HTML elements as boxes according to the CSS box model, and CSS Grid is a new layout model that provides authors the ability to control the size and position of these boxes and their contents.

Original post:  

Debugging CSS Grid Layouts With Firefox Grid Inspector

We’re Touring Through Southeast Asia: Join The Mozilla Developer Roadshow!

We love exploring opportunities. While many of us are quite familiar with publications and events surrounding us, we often lack the global perspective on what’s happening in the web industry across the world. For example, do you know what the state of web design in Singapore is? What about front-end events in Kuala Lumpur? What about the acceptance of UX-driven processes in Hong Kong? That’s exactly what we want to find out!

Link to article:  

We’re Touring Through Southeast Asia: Join The Mozilla Developer Roadshow!

A Guide To Virtual Reality For Web Developers

Recently, there has been a proliferation of virtual reality (VR) web browsers and VR capabilities added to traditional browsers. In this article, we’ll look at the state of browsers in VR and the state of VR on the web via the WebVR APIs.
The State Of Virtual Reality And The Web The web community has experimented with VR before, with VRML, but now WebVR takes a new approach to VR, one more suited to the modern web.

Read More:  

A Guide To Virtual Reality For Web Developers

Web Development Reading List #174: The Bricks We Lay, Remynification, And 0-RTT

We’re all designers. Whether we do a layout, a product design or write code to design a product technically doesn’t matter here. What does matter though, is that we always take the context of a project into consideration. Because as someone shaping a project so that it is appealing to the clients and works in the best way possible for the target audience, we have a pretty big responsibility.

Follow this link:

Web Development Reading List #174: The Bricks We Lay, Remynification, And 0-RTT

Web Development Reading List #171: Leaks, SHA-1 Collision, And Brotli

Phew, what a week! Due to an HTML-parsing bug, Cloudflare experienced a major data leak, and the first practical collision for SHA-1 was revealed as well. We should take these events as an occasion to reconsider if a centralized front-end load balancer that modifies your traffic is a good idea after all. And it’s definitely time to upgrade your TLS-certificate if you still serve SHA-1, too. Here’s what else happened this week.

More here: 

Web Development Reading List #171: Leaks, SHA-1 Collision, And Brotli

HTML APIs: What They Are And How To Design A Good One

As JavaScript developers, we often forget that not everyone has the same knowledge as us. It’s called the curse of knowledge: When we’re an expert on something, we cannot remember how confused we felt as newbies. We overestimate what people will find easy. Therefore, we think that requiring a bunch of JavaScript to initialize or configure the libraries we write is OK. Meanwhile, some of our users struggle to use them, frantically copying and pasting examples from the documentation, tweaking them at random until they work.

See original article: 

HTML APIs: What They Are And How To Design A Good One

Web Development Reading List #157: FlyWeb, Lying Charts, And Feedback Without Context

We all have visions and dreams. Whether it’s about our personal lives, our work, or about complex concepts that target issues which are hard to grasp. The important thing is to listen to your ideas, to write them down, and, if they wake strong feelings, to pursue them.
It can be easy to achieve this, yet sometimes it’s not. A nice technique is to start small and take small steps instead of going 100% all-in or do nothing at all.

Continued here – 

Web Development Reading List #157: FlyWeb, Lying Charts, And Feedback Without Context

Understanding The CSS Property Value Syntax


The World Wide Web Consortium uses a particular syntax to define the possible values that can be used for all CSS properties. You may have seen this syntax in action if you have ever looked at a CSS specification — as in the syntax for border-image-slice.

Understanding The CSS Property Value Syntax

Let’s take a look: <'border-­image-­slice'> = [<number> | <percentage>]1,4 && fill? This syntax can be hard to understand if you don’t know the various symbols and how they work. However, it is worth taking the time to learn. If you understand how the W3C defines property values, you will be able to understand any of the W3C’s CSS specifications.

The post Understanding The CSS Property Value Syntax appeared first on Smashing Magazine.

View post: 

Understanding The CSS Property Value Syntax

Web Development Reading List #113: SVG Optimization and Native DOM Selection Tricks

What’s going on in the industry? What new techniques have emerged recently? What insights, tools, tips and tricks is the web design community talking about? Anselm Hannemann is collecting everything that popped up over the last week in his web development reading list so that you don’t miss out on anything. The result is a carefully curated list of articles and resources that are worth taking a closer look at.

Link – 

Web Development Reading List #113: SVG Optimization and Native DOM Selection Tricks

Using UI System Fonts In Web Design: A Quick Practical Guide

For perhaps the first time since the original Macintosh, we can get excited about using system UI fonts. They’re an interesting, fresh alternative to web typography — and one that doesn’t require a web-font delivery service or font files stored on your server. How do we use system UI fonts on a website, and what are the caveats?
System UI fonts being amazing kind of snuck up on us. Google has been toiling away at Roboto with great success (including regular updates), Apple made a splash with San Francisco, and Mozilla asked renowned type designer Erik Spiekermann to create Fira Sans.

Continue reading: 

Using UI System Fonts In Web Design: A Quick Practical Guide