svg-term-cli is a tool that render asciicast (terminal recordings) to animated SVG. Pass the asciicast id into svg-term in order to convert it: svg-term –cast=113643 –out examples/parrot.svg –frame This asciicast for example: Using the command above, it will render to this SVG: svg-term-cli – Share terminal sessions as razor-sharp animated SVG everywhere →
Tag Archives: link
Share terminal sessions as animated SVG with
Evolution of <img>: Gif without the GIF
In the latest Safari Tech Preview it’s now possible to use MP4 files in <img> tags. Intended use case is short, muted, looping video. Colin Bendell digs deeper into this. By enabling true video formats (like MP4) to be included in <img> tags, Safari Technology Preview has fixed performance and UX problems. With it, our …
Developing TV Apps with React-TV
TVs usually have limited graphics acceleration, single core CPUs and high memory usage for a common TV App. These restrictions make super responsive 60fps experiences especially tricky. React-TV is an ecosystem for React Applications on TVs. Includes a Renderer and a CLI tool for building applications. Focused on be a better tool for building and …
Do we need a new heading element? We don’t know.
Great insightful post by Jake Archibald on the generic <h> element, which could act as a replacement for the current set of <h1>, <h2>, <h3>, … I always thought this to be a good case, as it’d would allow you to move components around in the DOM, and the “importance” of the heading would be …
Continue reading “Do we need a new heading element? We don’t know.”
PanelKit 2.0
Version 2.0 of the aforementioned PanelKit. PanelKit is a UI framework that enables panels on iOS. A panel can be presented in the following ways: Modally As a popover Floating (drag the panel around) Pinned (either left or right) This framework does all the heavy lifting for dragging panels, pinning them and even moving/resizing them …
Design Systems and CSS Grid
Stuart Robson uses CSS Grid for what it’s meant to be used for: creating a grid. He evens creates a faux subgrid by leveraging calc() to define the two margin-columns. .container { grid-template-columns: [full-start] minmax(calc(calc(100% – 1008px) / 2), 1fr) [main-start] repeat(14, [col-start] 1fr) [main-end] minmax(calc(calc(100% – 1008px) / 2), 1fr) [full-end]; } Add in …
Parcel: A blazing fast, zero configuration web application bundler
Earlier this week Parcel got dropped and it received quite some attention, because it tackles two important things when compared to other bundlers such as Webpack: The first reason I was motivated to build a new bundler was performance. I’ve worked on some pretty large apps with thousands of modules, and was always disappointed with …
Continue reading “Parcel: A blazing fast, zero configuration web application bundler”
Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior
Continue reading “Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior“
Implement FLIP transitions easily with flipping
Back in 2015 Paul Lewis published a brilliant article named FLIP your animations, a technique to getting smooth animations on the web. FLIP stands for First, Last, Invert, Play First: before anything happens, record the current (i.e., first) position and dimensions of the element that will transition. You can use element.getBoundingClientRect() for this, as will …
Continue reading “Implement FLIP transitions easily with flipping”
NYSKeyboardHelper – A helper for all your iOS keyboard needs
Matthias Nys, a former student of mine, has released his first pod NYSKeyboardHelper, a helper which resizes a scrollview so that it doesn’t go under the keyboard. Add a constraint to your project’s Storyboard and set NYSKeyboardHelper as the custom class, or add it programmatically: let keyboardConstraint = NYSKeyboardHelper(item: self.view, attribute: .bottom, relatedBy: .equal, toItem: …
Continue reading “NYSKeyboardHelper – A helper for all your iOS keyboard needs”