Road Map 👣

Front-End Web Developers 💎

#RoadMap #FrontEnd
@ProgrammingTip

Zeplin ✨

Zeplin is the ultimate collaboration tool between designers and developers.

It cuts meetings in half and ensures that designs are implemented perfectly, however complex. 🔨

[Website] : https://zeplin.io

#Tool #FrontEnd
@ProgrammingTip

Sympli ✨

Design handoff, implementation,
and collaboration for web and mobile
product teams. ✏️

Sympli works with 😲 :
• Photoshop
• Sketch
• Android Studio
• XCode

https://t.me/pgimg/29

[ Website ] : https://sympli.io/

〰〰〰〰〰〰
#Tools #FrontEnd
@ProgrammingTip

WAVE ✨

WAVE is tool to help web developers make their web content more accessible. ✅

WAVE cannot tell you if your web content is accessible. ❌

Only a human can determine true accessibility. 👥

But, WAVE can help you evaluate the accessibility of your web content. 👀

https://t.me/pgimg/38

[ Website ] : http://wave.webaim.org

〰〰〰〰〰〰〰〰〰〰〰
#FrontEnd #Web #Tools
@ProgrammingTip

Enjoy CSS 🍻

Online CSS3 Code Generator With a Simple Graphical Interface. 🤠

[ Website ] : http://enjoycss.com

〰〰〰〰〰〰
#FrontEnd #Css
@ProgrammingTip

UnCSS ✨

UnCSS is a tool that removes unused CSS from your stylesheets. ✅

It works across multiple files and supports Javascript-injected CSS. 🗂


How❓🤔

1️⃣ The HTML files are loaded by jsdom and JavaScript is executed.

2️⃣ All the stylesheets are parsed by PostCSS.

3️⃣ document.querySelector filters out selectors that are not found in the HTML files.

4️⃣ The remaining rules are converted back to CSS.

https://t.me/pgimg/43

[ Website ] : https://uncss-online.com/

[ Github ] : https://github.com/giakki/uncss

〰〰〰〰〰〰
#FrontEnd #Css #Tools
@ProgrammingTip

Proto.io - Prototypes that feel real 💎

Create fully-interactive high-fidelity prototypes that look and work exactly like your app should. No coding required. 👌

#FrontEnd
@ProgrammingTip

Semantic UI React ⚛️

Semantic UI React is the official React integration for Semantic UI .🙅🏻‍♂️

🔸 jQuery Free
🔹 Declarative API
🔸 Augmentation
🔹 Shorthand Props
🔸 Sub Components
🔹 Auto Controlled State

https://t.me/pgimg/72

[ Usage ] : https://react.semantic-ui.com/usage

[ Website ] : https://react.semantic-ui.com

〰〰〰〰〰〰
#React #Semantic #FrontEnd
@ProgrammingTip

Animate Calligraphy with SVG in CSS 🦋

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. 🤔

But upon closer inspection, what the questions are really trying to ask is something like this :

How do you animate calligraphy ⁉️

This article answers this question. ✨


https://t.me/pgimg/143

[ Article ] : https://kutt.it/g0QuEh

〰〰〰〰〰〰
#HTML #CSS #FrontEnd
@ProgrammingTip

NGXS ✨

NGXS is a state management pattern + library for Angular. 🅰️

It acts as a single source of truth for your application's state, providing simple rules for predictable state mutations. ⚡️

NGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators. 🔥

NGXS tries to make things as simple and accessible as possible. 🧩

There can be a lot of boilerplate code in state management, thus a main goal of NGXS is to reduce boilerplate allowing you to do more things with less. 💎


https://t.me/pgimg/193

[ GitHub ] : github.com/ngxs/store
[ Website ] : ngxs.gitbook.io

〰️〰️〰️〰️〰️〰️
#Angular #StateManagement #FrontEnd
@ProgrammingTip

Pickr 🌈

Flat, simple, responsive and hackable Color-Picker library. ✨
No dependencies, no jQuery. ⚡️
Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more❗️


[ Demo ] : simonwep.github.io/pickr
[ Github ] : github.com/Simonwep/pickr

〰️〰️〰️〰️〰️〰️
#CSS #FrontEnd
@ProgrammingTip

Vuestic UI - Free and Open Source UI components library for Vue 3 🌈

Vuestic UI is a components library for Vue 3. 💎

It features more than 50 highly customisable components, forever free and Open Source. Vuestic Admin (https://github.com/epicmaxco/vuestic-admin) is a great example of a real-world web application based on Vuestic UI and is used to quicly bootstrap frontends of web applications.


[ Github ] : https://github.com/epicmaxco/vuestic-ui

〰️〰️〰️〰️〰️〰️
#FrontEnd #Vue #UiKit
@ProgrammingTip