This is a response to a page that raised enough concenrts for me to want to write about it but not important enough to put into my regular post rotation The page that started the research and this piece is: Frequently Raised Concernshttps://bubblin.io/concerns. Like they did I will monologue and do my best to provide additional alternatives and try not to come too hard on the criticism. TL;DR Supporting a single rendering engine and OS is dangerous, particularly when such rendering engine lags behind in standards support and in communication towards developers, other browser makers and standards bodies, may not...
The idea behind SVG sprites is similar to sprite sheetshttps://www.codeandweb.com/what-is-a-sprite-sheet using CSS to place the images on the page. The structure of the demonstration project is as follows: text svg-sprites ├── gulpfile.js ├── icons └── package.json We'll use Gulp to create the sprite and the gulpfile.js contains the instructions for the build. The details of the process will be described in the next section. The icons directory will hold the individual icons that we'll use in the sprite package.json contains all NPM-related information necessary for the Gulp process to run. Creating the sprite sheet As with all Node projects, first,...
A next step is to build our own templating solution using Gulp. I've spent longer than I wanted in crafting this solution and it's still, like the idea I based this from, has a lot of things I'm working on understanding and changing. The idea of using a templating engine is to have options when creating content. We can create partial content blocks and define different layouts for our content. Granted, this moves away from our simple model when using templates but we gain more flexibility in what we can do with the templated content. We need to install the...
I've looked at static site generators like Hugo, Gatsby, and Jekyll among others. They all have their strengths and weaknesses but they are overkill if all you want to do is throw together a quick prototype with a few pages and stylesheets. Markdown, HTML and templates: Version 1 Before we start we'll take the following steps: - Create our root directory static-gen - Create two working directories public and src - Initialize package.json bash mkdir -p static-gen/src mkdir -p static-gen/public npm init --yes The first version uses the wrap-around system that I use to generate content for my blog. I've...
!Containment may help prevent this and make CSS even more awesomehttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/css-is-awesome Whenever we insert HTML elements after the document loads by inserting new CCSS rules or new elements via Javascript, we may be slowing down the rendering of the page because every change means the browser has to navigate all the elements in scope and re-render them as needed, they may have been moved or changed their dimensions when our target element grew smaller or larger; Layout is almost always scoped to the entire document meaning that the browser will navigate all the way to the beginning of the document...
Latex is an old-school language for document typesetting. It was created by Donald Knuth to typeset his book The Art of Computer Science. You still see LaTex in scientific articles and papers If you're only familiar with HTML, Latex syntax will look strange. Rather than tags and attributes we have a preamble, package declarations, and instructions. A basic LaTex article, set to print in portrait mode with a body text size of 12 points looks like this: tex \usepackage{amssymb} \usepackage{epstopdf} % Broken into two lines for readability. In production % the command would go in one line \DeclareGraphicsRule{.tif}{png}{.png} {convert 1...
Markdownhttps://en.wikipedia.org/wiki/Markdown is my favorite way to write. It is lightweight, requiring a few characters to convey the meaning of the text, it's supported in both many places, including Github and Wordpress via Jetpack so I don't need to change the way I write to publish in different places and it only needs a text editor to create for me, so does HTML but that's another story. In this article, we'll look at different ways to take Markdown input and convert it to HTML for web view. Markdown to HTML in a build process This process is part of the build...
This series has barely begun to scratch the surface of what you can do with SVG. As much SVG as we've covered, We've barely scratched the surface. There are things like the GSAP library that I deliberately did not cover because I wrote about ithttps://publishing-project.rivendellweb.net/looking-at-animations-again-gsap/ before and because I don't want to push yet another third party library into my codebase. The list below shows links to tutorials and examples of things that I've either used as inspiration or would like to play with at a later time. If you have comments, criticisms or ideas for further projects, feel free...
Perhaps the most interesting and complex topic in SVG, for me, is animations. I have a basic understanding on how to create keyframe animations for CSS content and a very basic understanding of how to use GSAPhttps://greensock.com/ to animate HTML elements. I want to explore how to create smaller targeted animations using both CSS and SVG specific animations techniques. SMIL and the animate element SVG comes with its own animation tools in the form of the animatehttps://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate element and SMIL. The most basic animation element is animate. It takes the following attributes: - attributeName: The name of the attribute we...
SVG filters allow for non-destructive image manipulation. They are a superset of the filters available directly in CSShttps://developer.mozilla.org/en-US/docs/Web/CSS/filter The basic container for the filters is the filter element. To use them you add the filter attribute to the image element containing the image you want to filter. A barebones svg for filtering an image looks like this: svg In the following sections, we'll talk about filter components and other things we need to understand before making them work. Filter Primitives In SVG filters, each filter element contains one or more filter primitives as its children. Each primitive performs a graphical...
