Skip to content
View firefoxic's full-sized avatar
🦊
🦊
Block or Report

Block or report firefoxic

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
firefoxic/README.md

Hello! I am a frontend developer and mentor for beginners.

Tasks I Handle

Frontend Development

  • 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.

Working with Legacy Code

  • 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.

Working with Graphics

  • 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).

Project Setup

  • Migrating from npm and yarn to pnpm — 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 or eslint@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.

Open Source

My Own Projects

Contributing

  • 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 🤭

Pinned Loading

  1. stylelint-stylistic/stylelint-stylistic stylelint-stylistic/stylelint-stylistic Public

    A collection of stylistic rules for Stylelintin in a form of a plugin.

    JavaScript 72 4

  2. conjure conjure Public

    🪄 Conjure images, icons and favicons for your frontend project.

    JavaScript 4

  3. eslint-config eslint-config Public

    Shared config for eslint by firefoxic.

    JavaScript 1

  4. stylelint-config stylelint-config Public

    Shared config for stylelint by firefoxic.

    JavaScript 1

  5. update-changelog update-changelog Public

    CLI utility for automatic update of CHANGELOG.md

    JavaScript

  6. gulp-stacksvg gulp-stacksvg Public

    Combine svg files into one with stack method

    JavaScript 15 1