This media is not supported in your browser
VIEW IN TELEGRAM
You can make the UI cleaner by reducing or removing scrollbars using the scrollbar-width property
Example of a thin scrollbar:
Example of a hidden scrollbar (the area remains scrollable):
Suitable for sidebars, data tables, chat panels, dashboards with lots of scrolls, carousels, touch interfaces.
As a result, the scroll works, but the UI looks neater
💎 @Htmlcss_channels | #css #JavaScript #HTML
Example of a thin scrollbar:
ul {
scrollbar-width: thin;
}Example of a hidden scrollbar (the area remains scrollable):
.cards-container {
scrollbar-width: none;
}Suitable for sidebars, data tables, chat panels, dashboards with lots of scrolls, carousels, touch interfaces.
As a result, the scroll works, but the UI looks neater
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1🙏1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5🙏1
This media is not supported in your browser
VIEW IN TELEGRAM
Making smooth scrolling to elements using the scrollIntoView method
JS:
💎 @Htmlcss_channels | #css #JavaScript #HTML
JS:
const links = document.querySelectorAll('.link');
links.forEach((item) => {
item.addEventListener('click', (e) => {
e.preventDefault();
let id = item.getAttribute('href');
let formattierID = id.substring(1);
let section = document.getElementById(formattierID);
section.scrollIntoView({
behavior: 'smooth',
});
});
});Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Shoe Swap
The logic for switching slides is implemented in JS. Animated in SCSS.
Code
💎 @Htmlcss_channels | #css #JavaScript #HTML
The logic for switching slides is implemented in JS. Animated in SCSS.
Code
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
ابزارهای موجود در این مقاله به ساده‌سازی و سرعت بخشیدن به فرآیند توسعه و آزمایش front-end کمک می‌کنند.
- از استخراج سبک های CSS از وب سایت ها گرفته تا تجزیه و تحلیل و بهینه سازی SEO.
https://proglib.io/p/15-superpoleznyh-plaginov-chrome-v-pomoshch-frontenderu-2024-09-20
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7
اگر قصد داری معماری میکروفرانت اند را اصولی و مرحله‌به‌مرحله یاد بگیری، این لیست می‌تواند یک نقطه شروع محکم و قابل اتکا باشد.
https://github.com/billyjov/microfrontend-resources
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Facebook introduced StyleX, a styling system that combines the convenience of CSS-in-JS with the performance of static CSS.
It generates collision-resistant atomic styles and allows you to write expressive, type-safe, and super-fast code.
StyleX is already used in all of the company's products.
The main idea is to compile styles at build time so that the CSS code does not grow with the application.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Top websites to practice your frontend skills:
➡️ Codewell: https://codewell.cc
➡️ CSSBattle: https://cssbattle.dev
➡️ LeetCode https://leetcode.com
➡️ Codewars https://codewars.com
➡️ Frontend mentor https://frontendmentor.io
➡️ CodinGame https://codingame.com
💎 @Htmlcss_channels
Please open Telegram to view this post
VIEW IN TELEGRAM
cssbattle.dev
The funnest CSS game for web designers & developers
❤1
Forwarded from هشتگ تبلیغ تخصصی (گسترده)
🗣 سرفصل ها:
⏺️ آشنایی با OKR
⏺️ انواع طرز فکر
⏺️ از مدیریت علمی تا آشنایی با MBO و OKR
⏺️ اهداف و نتایج کلیدی موثر
⏺️ مدیریت چرخه OKR
⏺️شناسایی و پیادهسازی KPI در سازمان
⏺️ مربیگری OKR
🏛 موسسه توسعه
➖➖
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2