Awesome GitHub RepositoriesVisual Layout Debugging

FeHelper est une boîte à outils d'extension de navigateur web et un kit de développement frontend intégré à Chrome, Firefox et Edge. Il sert d'utilitaire de transformation de données, d'outil de débogage de page web et d'assistant de codage alimenté par l'IA. Le projet se distingue par l'intégration de modèles locaux et d'API compatibles avec OpenAI pour écrire, refactoriser et réparer du code directement dans le navigateur. Il fournit également des capacités pour générer des schémas TypeScript et des définitions Zod à partir d'échantillons de données en utilisant l'IA. La boîte à outils couvre un large éventail d'utilitaires pour développeurs, incluant le débogage réseau pour les connexions HTTP et WebSocket, l'encodage et le décodage de données pour des formats comme JWT et Base64, et des outils de traitement JSON pour formater, réparer et comparer des structures. Elle inclut également des outils frontend pour la mesure de mise en page, le formatage de code source et l'injection de scripts utilisateur personnalisés. Des capacités supplémentaires incluent une variété d'outils média et documentaires pour l'édition Markdown, le traitement de codes QR et la conversion d'images, ainsi que des générateurs d'utilitaires pour des identifiants uniques et des mots de passe sécurisés.

Neat est un framework de grille Sass et un système de mise en page responsive utilisé pour construire des architectures web fluides basées sur des colonnes. Il fournit une approche structurée pour gérer les propriétés de mise en page et les paramètres de conception globaux via une carte de configuration centrale et un ensemble d'outils de mixins et de fonctions Sass. Le système se distingue par sa capacité à gérer des architectures de grille imbriquées, permettant de placer des grilles flexibles à l'intérieur d'autres conteneurs de grille tout en maintenant un alignement précis et un contrôle des gouttières. Il inclut également des outils de développement pour le débogage de mise en page frontend qui affichent des lignes de guidage en arrière-plan pour visualiser le placement des colonnes et les largeurs de gouttière. Le framework couvre une large gamme de primitives de mise en page, y compris l'étendue des colonnes, le décalage et la réorganisation, ainsi que des conteneurs de page centrés et la gestion des clearfix. Il permet une conception responsive grâce à des raccourcis de media queries qui adaptent les étendues de colonnes et les configurations de points de rupture à travers différentes largeurs de fenêtre. Une interface en ligne de commande est fournie pour installer, mettre à jour ou supprimer les fichiers du framework de mise en page dans un répertoire de projet.

Susy is a Sass layout framework and grid computation engine designed to automate complex mathematical layout calculations within stylesheets. It functions as a responsive grid generator that calculates column widths, gutters, and spans based on customizable viewport breakpoints to ensure precise element alignment. The system includes a visual layout debugger that generates browser-based grid overlays to verify column alignment and baseline rhythm during development. It also provides utilities for creating repeating background colors and gradients using a template-based syntax. The framework