Whether we know it or not we work with URLs all the time. Whenever we enter a web address into the browser's omni-bar, click on a link on a web page or click on an email link, all those are URLs. Despite their use everywhere, defining a URL is hard. URLs are defined in RFC 3986https://datatracker.ietf.org/doc/html/rfc3986 and in the WHATWG URL Living Standardhttps://url.spec.whatwg.org/ but even with these specifications, many inconsistent implementations can turn things into a security nightmare. In this post, we'll look at what URLs are and how they can potentially be abused. What is a URL A URL...
There are many ways we can improve our CSS, both in terms of readability and ease of use. This post will discuss some of these new ways of doing things and start thinking about ways to incorporate these new ways into existing projects. Using custom properties to make things more readable Until CSS gained custom properties AKA CSS variableshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSScascadingvariables there was no way to reuse values across one or more stylesheets; if/when we need to make changes, we have to make the changes everywhere we use these values which is tedious and error-prone. In this example, we use the same...
With scroll-based animations, you can create animations that will trigger based on page scrolling rather than based on time. The Scroll-driven Animations Specification defines two new types of timelines that you can use: Scroll Progress Timeline: a timeline linked to the scroll position of a scroll container along a particular axis. View Progress Timeline: a timeline linked to the relative position of an element within its scroll container. How they work The easiest way to create a scroll animation is to use the scroll function to create an anonymous Scroll Timeline. css @keyframes animate-it { from { opacity: 0; }...
Animating variable fonts Don't be Afraid Of Large Font Sizes Creating Grid-Based Components Font Stacks: To variable font or not to variable font Leveraging Variable Font Features Leveraging Opentype font features Escaping our web metaphors Creating Magazine Layouts Media Queries To The Rescue What the web can do that print can't Anotations and marginalia The social life of marginaliahttp://bobulate.com/post/5013829096/the-social-life-of-marginalia Bookmarking, annotations and sharing openbookmarks.orghttp://www.openbookmarks.org/ Hypothes.ishttps://hypothes.is/ emphasishttps://github.com/NYTimes/Emphasis from the New York Times Reading List Frank Chimero The Web's Grainhttps://frankchimero.com/blog/2015/the-webs-grain/ What The Web Wantshttps://frankchimero.com/blog/2013/what-screens-want/ Apps and publishing Post artifact books and publishinghttp://craigmod.com/journal/postartifact/ Newspapers and Thinking the Unthinkablehttps://www.edge.org/conversation/clayshirky-newspapers-and-thinking-the-unthinkable On Wikipedia, Cultural Patrimony, and...
Looping through a flat JSON file is easy, doing the same through a nested JSON object, is not so easy. There is no built-in way to loop through nested arrays of JSON properties so we have to develop our own strategies. The solution is encapsulated in the logJSON function. It does the following: 1. Check if the JSON input is null or undefined. If it is, then return, there's nothing to do 2. Check the type of the incoming JSON object using the typeofhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof operator. We will use this check later 3. If the object is a number, a string...
CSS Resets have been around for a while and they have evolved along with CSS and browser support. The notion of a CSS reset first came around with undoHTML.css by Tantek Celik in 2004 and it does what it says; it undoes many of the CSS defaults in browsers so you have a clean beginning for your own work. css :link,:visited { text-decoration:none } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p, blockquote,fieldset,input { margin:0; padding:0 } a img,:link img,:visited img { border:none } address { font-style:normal } In 2005, Farouk Ates created initial.csshttp://web.archive.org/web/20050930205005/http:/kurafire.net/log/archive/2005/07/26/starting-css-revisited as groupings of styles that...
Custom properties are awesome. They provide modularity and a central place to store variables that we'll use throughout a stylesheet. But they are not perfect. This post will discuss two ways to define CSS Custom properties and when it's best to use each type. Defining CSS Custom Properties CSS Custom Properties also known as CSS Variables are defined in CSS Custom Properties for Cascading Variables Module Level 1https://www.w3.org/TR/css-variables-1/. They are commonly used to provide a central locatin for values used multiple times throughout the document. Before variables we would have to change each individual instance of the value would be...
One of my current projects is to create a journaling system similar to Hihttps://hitotoki.org/ did. The idea is described in Full stack writing and publishing: Welcome to Hihttps://hitotoki.org/moments/q4oi5i68. The Idea The idea of this application is as follows: Mobile first application Users log into the platform and have the option to read what other people have written or create their content. Log in Use Google and Facebook login Capture initial data Capture a summary or sketch of the post Capture the location where the post originated using the Geolocation API Use a Geocoding service to get the location and display...
When initially introduced, view transitions would only work with single-page applications. This is awesome but it doesn't work with regular web pages like what I normally work with. During I/O 2024, Bramus introduced extensions to the Page View API that would make them work across pages on the same origin. This will create more appealing transitions between pages in an application. How they work Note:"> Cross-document view transitions are limited to same-origin navigations only. Navigation is considered to be same-origin if the origin of both participating pages is the same. To have a cross-document view transition between two documents, both...
Accordions present an interesting way to display content using one or more detailshttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/details elements. There is a specific type of accordion that, until recently, was impossible to do without scripting, the exclusive accordion. This post will explain what's an exclusive accordion and how to polyfill the API to handle older browsers. What are exclusive accordions and how they work To achieve this on the web you can now a name attribute to details elements. When this attribute is used, all details elements with the same name value form a semantic group and will behave as an exclusive accordion. When you...
