rockyourcode: Issue #45
Hello 👋! Thanks for subscribing.
Here are a few articles I've written. I haven't been very active lately, so these are from June and July 2023.
Kickstart Your Neovim Journey With kickstart.nvim
I’ve been curating my Vim config for several years and it has blown up to several files and a lot of obscure settings.
My Vim config is my own, a very individual piece of software that fits my preferences when it comes to text editing.
Since NeoVim 0.8, the Vim fork has introduced new groundbreaking features that allow for smarter autocompletion and language server support.
Lua has also become the preferred way of configuring NeoVim, letting VimScript fall out of favor.
I’ve been grudglingly spending some time to partly port my config to lua to take advantage of the new NeoVim features. But I wasn’t happy with my clobbled-together setup anymore.
A friend on Discord suggested LazyVim to me. LazyVim is a fully-fledged config that transforms the barebones NeoVim config into a powerful IDE.
I tried it out a few weeks ago, but it was a little too much magic for me.
If you are looking for a “one-size-fits-all”-solution, look no further. If you are coming from a different editor like VS Code, LazyVim offers a nice experience out of the box.
But for me, it felt as if I had to “learn a new editor” again. There are many plugins and configurations and you have to spend some time figuring out what’s going on.
This weekend I discovered kickstart.nvim which solves (almost) all my problems.
kickstart.nvim is a minimal configuration that sets some defaults, installs the language server and a few other plugins, adds several key mappings. That’s it.
The configuration is much more digestable than the more fully-fledged LazyVim and I felt that I was able to understand easily what was going on.
kickstart.nvim is meant as a starting point and it excells at that. Out of the box you get an agreeable NeoVim experience, but it doesn’t overwhelm you.
Adding your preferred plugins and keybindings is also quite easy.
I’m pretty happy that I stumbled over this GitHub repo. Maybe it’s worth a look, if you’re interested in a minimal but sufficient NeoVim config.
Links
Use CSS Grid for Decorative Elements
I learned this trick in Rachel Andrew’s workshop.
HTML:
<h1>My heading</h1>
CSS:
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: '';
border-top: 1px solid black;
align-self: center;
}
In the code example provided, we can see how CSS Grid is used to style a heading. The “h1” element is selected in the CSS, and then the “grid” property is applied. This tells the browser to use CSS Grid to create a layout for the heading.
The “grid-template-columns” property specifies the number and width of the columns in the grid. In this case, there are three columns, with the center column set to “auto”. This means that the width of the center column will adjust automatically to fit the content within it.
The “gap” property sets the spacing between the columns and rows in the grid. In this example, there is a 1em gap between each column.
In addition to using CSS Grid to create the layout, the code also demonstrates how generated content can be used to add visual elements to the design. The “::before” and “::after” pseudo-elements are used to create horizontal lines above and below the heading. The “content” property is set to an empty string, so the pseudo-elements do not actually generate any content. Instead, they are used purely for styling purposes.
Links
- CSS Layout Workshop by Rachel Andrew
- YouTube
Use @Hostbinding to Access CSS Variables in an Angular Component
Last week, I needed to access a CSS variable in an Angular template to configure a Chart.js chart.
You can use @HostBinding to achieve this.
What is @HostBinding?
@HostBinding is an Angular decorator that allows developers to bind a directive property to a host element property.
It is used to set a property value on the host element of a component, in this case the component’s root element.
This decorator is used in conjunction with the host property of the @Directive decorator to define a host element.
Here’s an example of how to use @HostBinding to access a CSS variable in your Angular component.
Define your CSS variable in your .css file:
:root {
--primary-color: #007bff;
}
In your component, create a @HostBinding property to bind the value of your CSS variable to a CSS custom property:
@HostBinding('style.--primary-color')
primaryColor = getComputedStyle(document.documentElement)
.getPropertyValue('--primary-color');
This code binds the value of the --primary-color CSS custom property to the primaryColor property of your component.
Now you can access the variable in your Angular component to style your chart:
datasets = [
{
label: 'Dataset 1',
data: Utils.numbers(NUMBER_CFG),
borderColor: this.primaryColor,
}
// more datasets
]
//
If you change your styles in the .css file, your Angular component will pick it up and use the correct color.
Further Reading
How to Download HTML Elements as PDF
As software developers, we often come across situations where we need to provide users with the option to download HTML content as a PDF document. This capability can be especially valuable when we want to enable users to save web pages, reports, or other dynamically generated content for offline use or easy sharing. In this article, we will explore how to accomplish this using jsPDF, a widely used JavaScript library for generating PDF files, along with SVG.
Example in Angular
Let’s consider a practical code example in Angular that demonstrates how to download an HTML element as a PDF with the help of jsPDF and SVG.
However, the code can be used in other web frameworks like React.js, Svelte or vanilla JavaScript.
(The example code doesn't render correctly in the email newsletter, please consult the Stackblitz instead.)
To begin, we have an Angular component that includes a button labeled “Save as PDF” and an HTML element designated with the CSS class .save-as-pdf. When users click the button, it triggers the onSaveAsPdf() method.
Inside the onSaveAsPdf() method, the following steps are performed to download the HTML element as a PDF:
-
The HTML element is identified using
document.querySelector('.save-as-pdf'). This allows us to target the specific element we want to convert to a PDF. -
We calculate the width and height of the element to determine the dimensions of the canvas and the resulting PDF.
-
The HTML element is transformed into an SVG document using the
elementToSVG()function. This step is essential to preserve any SVG elements within the HTML. -
The SVG document is serialized into a string using
XMLSerializer(). This conversion prepares the SVG for rendering onto a canvas. -
We create a canvas element with the calculated dimensions and obtain its 2D context. The canvas will serve as the rendering surface for the SVG.
-
Using the
Canvglibrary, we render the SVG onto the canvas. This process ensures that the visual representation of the HTML element, including any SVG elements, is accurately captured. -
Based on the dimensions of the element, we determine the orientation of the resulting PDF (landscape or portrait). Then, using jsPDF, we create a new PDF document with the appropriate orientation.
-
The rendered canvas is added to the PDF as a JPEG image using the
doc.addImage()method. This step embeds the visual representation of the HTML element into the PDF. -
Finally, we save the PDF with a specified filename using the
doc.save()method.
Summary
You have seen a practical approach to enable users to download HTML content as a PDF document using jsPDF in conjunction with SVG rendering. The provided code example in Angular illustrates the step-by-step process of converting an HTML element into a PDF.
By following the outlined steps, you can effortlessly save dynamic web content, such as web pages, reports, or any other HTML-based information, as PDF files. This functionality opens up possibilities for offline access, easy sharing, and preserving the visual fidelity of the content.
Source/Links
Thanks go to Manuel Navarro for the original implementation using similar libraries.
If you want to see a live example of the article, you can check this Stackblitz.