Let's start by saying something which is not new: the Javascript ecosystem has become quite complicated. Whether your afternoon was completely consumed by tweaking webpack, creating a gulp pipeline, choosing your next CSS framework, adding typescript support to your old side-project or just navigating the ever expanding frontend framework libraries being born each day, you already know what I mean.
Enter Deno 2.0 🦕
I've always been curious about Deno. The Previous version was not truly compatible with npm. The promise of native support for TS is good, but it wasn't something that really made me jump in the Deno 1.X train.
Then, this appeared in my Youtube feed:
What do we build 🛠️?
A tool I'd use, short, and open source
TL;DR: Picto!
Picto
Easily showcase your skills with flare 🔥
Picto is a tool that generates dynamic images to showcase the programming languages, technologies, and tools you’ve learned.
🤔 How to create your own Picto?
That's easy! Picto allows you to customize the appearance and layout of the generated image using query parameters.
https://mypicto.xyz/icons
?i=php,ruby,javascript,react,laravel
&cols=4
| Parameter | Type | Default | Description |
|---|---|---|---|
| i | string | - | Icon identifier |
| cols | string (numeric) | 8 | Number of columns to display |
| size | string (numeric) | 100 | Icon size |
| bg | string | - | Background setting (none or empty string) |
| rounded | string | - | Border radius setting (none, rounded or numeric: 0, 6, 12, etc.) |
Examples
No rounded corners and 2 columns
https://mypicto.xyz/icons?i=html,css,javascript,python&round=none&cols=2
No background
https://mypicto.xyz/icons?i=html,css,javascript,python,vue&bg=none&cols=4
📍 Roadmap
- WIP: Add theming, light, dark & auto
- Add more icons, of course (Open an Issue to add your missing icon).
- Add kits/groups (MERN, MEAN, LAMP, etc)
- Improve…
Ok now, for real
My Github profile icons needed a refresh, especially since they looked quite dull in dark mode.
Then, I reread this awesome article about using SVGs in favicons, that 'intelligently' switches appearances based on the user's preferred color scheme.
The cool things plain CSS can do, huh?
This gave me an idea 💡
- Create a bunch of cool SVGs for profile use.
- Use CSS variables to configure important values. Think corners, backgrounds, fill, theme, etc.
- Create a small backend (with Deno!) that will serve these icons if the proper parameters are provided.
- Alter or add
<style>tags to update SVGs on the fly based on the parameters provided. - Enjoy ✨.
How Deno was better than I expected
- 🎨🦕 code formatting out of the box. No prettier config here 🙌🏻.
- ✅🦕 has linting also out of the box. No eslint here either 😎
- 👁🦕 can serve the file locally and watch it's changes. Nodemonwho?
- 📦🦕 has compatibility with all the packages in npm I'm already familiar with, plus a few from their own standard library.
Using Deno
If you want Deno to work in your VSCode you need to add their extension and add enable it in settings file
{
"deno.enable": true,
}
Formatting with Deno [docs]
If you want Deno to format the code from the CLI it's quite easy actually.
$ deno fmt
This will format the whole project, but you can scope it to only format one file.
It can also format your files on save like prettier would. Just update your settings file like so:
{
"deno.enable": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "denoland.vscode-deno",
}
Linting [docs]
Deno provides lint in your IDE without needing to configure any other extension. That said, they provide a very convenient way to lint your project.
$ deno serve --watch main.ts
Serving with Deno [docs]
Deno has quite a beefy CLI, and serving your app to test locally is a breeze
$ deno serve --watch main.ts
That's it?
This is not a huge project, but there is a few more cool things to show and tell, which I'll be doing in future articles:
- Building dynamic SVGs.
- Using style variables to manipulate everything.
- Theming and using user's color scheme to replace colors.
- Docs and building a reliable source of information for users.
I haven't finished the tool yet. You can check the roadmap and even suggest (or contribute cool stuff) in Picto's repository.
This is an opportunity for me to learn building in public 🌱, so I count on the DEV community to make this experience even better. So if you have any suggestions or comments, let me know 🚀!
Top comments (0)