#Development #Experiences
Building my faux lego advent calendar · “It feels like current software development.” https://ilo.im/169f71

_____
#Programming #Coding #Lego #Libraries #Frameworks #Workflow #Tooling #AI #WebDev #Frontend

Building my faux lego advent calendar feels like current software development | Christian Heilmann

Another text effect on @codepen: https://codepen.io/thebabydino/pen/ZEZXaZZ

No text duplication whatsoever, no part of the effect baked into the font, no images save for the CSS gradient backdrop, no JS.

All done with #SVG #filter magic 🪄✨ - can you figure out how before checking the code?

#svgFilter #css #code #coding #frontend #textEffect #textEffects #cssGradient #web #dev #webDev #webDevelopment

Outer + inner border for hue ring - 3 methods with a single div, no pseudos, all described in this public Ko-fi post: https://ko-fi.com/post/Outer--inner-border-for-hue-ring--3-methods-A0A51M5XBA

Live demo on @codepen https://codepen.io/thebabydino/pen/RNraELd

Best part? In practice, you'll need to use more than one because none works cross-browser.

#CSS #mask #cssGradient #coding #conicGradient #code #frontend #web #dev #webDev #webDevelopment

Pure #CSS #3D demo on @codepen: polyhedra morphing sequence https://codepen.io/thebabydino/pen/abmNveW

Absolutely no magic numbers, everything computed.

See Pen description for the how behind 😼

#transform #cssTransform #polyhedron #cssTransforms #polyhedra #octahedron #tetrahedron #cube #Maths #geometry #cssVariables #code #coding #frontend #web #dev #webDev #webDevelopment

🔎 SVG, PNG, WebP: Khi nào dùng gì? SVG tốt cho icon/vector, PNG cho ảnh không trong suốt, WebP cho hầu hết ảnh nhờ nén tốt, tăng tốc page speed & Core Web Vitals, cải thiện SEO. Áp dụng workflow tối ưu hoá nhanh chóng. #WebPerformance #SEO #SVG #PNG #WebP #Frontend #TốiƯuHìnhẢnh #WebDev

https://dev.to/frontendtoolstech/svg-vs-png-vs-webp-choosing-the-right-image-format-for-performance-seo-15b4

SVG vs PNG vs WebP: Choosing the Right Image Format for Performance & SEO

Choosing the wrong image format can silently hurt your page speed, Core Web Vitals, and SEO. SVG,...

DEV Community

📢 Hướng dẫn tạo form đăng nhập sci‑fi “Infinity Portal” với HTML & CSS, hiệu ứng 3D, particle. Mã nguồn miễn phí đã sẵn sàng! #WebDev #HTML #CSS #Frontend #LậpTrình #GiaoDiện #CôngNghệ

https://dev.to/ahmod_musa_bd1b2536d20e0e/futuristic-login-form-html-css-building-the-infinity-portal-free-source-code-4l6e

Futuristic Login Form HTML CSS: Building the ‘Infinity Portal’ (Free Source Code) https://ahmodmusa.com/futuristic-login-form-html-css/

...

DEV Community

Stop coding from scratch! Get the powerful Pandemic Tracker Admin Dashboard Free with Angular and the beautiful Angular Material design system.
https://zurl.co/lUJ0O

#Angular #MaterialDesign #WebDev #Freebie #AdminTemplate #Frontend #Developer #Trending #Code #free

React vs Angular: Hai framework front‑end lớn nhất hiện nay. React dùng JSX, hook (useState, useEffect) với state bất biến; Angular chạy TypeScript, template HTML, binding hai chiều, CLI tự động tạo boilerplate. Cả hai đều mạnh, dev nên biết cả hai. Bạn thích bên nào? #React #Angular #Frontend #WebDev #LậpTrình #CôngNghệ

https://dev.to/totoledao/react-and-angular-common-patterns-comparison-b15

React and Angular: Common Patterns Comparison

This is by no means intended to be an in-depth guide to the differences between React and Angular. On...

DEV Community

Good for #webdev and other uses.

https://fontgenerator.design/symbols

Curated symbol sets for #math, #currency, arrows, geometry, decorative marks, tech/UI, and punctuation. Tap any symbol to copy/paste instantly.

#HTML #CSS #frontend

Unicode Symbols - Copy & Paste

Math, currency, arrows, geometry, decorative, tech, and punctuation symbols with instant copy.

FontGenerator.design

Chia sẻ code TypeScript chung cho Frontend và Backend trong Monorepo: Đừng cố ép một build cho cả hai. Frontend cần ESM, Backend Node cần CommonJS.

Giải pháp là tạo 2 build riêng (dist/esm và dist/cjs) từ cùng source code. Dùng package.json chỉ định rõ:
- "exports": { "import": ..., "require": ... }
- "main" (CJS) và "module" (ESM).

Điều này đảm bảo định dạng module đúng cho từng môi trường mà không cần hack runtime. #TypeScript #Monorepo #Backend #Frontend #JSModules

https://dev.to/aoda-zhan