JSON Schemashttps://json-schema.org/ allows us to create a schema for JSON data. This would allow us to validate the data and ensure that it is complete and has the correct structure. This would also address one of the drawbacks of NoSQL and, potentially, XML databases: how to ensure that the data is complete, meaning that all records contain the same data. We'll build a schema for interview-like content for a JSON document that we'll later convert to XML. The content for the interview object This is a complete JSON document that matches the schema. I cheated a little with the document...
Part of my love/hate relationship with Rails is that I think it is too opinionated for its own good. It makes it easier for people to write apps if you accept the opinions that DHH and the Rails community have baked into the platform over the years. Don't make me think, or why I switched to Rails from JavaScript SPAshttps://reviewbunny.app/blog/dont-make-me-think-or-why-i-switched-to-rails-from-javascript-spas makes a comparison between Javascript and the need to manually select the tools and technologies that we use in our projects in contrast to Rails and its "convention over configuration" approach. It made me think about the two opposite sides...
I've always liked shadows as a way to give depth to content that would otherwise be flat and uninspiring. My first approach at creating shadows in CSS was to use box-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow, primarily in title boxes where the entire container would have a shadow and not the individual laters. text-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow does the same thing for text that box-shadow does for boxes. As presented in the example below, the four values for the text-shadow property are: offset-x offset-y blur-radius color css h1 { color: rebeccapurple; font-size: 160px; text-shadow: 8px 4px 2px darkgrey; } Shadows are a nice way to provide depth to...
In replaced elementshttps://developer.mozilla.org/en-US/docs/Web/CSS/Replacedelement, aspect ratiohttps://en.wikipedia.org/wiki/Aspectratioimage is the ratio of the width to the height of an image. Until recently we had to rely on the browser's calculations of "implicit" aspect ratios. Over time this was ok and worked well, the jump of text wasn't as bad as it is today or the images loaded fast enough so it wouldn't be a problem. Over time browsers implemented a more accurate way of calculating the aspect ratio. This would prevent jank and content shifting by setting the dimensions of the image before it is loaded. css img, inputtype="image", video, embed, iframe, marquee,...
The :any-linkhttps://developer.mozilla.org/en-US/docs/Web/CSS/:any-link styles all a elements with an href attribute. This allows us to target all links in a document, regardless of location or parents. This is particularly useful when playing with text-decoration- attributes. Safari uses the -webkit- prefix for these properties so we need to duplicate work to ensure that the links display the same across browsers. css :any-link { border: 1px solid blue; color: orange; } / WebKit browsers / :-webkit-any-link { border: 1px solid blue; color: orange; } We can also add link pseudo-elements like :hover and :visited to the :any-link selector. css :any-link { border: 1px...
CSS provides ways to play with the underline of elements beyond removing the underline from links and only showing it on hover. CSS Text Decoration Module Level 4https://drafts.csswg.org/css-text-decor-4/ provides four longhand properties one shorthand property for underlining text. This post will cover the text-decoration- properties and some adjacent properties: The text-decoration-skip- properties text-underline-position text-underline-offset We will also discuss When to Avoid the text-decoration Shorthand Propertyhttps://css-tricks.com/when-to-avoid-css-text-decoration-shorthand/. Using the shorthand property is nice as it saves typing but it's not always the best option. The post explains when and why it may be a good idea to use the longhand properties. text-decoration-\:...
One very frustrating thing when working with images on the web is when you're trying to fit an image into a container. If the image has different dimensions and aspect ratio than the container, the image will be resized to fit, losing potentially important portions of the image or stretching it to the point it becomes blurry and hard to find the details on it. This post will discuss three attributes that may help solve this type of problem: object-fit, background-size and aspect-ratio. Background Before we start there are a couple of background items to talk about. Replaced Elements In...
Introduction I use Codelabs to document processes and step-by-step instructions for given processes or topics. However, unlike tools for authoring codelabs, there is no real way to author a codelabs website that is not heavily geared towards Google Codelabs and its websitehttps://codelabs.developers.google.com/ which uses Google infrastructure and resources that may not be needed for codelabs hosted elsewhere. Rather than try to work around Google's Codelab website tools, I decided to build my own website to host Codelabs. The Idea The idea for the website is to: Create a JSON file with information about the codelabs Build a website Insert the...
A lot of times when I try a new front-end technology or decide to work with a new framework, I need a backend to work with. For the longest time, I've used a project database hosted locally but I've decided to use a different strategy and build a single REST API backed by a MongoDB database. With an API I can then concentrate on the front end and use an existing CRUD Create, Read, Update, Delete REST API. The following table shows the different parts of the proposed API: | HTTP Verb | Endpoint | Description | | --- |...
It's been a while since I've looked at WebAssembly and Go. Some things have changed since then and I want to document them as I revisit them. Some of these changes deal with the evolution of Go as a programming language, some of them deal with Go's support for Webassmebly, and some have dealt with the evolution of WebAssembly. First project: Building a template Before we start looking at specific projects, let's look at what we need to do to compile Go to WebAssembly. The first step is to initialize the project from GO. We do this by running the...
