Category Archive for: mozilla

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Automate Your Workflow with Node

You know those tedious tasks you have to do at work: Updating configuration files, copying and pasting files, updating Jira tickets. Time adds up after a while. This was very much the case when I worked for an online games company back in 2016. The job could be very rewarding at times when I had to build configurable templates for games, but about 70% of my time was spent on making copies of those templates and deploying re-skinned implementations. What is a reskin? The definition of a reskin at the company was using the same game mechanics, screens and positioning of elements, but changing the visual aesthetics such as color and assets. So in the context of a simple game like ‘Rock Paper Scissors,’ we would create a template with basic assets like below. But when we create a reskin of this, we would use different assets and the game…

Read More →

Service Worker Cookbook

I stumbled upon this site the other day from Mozilla that’s a collection of recipes to get started with a Service Worker — from caching strategies and notifications to providing an offline fallback to your users, this little cookbook has it all. You can also check out our guide to making a simple site work offline and the offline site that resulted from it. Direct Link to Article — PermalinkThe post Service Worker Cookbook appeared first on CSS-Tricks. Source: CssTricks

Securing Non-Production Environments

One of the common issues I’ve noticed when working with customers is the tendency to treat non-production environments, such as dev or stage, as less important with respect to security. This is understandable since these environments are effectively disposable and could be rebuilt from production at any time. However an important consideration that should be taken into account is what data lives in these environments. Most customers I talk to are mostly concerned with sites “getting hacked.” This mainly refers to the site contents being changed publicly. Often restricting access to sensitive data is a lesser concern, but it should be viewed as just as important. Credit: CommitStrip.com The typical Drupal-based development workflow involves pushing code up from development to stage, and finally production, then pulling data downward from production into stage and development. This means development and stage often have full copies of production. An attacker would not need…

Read More →

Web-Powered Augmented Reality: a Hands-On Tutorial

Uri Shaked has written about his journey in AR on the web from the very early days of Google’s Project Tango to the recent A-Frame experiments from Mozilla. Front-end devs might be interested in A-Frame because of how you work with it – it’s a declarative language like HTML! I particularly like this section where Uri describes how it felt to first play around with AR: The ability to place virtual objects in the real space, and have them stick in place even when you move around, seemed to me like we were diving down the uncanny valley, where the boundaries between the physical world and the game were beginning to blur. This was the first time I experienced AR without the need for markers or special props — it just worked out of the box, everywhere. Direct Link to Article — Permalink Web-Powered Augmented Reality: a Hands-On Tutorial is a post…

Read More →

Secure Contexts Everywhere

Anne van Kesteren for Mozilla says: Effective immediately, all new features that are web-exposed are to be restricted to secure contexts. Web-exposed means that the feature is observable from a web page or server, whether through JavaScript, CSS, HTTP, media formats, etc. A feature can be anything from an extension of an existing IDL-defined object, a new CSS property, a new HTTP response header, to bigger features such as WebVR. In contrast, a new CSS color keyword would likely not be restricted to secure contexts. In other words, if your site isn’t HTTPS, you won’t get new web tech features. Holy jeepers. The reasoning is the web should be using HTTPS, so this is our way of beating you with a stick if you try to use fancy features without going HTTPS first. It’ll be fascinating to watch the first major feature drop and if they stick to their word…

Read More →

Further working mode changes at WHATWG

The Web Hypertext Application Technology Working Group (WHATWG) announced that it has adopted a formal governance structure: The WHATWG has operated successfully since 2004 with no formal governance structure, guided by a strong culture of pragmatism and collaboration. Although this has worked well for driving the web forward, we realized that we could get broader participation by being clear about what rights and responsibilities members of the community have. Concretely, this involves creating an IPR Policy and governance structure. WHATWG was founded by folks at Apple, Mozilla and Opera. The new structure will be comprised of individuals from Apple, Google, Microsoft and Mozilla. The Big Four, you might say. I find this interesting because we often think of the Web as a wild west where standards are always evolving and adopted at a different pace. This change largely keeps public contributions to the Living Standards in tact, but establishes a…

Read More →

On the Growing Popularity of Atomic CSS

Even if you consider yourself a CSS expert, chances are that at some point on a large project you’ve had to deal with a convoluted, labyrinthine stylesheet that never stops growing. Some stylesheets can feel like a messy entangled web of inheritance. Spaghetti Monster The cascade is incredibly powerful. Small changes can have large effects, making it harder to know what the immediate consequences will be. Refactoring, changing, and removing CSS is seen as risky and approached with trepidation as it’s difficult to know all the places it’s being used. One thing that is often hard to articulate with new tooling is when, exactly do you start to reach for this? The answer is rarely (if ever) immediately and in all situations. One of those situations, in my limited experience, is on large teams with large codebases. The feeling is that the CSS can get far too large and team…

Read More →

Content Security Policy: The Easy Way to Prevent Mixed Content

I recently learned about a browser feature where, if you provide a special HTTP header, it will automatically post to a URL with a report of any non-HTTPS content. This would be a great thing to do when transitioning a site to HTTPS, for example, to root out any mixed content warnings. In this article, we’ll implement this feature via a small WordPress plugin. What is mixed content? “Mixed content” means you’re loading a page over HTTPS page, but some of the assets on that page (images, videos, CSS, scripts, scripts called by scripts, etc) are loaded via plain HTTP. A browser warning about mixed content. I’m going to assume that we’re all too familiar with this warning and refer the reader to this excellent primer for more background on mixed content. What is Content Security Policy? A Content Security Policy (CSP) is a browser feature that gives us a…

Read More →

What You Need To Know About Mozilla’s Project Common Voice

The rise in mobile use has paved the way for voice to become a necessary feature in online browsing and communication. As more people rely on mobile technology to browse pages and do a quick online search, the need for voice technology has increased dramatically. This is probably the reason why Mozilla has ventured into a breakthrough endeavor known as Project Common Voice. What is Project Common Voice? Mozilla’s new project aims to make voice technology an open-source resource. According to the Common Voice website, bulk of voice technology is controlled by private companies that don’t share their tech data with the rest of the world. Mozilla wants to remove the barriers to innovation, leading them to launch the Common Voice project. In a nutshell, Common Voice opens up the trending technology of voice to contributors and developers. The aim here is to promote the use of voice technology by…

Read More →

What You Need To Know About Mozilla’s Project Common Voice

The rise in mobile use has paved the way for voice to become a necessary feature in online browsing and communication. As more people rely on mobile technology to browse pages and do a quick online search, the need for voice technology has increased dramatically. This is probably the reason why Mozilla has ventured into a breakthrough endeavor known as Project Common Voice. What is Project Common Voice? Mozilla’s new project aims to make voice technology an open-source resource. According to the Common Voice website, bulk of voice technology is controlled by private companies that don’t share their tech data with the rest of the world. Mozilla wants to remove the barriers to innovation, leading them to launch the Common Voice project. In a nutshell, Common Voice opens up the trending technology of voice to contributors and developers. The aim here is to promote the use of voice technology by…

Read More →

MDN Product Advisory Board

We all know and love MDN for already being the best documentation for web features out there. It looks like it’s poised to get even better with Google and Microsoft both joining a new board. Mozilla’s vision for the MDN Product Advisory Board is to build collaboration that helps the MDN community collectively maintain MDN as the most comprehensive, complete, and trusted reference documenting the most important aspects of modern browsers and web standards. Interesting none of them mentioned WebPlatform, the previous attempt at this that kinda fizzled out. This effort seems a little more likely to succeed as it already has a successful foundation, actual staff, and a benevolent dictator in Mozilla. It’s great to see browsers complete on user features but cooperate on standards and education. Worth a shout that we dabble in “docs” for CSS features ourselves here at CSS-Tricks with the Almanac, but if anything in…

Read More →

CSS Grid PlayGround

Really great work by the Mozilla gang. Curious, as they already have MDN for CSS Grid, which isn’t only a straight reference, they have plenty of “guides”. Not that I’m complaining, the design and learning flow of this are fantastic. And of course, I’m a fan of the “View on CodePen” links 😉 There are always lots of ways to learn something. I’m a huge fan of Rachel Andrew’s totally free video series and our own guide. This also seems a bit more playground-like. Direct Link to Article — Permalink CSS Grid PlayGround is a post from CSS-Tricks Source: CssTricks

Crash Course: VR Design for N00bs

We have a tradition at Viget of experimenting with our own ideas, independent of client work. But, honestly, it’s been too long since we built something pointless. Today, we’re debuting our latest experiment in virtual reality—a WebVR adaptation of the classic circuit-board puzzle Lights Out. It’s a one-player game, with the objective of turning all the “lights” in the grid off. Sure, the final product is neat, but how did we get there? Jumping into the VR metaverse is overwhelming. I was disappointed to find there are tons of libraries for developers—but very few centralized resources for designers. As creatives, we pride ourselves on our ability to apply design thinking to everything. So, where are all the thought leaders in VR design? There’s little to no consensus around even the most basic design standards—like typography or accessibility. Basically, VR design is a wild west free-for-all. However, instead of seeing this as…

Read More →

Mozilla: Web Literacy

This is really neat: A framework for entry-level web literacy & 21st Century skills. Time to level-up a bit. I think it’s pretty clear that the future of work at a macro and micro level will require an ever-growing bench of technical skills. Now, to be clear, I don’t think this means that you necessarily have to become a software developer or code full-time. This is the difference between literacy and fluency, which I’ve spoken about before. This is the difference between knowing how to “read and write” and being a professional writer. Everyone needs to know the former while not everyone needs to do it professionally. Get it done. The post Mozilla: Web Literacy appeared first on John Saddington. Source: https://john.do/

CSS Animations vs Web Animations API

There is a native API for animation in JavaScript known as the Web Animations API. We’ll call it WAAPI in this post. MDN has good documentation on it, and Dan Wilson has a great article series. In this article, we’ll compare WAAPI and animations done in CSS. A note on browser support WAAPI has a comprehensive and robust polyfill, making it usable in production today, even while browser support is limited. As ever, you can check Can I Use for browser support data. However, that doesn’t provide very good info on support of all the sub features of WAAPI. Here’s a checker for that: See the Pen WAAPI Browser Support Test by Dan Wilson (@danwilson) on CodePen. To experiment with all features without a polyfill, use Firefox Nightly. The basics of WAAPI If you’ve ever used jQuery’s .animate(), the basic syntax of WAAPI should look pretty familiar.  var element = document.querySelector(‘.animate-me’);…

Read More →

Making Custom Properties (CSS Variables) More Dynamic

CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in JavaScript, Custom Properties bring something to the table for everyone. Most of the power comes from two unique abilities of Custom Properties: The cascade The ability to modify values with JavaScript Even more power is exposed as you combine Custom Properties with other preexisting CSS concepts, like calc() . The Basics You can use Custom Properties to do effectively what variables in preprocessors like Sass provide – set a global or scoped variable value, and then use it later in your code. But…

Read More →

Are you making customers too happy?

I graduated from the University of Illinois (Champaign-Urbana). Marc Andreessen was an alum. That’s where he created the Mosaic web browser which in turn led to creating Netscape. As you can imagine, I had a loyalty to Netscape coming out of school.But everyone knows how that story turns out. Microsoft won. We were stuck with IE.IE just got worse and worse. And work was bad about keeping us updated with laptops with enough horsepower, so I was constantly trying to keep my machine running lean.I remember when a friend showed me something called the Phoenix web browser. I loved it. It was fast. It didn’t make my computer crawl. I was a convert. I used it all day long.Today Phoenix is called Firefox. And I never open the thing up anymore.Phoenix/Firefox just got more and more things, and it got slower and slower. It started eating up a ton of memory. All things I was…

Read More →

Guetzli

Geutzili, Google’s new open source algorithm… …that creates high-quality JPEG images with file sizes 35% smaller than currently available methods, enabling webmasters to create webpages that can load faster and use even less data. I’ve seen this fairly widely reported, and that’s great because images are the main cause of web bloat these days and fighting back with tech seems smart. I also saw Anselm Hannemann note: This is great, but to put things into perspective, we also have to consider that it’s up to 100 times slower as Mozilla’s mozJPEG encoder and in many cases, it doesn’t achieve the same quality at the same file size Source: Kornel Lesiński, the guy behind ImageOptim, who says Guetzli will be incorporated into the next version. Direct Link to Article — Permalink Guetzli is a post from CSS-Tricks Source: CssTricks

Using CSS Transitions on Auto Dimensions

We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set transition: height 0.2s ease-out. You’ve created a collapsed CSS class that applies height: 0. You try it out, and… the height doesn’t transition. It snaps between the two sizes as if transition had never been set. After some fiddling, you figure out that this problem only happens when the height starts out or ends up as auto. Percentages, pixel values, any absolute units work as expected. But all of those require hard coding a specific height beforehand, rather than allowing it to naturally result from the size of the element content. Nikita Vasilyev documented this well. In this article I mostly speak in terms of height for simplicity, but everything here also applies to width. If you were hoping…

Read More →

Back to Top