…dev, tech problems and solutions.
Using Web Components in Astro wasn’t as straightforward as expected. Here’s an example showing how to integrate the obfuscate-link web component into an Astro project.
First, add the Obfuscate-Link web component to the project:
npm install obfuscate-link-web-componentI am currently evaluating PicoCss V2 in Astro project. PicoCss is a CSS / SCSS framework I used for some of my projects because it is small and brings sufficient styling for most HTML Elements. It has integrated light and dark mode, but no theme switcher.
So i was looking for one and found this one for Pico V1:
https://github.com/RWDevelopment/theme_switch
Typically, when integrating emails into websites, I obfuscate the email address to prevent spam bots from collecting them. For React, there were already components that handled this task; however, without React, I couldn’t find a suitable solution.
Therefore, I created a web component: obfuscate-wc that now provides an HTML element capable of obfuscating your email (and some other contact data).
<obfuscate-link id="obfuscate" email="aXZvQGxvY2FsLmRldg==">custom link</obfuscate-link>Code language: HTML, XML (xml)Esbuild is the new cool kid in the bundler world.
It is super fast since its written in Go and comes with a lot of builtin features for modern frontend development.
So i wanted to try it myself and migrated a former gulp build to esbuild.
But as it showed the gulp build was not so modern, as it was just Sass and Javascript minification. No ES6, No React, no JSX with inline styles.
So Esbuild was not working out of the box but needed some extra config and the Sass plugin.
npm i -d esbuild esbuild-plugin-sass
Also I had to rewrite the Javascript to use ES6 modules, but this was fortunatly easy.
Continue reading “Migrating from gulp to esbuild”mashcloud.net is an experiment on collaborative realtime audio editing and music creation.
I did the project within the frame of my BA thesis in audio production last year.
As I moved the code to github this week, I wanted to give a quick overview of the project and its technical underlyings, just in case someone might be interested :)
Continue reading “mashcloud.net – mashup soundcloud audio tracks”
Did you ever wonder how to enable 3rd party plugins (or so called “frameworks“) within the great compass toolset managed by assetic in your edgy symfony 2.1 project?
(If there is more extensive documentation available concerning assetic + CompassFilter, please stop reading on and let me know!)
If you take a look at the filter class itself (it is CompassFilter in the generic Assetic\Filter namespace), you should recognise several option values that you can use in your application wide config.yml file.
But first you have to install the framework plugin following these instructions.
someone just +1’d this nice addon for firefox:
(thanks, conrad :)
Tilt visualizes the DOM in 3D and is a lot faster than i expected.
Continue reading “Tilt – 3D DOM visualization”
Das AsseticBundle ist ein Wrapper um Assetic, ein geniales Tool, um statische Assets für Webprojekte zu verwalten. AsseticBundle ist extrem einfach zu verwenden, einfach die entsprechende Filter-Chain via yaml konfigurieren, um mehr muss man sich nicht kümmern. Natürlich allerdings müssen die zugrundeliegenden Abhängigkeiten im Vorfeld installiert sein. In unserem Falle benötigen wir den Yui-Compressor als jar-File und Less CSS. Less ist ein node.js Modul, was bedingt, dass wir zuvor node.js installieren müssen.
Continue reading “[Symfony 2] AsseticBundle, Less CSS & YUI Compressor unter OSX installieren”
Hier mal eine anfänglich kleine Sammlung zum Thema HTML 5 generell – grob kategorisiert. Vervollständigungen und Streichungen willkommen.
Continue reading “HTML5 – Sammlung von Ressourcen, Dokus und Browser-Fallbacks”
Diesem Mann ist sicher nie langweilig: http://www.addedbytes.com/cheat-sheets/. Hinter diesem Link verbergen sich Cheat Sheets zum Selber-Ausdrucken für alles Denkbare.