Fundamentals
Добро пожаловать в Долину Кода. Ваше путешествие в мир веб-разработки начинается здесь. В разделе «Основы» вы узнаете об основных строительных блоках Интернета, Веба и о том, как работает его основной протокол (HTTP).
https://thevalleyofcode.com/
👉 @frontend_1
Добро пожаловать в Долину Кода. Ваше путешествие в мир веб-разработки начинается здесь. В разделе «Основы» вы узнаете об основных строительных блоках Интернета, Веба и о том, как работает его основной протокол (HTTP).
https://thevalleyofcode.com/
👉 @frontend_1
Media is too big
VIEW IN TELEGRAM
Проект для начинающих на JavaScript – Урок по созданию игры Змейка
В этом уроке программирования для начинающих вы научитесь создавать ретро-игру "Змейка", вдохновленную культовой игрой на Nokia, с использованием чистых HTML, CSS и JavaScript! С помощью JavaScript вы научитесь рисовать игровое поле, создавать змейку и случайно генерируемую еду, заставлять змейку двигаться, увеличивать её размер при поедании еды и ускорять её движение. Вы также научитесь вести счёт, отслеживать столкновения змейки и отображать ваш рекорд.
⌨️ (00:00) What we are building / Finished snake game
⌨️ (01:57) Setting up our HTML
⌨️ (10:25) Styling with CSS
⌨️ (27:05) Creating the snake game logic with JavaScript
источник
👉 @frontend_1
В этом уроке программирования для начинающих вы научитесь создавать ретро-игру "Змейка", вдохновленную культовой игрой на Nokia, с использованием чистых HTML, CSS и JavaScript! С помощью JavaScript вы научитесь рисовать игровое поле, создавать змейку и случайно генерируемую еду, заставлять змейку двигаться, увеличивать её размер при поедании еды и ускорять её движение. Вы также научитесь вести счёт, отслеживать столкновения змейки и отображать ваш рекорд.
⌨️ (00:00) What we are building / Finished snake game
⌨️ (01:57) Setting up our HTML
⌨️ (10:25) Styling with CSS
⌨️ (27:05) Creating the snake game logic with JavaScript
источник
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем адаптивные карточки с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/cards-04
👉 @frontend_1
https://github.com/atherosai/ui/tree/main/cards-04
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Путешествие в шейдеры
А что если я скажу вам, что для создания графики, такой простой, как градиенты, или такой сложной, как эффекты дождя, достаточно всего нескольких строк кода? Добро пожаловать в мир шейдеров!
Шейдеры уже несколько лет вызывают у меня восхищение, но каждый раз, когда я пытался углубиться в эту тему, я чувствовал себя так, будто заново учусь читать и писать — это было ошеломляюще. Когда я перевел этот сайт на Svelte, я увидел возможность заменить простую CSS-анимацию на главной странице анимацией на основе шейдеров. Оригинальная CSS-анимация изменяла свойство
https://www.mayerowitz.io/blog/a-journey-into-shaders
👉 @frontend_1
А что если я скажу вам, что для создания графики, такой простой, как градиенты, или такой сложной, как эффекты дождя, достаточно всего нескольких строк кода? Добро пожаловать в мир шейдеров!
Шейдеры уже несколько лет вызывают у меня восхищение, но каждый раз, когда я пытался углубиться в эту тему, я чувствовал себя так, будто заново учусь читать и писать — это было ошеломляюще. Когда я перевел этот сайт на Svelte, я увидел возможность заменить простую CSS-анимацию на главной странице анимацией на основе шейдеров. Оригинальная CSS-анимация изменяла свойство
border-radius
, создавая спокойную и минималистичную анимацию, как показано выше.https://www.mayerowitz.io/blog/a-journey-into-shaders
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Как сделать так, чтобы Next Image всегда вписывалось в родительский контейнер, оставаясь полностью видимым
👉 @frontend_1
👉 @frontend_1
День рождения онлайн-школы METHED 🥳
Прокачай свои навыки за 3 дня – присоединяйся к интенсиву!
В рамках интенсива мы сосредоточимся на разработке веб-приложения для отображения расписания автобусов в реальном времени, используя Node.js и JavaScript.
Что вас ждёт на интенсиве?
- Разработка серверной части с использованием Node.js и Express
- Клиентская часть на JavaScript
- Интеграция WebSocket и развертывание на хостинг
Стартуем уже скоро, регистрируйся: https://tglink.io/ee978ef612ee
Прокачай свои навыки за 3 дня – присоединяйся к интенсиву!
В рамках интенсива мы сосредоточимся на разработке веб-приложения для отображения расписания автобусов в реальном времени, используя Node.js и JavaScript.
Что вас ждёт на интенсиве?
- Разработка серверной части с использованием Node.js и Express
- Клиентская часть на JavaScript
- Интеграция WebSocket и развертывание на хостинг
Стартуем уже скоро, регистрируйся: https://tglink.io/ee978ef612ee
Совет по CSS 💡
Знаете ли вы, что свойство gap можно использовать и для макета flexbox? ✨
👉 @frontend_1
Знаете ли вы, что свойство gap можно использовать и для макета flexbox? ✨
👉 @frontend_1
Как работает SVG ViewBox
Данная статья с интерактивными примерами поясняет, как применять атрибут viewBox в SVG.
Raster vs. Vector
Render Image
Inline SVG
Coordinates
View Box
Pan & Zoom
Zoom to Square
Animate
React Spring
Scaling Stroke
Use Case
https://svg.bradwoods.io/lessons/viewbox
👉 @frontend_1
Данная статья с интерактивными примерами поясняет, как применять атрибут viewBox в SVG.
Raster vs. Vector
Render Image
Inline SVG
Coordinates
View Box
Pan & Zoom
Zoom to Square
Animate
React Spring
Scaling Stroke
Use Case
https://svg.bradwoods.io/lessons/viewbox
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем меню профиля с использованием HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/tree/main/dropdown-menu-09
👉 @frontend_1
https://github.com/atherosai/ui/tree/main/dropdown-menu-09
👉 @frontend_1
Какие возможности и преимущества предлагают Node.js и Deno? Хотите узнать, какая из этих сред лучше подходит для ваших проектов? 👀
Всего за пару часов вы научитесь уверенно использовать Node.js и Deno для создания эффективных и современных приложений. Вы узнаете, какие паттерны и инструменты применять в зависимости от задач.
Присоединяйтесь к открытому вебинару 2 сентября в 20:00 мск.
Урок предназначен для разработчиков, которые хотят использовать среды Node.js и Deno в своей работе.
Встречаемся в преддверии старта курса «JavaScript Developer. Professional». Все участники вебинара получат специальную цену на обучение! Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/czQMYo
Всего за пару часов вы научитесь уверенно использовать Node.js и Deno для создания эффективных и современных приложений. Вы узнаете, какие паттерны и инструменты применять в зависимости от задач.
Присоединяйтесь к открытому вебинару 2 сентября в 20:00 мск.
Урок предназначен для разработчиков, которые хотят использовать среды Node.js и Deno в своей работе.
Встречаемся в преддверии старта курса «JavaScript Developer. Professional». Все участники вебинара получат специальную цену на обучение! Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/czQMYo
Please open Telegram to view this post
VIEW IN TELEGRAM
Сборка мусора в JavaScript
Каждый из нас, хотя бы раз, слышал о сборке мусора. Мы знаем, что где-то там работает сборщик мусора, убирая за нами ненужные объекты. Но сколько из нас знают, как он устроен под капотом?
В этой статье мы заглянем под капот этого процесса, поймем, как работает память, и изучим алгоритм сборки мусора.
Поехали убираться!
https://habr.com/ru/articles/779186/
👉 @frontend_1
Каждый из нас, хотя бы раз, слышал о сборке мусора. Мы знаем, что где-то там работает сборщик мусора, убирая за нами ненужные объекты. Но сколько из нас знают, как он устроен под капотом?
В этой статье мы заглянем под капот этого процесса, поймем, как работает память, и изучим алгоритм сборки мусора.
Поехали убираться!
https://habr.com/ru/articles/779186/
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡
Легко реализуйте закрепленный заголовок таблицы 🤩
https://www.codewithshripal.com/playground/css/sticky-table-headers
👉 @frontend_1
Легко реализуйте закрепленный заголовок таблицы 🤩
https://www.codewithshripal.com/playground/css/sticky-table-headers
👉 @frontend_1
Магия CSS на практике: советы по вёрстке от гика
Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.
Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня я расскажу:
🔵 как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
🔵 про свойство inset, сокращающее код на целых три строки;
🔵 мой сниппет для расширения интерактивной области у кнопок и ссылок;
стиль написания медиа-запросов, позволяющий сократить количество правил;
🔵 альтернативный способ центрирования элемента без свойства transform.
https://habr.com/ru/companies/ruvds/articles/822461/
👉 @frontend_1
Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.
Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня я расскажу:
стиль написания медиа-запросов, позволяющий сократить количество правил;
https://habr.com/ru/companies/ruvds/articles/822461/
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
Магия CSS на практике: советы по вёрстке от гика. Часть 2
Часть 1
Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня я расскажу:
🔵 какие правила у меня есть при именовании CSS-переменных для дизайн-систем;
🔵 на какие логические свойства вам стоит обратить внимание;
🔵 зачем нужно делать прозрачные рамки;
🔵 как я делаю зависимость значения одного свойства от других более явным;
🔵 про пользу «внутренних» переменных.
Давайте посмотрим, что я вам подготовил.
https://habr.com/ru/companies/ruvds/articles/829174/
👉 @frontend_1
Часть 1
Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня я расскажу:
Давайте посмотрим, что я вам подготовил.
https://habr.com/ru/companies/ruvds/articles/829174/
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Использование CSS Grid и grid-template-areas для создания отзывчивого двухколоночного макета 🧑💻🚀
👉 @frontend_1
👉 @frontend_1