Hello! I am a frontend developer and mentor for beginners.
- Creating UI components — this allows for code reuse.
- Complex restructuring of non-standard grids — this gives more freedom to designers.
- Utilizing logical properties, values, and units — this makes it easier to internationalize the project for languages with different writing directions.
- Other everyday frontend development tasks focused on accessibility, cross-browser compatibility, adaptability, and a component-based approach.
- Moving icons from markup to styles — this lightened the final markup files, thereby speeding up page loading and rendering.
- Solving accessibility issues in a live project — even in older projects, it's possible to avoid completely rewriting legacy code.
- Migrating from SCSS to CSS — this expanded the pool of potential newcomers to the project.
- Automating the optimization of vector and raster graphics, specifically by moving the optimization out of the build process and into separate npm scripts so that graphics are processed only once and then used as-is during the build — this simplified the build configuration, sped up production builds, and eliminated delays in the development build.
- Automating the use of optimized raster graphics in templating engines (Nunjucks, Twig) and frameworks (Astro, Svelte) — this allowed for the removal of Astro’s built-in Picture component (by generating image metadata files) and eliminated the constant heavy regeneration of AVIF images in the development build (by using pre-optimized graphics).
- Migrating from
npm
andyarn
topnpm
— this solved issues with problematic npm packages that ensured cross-platform compatibility and enabled the full power of shell scripts in npm scripts, even on Windows. - Configuring project configs and linters — sometimes updating tools to new major versions (e.g.,
stylelint@16
oreslint@9
) is a challenging task. - Setting up frontend builds on Gulp (including upgrading to version 5) and Astro, as well as deploying the project to GitHub Pages, Netlify, and Vercel.
@stylistic/stylelint-plugin
@stylistic/stylelint-config
@firefoxic/conjure
@firefoxic/update-changelog
@firefoxic/utils
@firefoxic/eslint-config
@firefoxic/stylelint-config
gulp-stacksvg
gulp-html-bem-linter
- web-standards — migration to flat-config when updating to
eslint@9
. - astro.js — improving the final markup generated by the framework.
- mdn — improving the fallback example for
:focus-visible
. - w3c — my contribution to the CSS Fonts specification 🤭