Senior Frontend - javascript, html, css. Страница 58

Почему программист должен уметь хорошо писать 1. Умение писать помогает вам лучше коммуницировать Наиболее очевидное достижение — прокачка коммуникационных навыков. Чем чаще пишешь, тем проще выражать свои мысли, не беспокоясь о том, правильные ли слова вы подбираете. Самое приятное в писательстве – твое развитие легко прослеживается. 2. Когда пишешь на публику, учишься готовить более качественную документацию Важный критерий, по которому узнается хороший разработчик – это умение излагать технические требования и спецификации другим заинтересованным лицам. Когда пишешь, важно знать свою целевую аудиторию, то же касается общения с заказчиками и написания какой угодно технической документации. 3. Писательство помогает оценить причуды программирования Для писательства и для программирования требуется базовое понимание таких феноменов, как синтаксис, структура и семантика. Разработчик, пишущий тексты, учится мыслить по-новому. 👉 @seniorFront

Menu Switcher Необычный переключатель. Всем элементам списка задается свойство transform со значением rotate. При переключении, у элементов изменяется градус поворота. 👉 @seniorFront

💻 2 июня в OTUS пройдет открытый вебинар для начинающих JS-разработчиков «Основы GraphQL» 🎯 Спикер: Николай Лапшин, Senior Full Stack Developer в компании Power Tech. На вебинаре: ✔️ Разберем основы GraphQL: query, mutation, subscription. ✔️ Сравним REST и GraphQL. ✔️ Поговорим о системе типов. Урок является частью онлайн-курса «JavaScript Developer. Basic» для новичков в программировании. Используйте эту возможность познакомиться с преподавателем и оценить курс. ➡️ РЕГИСТРАЦИЯ https://otus.pw/1xJN/

👉 @seniorFront

Spotify Wall Анимированная галерея, сверстанная на HTML и SCSS. 👉 @seniorFront

Word Finder Создайте метод для Dictionary, который будет находить строки массива. Эти строки должны соответствовать введенному паттерну, содержащему буквы и плейсхолдеры "?", соответствующие любой букве. Примеры: var fruits = new Dictionary(['banana', 'apple', 'papaya', 'cherry']); fruits.getMatchingWords('lemon'); // must return [] fruits.getMatchingWords('cherr??'); // must return [] fruits.getMatchingWords('?a?a?a'); // must return ['banana', 'papaya'] fruits.getMatchingWords('??????'); // must return ['banana', 'papaya', 'cherry'] 👉 @seniorFront

1 июня в 19:00, состоится митап с командой JavaScript Альфа-Банка и приглашённым гостем из команды X5. Можно прийти и пообщаться вживую в офисе Альфа-Банка на проспекте Андропова 18к3, или посмотреть онлайн-трансляцию! Темы и спикеры: 📌 Как управлять командой разработки так, чтобы проект процветал. Илья Агапов, Frontend Team Lead в Альфа-Банке. 📌 Переход на React-router v6: подводные камни и альтернативы. Андрей Новиков, Старший разработчик в Альфа-Банке. 📌 RTK query. Антон Степанов, Frontend разработчик в Альфа-Банке. 📌 Карьерная лестница как дорога в ад. Андрей Смирнов, Руководитель разработки клиентских приложений в Х5 Group. Митап бесплатный, но нужна регистрация на Alfa Digital, чтобы организаторы рассчитали количество мест и прислали вам ссылку на трансляцию, если вы хотите подключиться онлайн. Регистрируйтесь по ссылке 👉https://bit.ly/3GeVK9H

Science Slider Анимированный слайдер, созданный в виде svg картинки, анимированной библиотекой TweenMax. 👉 @seniorFront

accent-color С помощью accent-color можно управлять цветом контролов. Простой способ сделать красивый чекбокс или радиокнопку, без танцев с бубном и трюков. Пример Сравните стандартный и стилизованный при помощи accent-color чекбоксы: <input type="checkbox"> <input class="custom" type="checkbox"> .custom { accent-color: hotpink; } Не во всех браузерах реализована полная поддержка. Например, в Safari 15.4 свойство не срабатывает для <input type="range"> 👉 @seniorFront

Liquid Loader В этом видео автор создает оригинальный загрузчик на HTML и CSS. 👉 @seniorFront

🔥 Тест по JS от OTUS 🔥 — Ответьте на 20 вопросов и проверьте, насколько хорошо вы знаете JavaScript. Сможете сдать — пройдёте на продвинутый курс JavaScript Developer. Professional с хорошей скидкой 🎁 👉🏻 ПРОЙТИ ТЕСТ: https://otus.pw/Myam/

Agressive Toggle Анимированный переключатель на HTML и SCSS. 👉 @seniorFront

Digital clock with separate indicators Необычные часы, сделанные из трех svg картинок, параметры которых задаются через JS с помощью логики вычисления текущего времени пользователя. 👉 @seniorFront

HolyJS 2022 Spring — конференция для JavaScript-разработчиков от JUG Ru Group, в формате online+offline Online-часть: 8–10 июня. Offline-день: 23 июня. В online вас ждут выступления, посвященные трендам и новым технологиям, обмен опытом и общение в чатах. На offline-дне в Санкт-Петербурге можно вживую послушать спикеров, лично познакомиться с коллегами и потусоваться у стендов партнеров. В программе: ✔ Каким бывает легаси во фронтенде, как с ним справляться и не допускать его появления. ✔ Что такое proposal Wasm GC, почему его так долго делают и какой путь прошли движки за 2 года экспериментов. ✔ Как построить дизайн-систему для продукта с 20-миллионной аудиторией, огромной кодовой базой и массой поверхностей. ✔ Что такое сложность для человеческого мозга и как эти знания помогают писать более понятный код. Подробности и полная программа — на сайте конференции. При покупке билета на конференцию из категории «для частных лиц» используйте промокод: seniorfront2022JRGpc

Атрибут value Его можно использовать для разных тегов: <button>, <option>, <data>, <input>, <li>, <meter>, <progress>. Пример В примере ниже нумерация элементов списка начнётся с 5: <ol> <li value="5">Номер 5</li> <li>Номер 6</li> <li>Номер 7</li> </ol> А в этом примере в поле ввода уже будет написано «Дока»: <form> <label> Название лучшего справочника по вебу: <input type="text" value="Дока"> </label> <button type="submit">Соглашусь!</button> </form> 👉 @seniorFront

CSS Responsive Product Card Hover В этом видео автор создает отзывчивую карточку товара, применяя при этом CSS трансформации, плавность которых достигается использованием CSS свойств transition и transition-delay. Округлая форма карточки создается при помощи свойства clip-path. 👉 @seniorFront

❓ Готовы сделать первый шаг к изучению мощного Node.js? Приглашаем фроненд- и бэкенд-разработчиков на Javascript на открытый урок «Web Servers» 26 мая в 20:00 в OTUS. 👨‍💻 Расскажем про HTTP серверы, разберем плюсы и минусы популярных серверов. Урок рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript. Вебинар пройдет в рамках онлайн-курса «Node.js Developer». 👉 ЗАРЕГИСТРИРОВАТЬСЯ https://otus.pw/tvJQ/

Icon Buttons Оригинальные кнопки с иконками в стиле Glassmorphism на HTML и SCSS. 👉 @seniorFront