Senior Frontend - javascript, html, css
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Менеджер по рекламе: @Spiral_Yuri
Mostrar más
Network:28 130
Suscriptores
+2024 horas
+547 días
+25630 días
Distribuciones de tiempo de publicación
Carga de datos en curso...
Find out who reads your channel
This graph will show you who besides your subscribers reads your channel and learn about other sources of traffic.
Análisis de publicación
| Mensajes | Vistas | Acciones | Ver dinámicas |
01 Как создать радиальный градиент в CSS?
Функция radial-gradient используется для задания фона в виде радиального (кругового, эллиптического) градиента.
Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}
В этом случае начальная точка помещается в центр элемента, а градиент рисуется таким образом, чтобы в углах элемента был последний указанный в скобках цвет.
Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.
Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).
Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу. | 1 255 | 10 | Loading... |
02 Берем ответственность за вопросы: как задавать их правильно
Умение правильно задавать вопросы — это навык, который можно развить. И нужен он не только менеджерам и тимлидам, а всем, потому что мы задаем много вопросов по работе каждый день.
В статье рассказывается:
- какие виды вопросов бывают и какие ошибки в них допускают чаще всего,
- какие практики повысят навык формулирования вопросов,
- как не вестись на манипулятивные вопросы и избегать их в своей речи.
👉 @seniorFront | 2 013 | 7 | Loading... |
03 Check same case
Создайте функцию, которая принимает две буквы и проверяет, в одном ли они регистре (обе строчные или обе заглавные).
Примеры:
'a' and 'g' returns 1
'A' and 'C' returns 1
'b' and 'G' returns 0
'B' and 'g' returns 0
'0' and '?' returns -1
👉 @seniorFront | 2 172 | 6 | Loading... |
04 Запустите рекламу в телеграм-каналах с Яндекс Директом
Перфоманс-реклама теперь в телеграм-каналах ⚡
Яндекс Директ знает, как привлечь целевую аудиторию 💰👌
Узнать больше
#реклама
yandex.ru
О рекламодателе | 2 399 | 0 | Loading... |
05 Accessible Horizontal Accordion
Свёрстано на HTML и CSS. Логика переключения реализована в JS.
👉 @seniorFront | 2 410 | 24 | Loading... |
06 Liquid Blast Effects
В этом видео создаётся эффект взрыва частиц при наведении. В JS генерируются частицы, которые затем анимируются в CSS.
👉 @seniorFront | 2 371 | 13 | Loading... |
07 Media files | 2 663 | 2 | Loading... |
08 Cards animation
Создано на чистом CSS. При наведении запускаются CSS трансформации.
👉 @seniorFront | 2 868 | 25 | Loading... |
09 Stacked Cards with Autoplay
В JS создана функция перелистывания карточек, которая запускается по заданному интервалу.
👉 @seniorFront | 3 060 | 20 | Loading... |
10 Начали свой путь в разработке на JS? Хотите продвинуться дальше?
Тогда ждём вас на открытом практическом уроке «Объектно-ориентированный JavaScript и функции конструкторов» от OTUS, где мы разберем:
▫️как наследуются свойства в объектах;
▫️объектную модель JavaScript;
▫️написание ООП-кода с экономией памяти;
▫️создание объектов при помощи функций конструкторов с наследованием свойств.
Встречаемся 18 июня в 20:00 мск в рамках курса «Специализация Fullstack Developer». Все участники вебинара получат специальную цену на обучение!
➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cxqH6K
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjeo9ejB | 2 785 | 0 | Loading... |
11 Мидлы маскируются под стажеров, чтобы задать сеньору вопрос по своей проблеме.
👉 @seniorFront | 3 308 | 89 | Loading... |
12 Как повысить эффективность вебинаров?
Организация продающего вебинара - не простая задача, ведь необходимо предусмотреть множество деталей: удобную дату, вовлекающий контент, методы продвижения и взаимодействия с участниками.
Вебинары от МТС Линк помогают привлекать новых клиентов и увеличивать конверсию из участника в лид. В сервисе доступен анализ поведения пользователей во время вебинара, синхронный перевод, автовебинары и интерактивные инструменты для вовлечения участников.
Делимся методичкой с кейсами, чек-листами и инструкциями для маркетологов, PR и event-менеджеров, чтобы сделать вебинары эффективным инструментом для лидогенерации.
Получите методичку бесплатно на сайте.
Скачать
#реклама 16+
mts-link.ru
О рекламодателе | 2 637 | 0 | Loading... |
13 2D to 3D Image Hover Effects
В этом видео создаётся эффект 3D при наведении на элемент при помощи CSS трансформаций.
👉 @seniorFront | 3 176 | 10 | Loading... |
14 👩💻 Стань настоящим гуру в веб-разработке на JS с курсом от OTUS
Пройди тест по JavaScript и проверь свои знания.
Ответишь — пройдешь на продвинутый курс "JavaScript Developer. Professional" от OTUS по специальной цене + получишь доступ к записям открытых уроков курса курса
👉 ПРОЙТИ ТЕСТ: https://vk.cc/cxpkGt
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjd5W1HT | 2 995 | 5 | Loading... |
15 Photo editor UI
В CSS созданы переменные, значения которых изменяются в JS при перемещении ползунка.
👉 @seniorFront | 3 257 | 39 | Loading... |
16 Работа руководителя — а она правда тебе нужна?
В этой статье рассматриваются виды мотивации, которые встречаются у людей, решивших, что пора становиться руководителями. Они могут послужить ориентиром при принятии решений в ваших командах и размышлениях, к какому из видов мотивации скорее склонен определённый человек и что у него может пойти не так.
👉 @seniorFront | 288 | 2 | Loading... |
17 👨💻 Изучаешь Frontend? Я тоже!
idk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта.
🔤 С меня:
— Сложная теория простым языком;
— Практические примеры и объяснения;
— Разбор нейросетей, полезных в веб-разработке;
— Крутые викторины по JS и шпаргалки.
🔤 С тебя:
— Всего лишь подписка: @idk_frontend
Продолжим обучаться вместе! | 2 681 | 3 | Loading... |
18 Что значит быть хорошим разработчиком: 11 полезных советов от сеньора
Путь разработчика, возможно, не проще пути джедая. Важно понимать, чего вы хотите, и слушать советы наставников и старших коллег.
1. Слушайте советы старших коллег, но не забывайте о критическом мышлении.
Прежде чем приступать к каким-то действиям, нужно определиться с вектором своей карьеры. Для этого нужно понять, в каком направлении вам интереснее развиваться. Одним разработчикам интереснее техническая часть, другие хотят расти как управленцы, третьи мечтают создать собственный продукт. Для каждого из направлений нужно развивать собственный скиллсет.
2. Составьте дорожную карту своего профессионального развития.
Будем честны: не во всех компаниях внедрены процессы, направленные на развитие сотрудников. В этом случае заниматься составлением дорожной карты придётся самостоятельно. Определите для себя, в какую сторону вы хотели бы расти, составьте список необходимых навыков и подумайте, как можно их развить.
3. Изучайте базовые технологии.
Некоторые технологии быстро изменяются, но существует база, знание которой необходимо на любом этапе карьеры.
4. Учитесь писать хороший код.
Довольно очевидный пункт, но его нельзя не упомянуть. Хороший разработчик в первую очередь должен уметь писать хороший код. При этом не нужно бояться делать ошибки: без них не получится освоить новые навыки. Однако каждая ошибка должна учить вас чему-то.
5. Полюбите процесс написания кода.
Чтобы развиваться в профессии, нужна сильная мотивация. Причём одной лишь финансовой составляющей для мотивации недостаточно — важно искренне интересоваться технологиями. Пробуйте необычные подходы к работе — например, геймефицируйте рабочий процесс — изучайте новые стеки, ищите направление деятельности, которое вам наиболее близко.
6. Изучайте не только свою предметную область, но и соседние.
Важно знать общие принципы создания программного продукта. Если вы в будущем хотели бы возглавить подразделение, важно иметь представление о задачах и процессах каждого участника команды.
7. Спокойно относитесь к рутине.
Программирование — это не только решение интересных задач. Разработчику приходится сталкиваться со скучными однообразными задачами или нудным поиском ошибок. Это часть профессии, в которой тоже нужно искать положительные моменты.
8. Развивайте навык понимания задач.
Если руководитель просит вас сделать что-то, убедитесь, что вы правильно уяснили цель задачи. Для этого нужно уметь правильно формулировать вопросы — и не стесняться их задавать.
9. Учитесь писать хорошие тексты.
Разработчику приходится много писать — письма коллегам и клиентам, комментарии к коду, техническая документация. Важно, чтобы тексты были понятными. Это существенно сократит объём коммуникаций, освободив время для решения других задач.
10 Тренируйтесь искать информацию.
Для многих задач уже существуют готовые решения. Хороший разработчик не будет изобретать велосипед и воспользуется другими наработками. Умение находить ответы на свои вопросы — важный скилл, развитию которого нужно уделять внимание.
11. Не забывайте о soft skills.
Любой программный продукт — это не техническая система, а социально-техническая система. Эффективное взаимодействие с коллегами и понимание потребностей заказчиков не менее важно, чем написание качественного кода.
Ваш план развития может меняться со временем — почти каждый разработчик на своём карьерном пути проходит ряд трансформаций. Но знания и умения, которые вы приобретёте в процессе, помогут вам добиваться профессиональных целей и стать тем, на кого будут равняться джуны нового поколения.
👉 @seniorFront | 3 236 | 25 | Loading... |
19 Skating bunny
Реализовано на canvas при помощи библиотеки Three.js
👉 @seniorFront | 3 287 | 22 | Loading... |
20 Array.values()
Массив в JavaScript имеет различные методы для перебора элементов. Например, map() или forEach(). Но иногда удобнее работать не с самим массивом, а с итерируемым объектом.
Метод values() возвращает новый объект-итератор, созданный из значений элементов массива. Подробнее о том, что такое итератор, можно прочитать в посте «Итератор».
Пример:
const array = [1, 2, 3]
const iterator = array.values()
for (const item of iterator) {
console.log(item)
}
// 1
// 2
// 3
👉 @seniorFront | 3 584 | 6 | Loading... |
21 Попытка создать идеальный компонент формы
В моей работе(и не только моей) очень часто возникает необходимость писать логику для формы. Каждый раз это больно. Кажется, даже создатели React солидарны с этим, поэтому скоро у нас появится useFormStatus, но, на моей взгляд, этот хук лишь немного облегчит жизнь в простых кейсах, но никак не поможет в более сложных.
Под сложными кейсами я имею ввиду, например:
- Значение поля не примитив, а объект или массив (или Map/Set)
- Нужна возможность задать стейт вне инпута/очистить какое-то поле или ресетнуть всю форму, т.е. более продвинутый API, а не просто возможность вытащить данные из инпута
- Нужна продвинутая валидация, например возможность провалидировать только выбранные поля формы или одно поле на основе значения из другого или задать свою функцию валидации (например проверить, что логин свободен)
Поэтому чаще всего приходится использовать библиотеку для работой с формой или писать свой велосипед. В этой статье автор создаёт свой компонент формы. | 3 722 | 23 | Loading... |
22 Bananas
Вам дана последовательность букв a, b, n, сколькими способами вы можете составить слово «banana», вычеркивая разные буквы и читая его слева направо?
(Используйте - для обозначения перечеркнутой буквы)
Пример:
Ввод:
bbananana
Вывод:
b-anana--
b-anan--a
b-ana--na
b-an--ana
b-a--nana
b---anana
-banana--
-banan--a
-bana--na
-ban--ana
-ba--nana
-b--anana
👉 @seniorFront | 3 600 | 6 | Loading... |
23 Cool Layout with Complex Chainable Animation
Создано и анимировано на HTML и SCSS.
👉 @seniorFront | 3 597 | 45 | Loading... |
24 Change Background Image on Scroll
В этом видео реализуется смена фоновой картинки при прокрутке при помощи JS.
👉 @seniorFront | 3 734 | 22 | Loading... |
25 Media files | 3 876 | 2 | Loading... |
26 CSS / SVG Blobby Background
Это SVG картинка, анимируемая в CSS.
👉 @seniorFront | 4 137 | 24 | Loading... |
27 Запустите рекламу в телеграм-каналах с Яндекс Директом
Перфоманс-реклама теперь в телеграм-каналах ⚡
Яндекс Директ знает, как привлечь целевую аудиторию 💰👌
Узнать больше
#реклама
yandex.ru
О рекламодателе | 2 530 | 0 | Loading... |
28 Shattered popup
При нажатии частицы генерируются в JS и затем анимируются в SCSS.
👉 @seniorFront | 4 199 | 32 | Loading... |
29 Турецкий продавец мороженного покоряет фронтенд
👉 @seniorFront | 4 413 | 63 | Loading... |
30 Infinite Page Scrolling
В этом видео создается страница с подгрузкой данных при прокрутке на чистом JS.
👉 @seniorFront | 4 386 | 22 | Loading... |
31 ⚛️ Тест на навыки JavaScript-разработчика ⚛️
Ответьте на 30 вопросов и проверьте, обладаете ли вы middle-навыками по JavaScript, знаниями HTML/CSS и на сколько вы готовы к обучению на курсе — «React.js Developer».
За 4 месяца курса вы:
- Досконально изучите TypeScript и будете писать чистый и лаконичный код, применяя эту технологию
- Разовьёте и прокачаете навыки работы в в GraphQL, Apollo, Relay
- Освоите не только продвинутые возможности Redux, Redux-Saga, Redux-thunk, но и SPA-приложения и оптимизацию их для production
Время прохождения теста ограниченно 30 минут
👉 ПРОЙТИ ТЕСТ — https://otus.pw/syxs/?erid=LjN8Jtzop
💣 Пройдите тест, получите скидку на курс, и записи уроков от преподавателей курса в подарок.
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. | 3 901 | 9 | Loading... |
32 В ПСБ Цифровая лаборатория есть программа, по которой платят 100 000 руб. за рекомендацию в ИТ.
Деньги придут, как только рекомендованный вами сотрудник пройдет испытательный срок.На какой стек и с каким опытом ищем ИТ-специалистов — смотреть тут.
Проектов много. Работа стабильная, зарплата приличная.
Реклама. ООО "ПСБ ЛАБ". ИНН 7714436892. | 3 454 | 6 | Loading... |
33 Tab bar active animation
Создано на HTML и SCSS. В JS реализована логика переключения классов при нажатии на элемент меню.
👉 @seniorFront | 3 371 | 22 | Loading... |
34 Prompt engineering — путь к эффективной работе с ChatGPT
В этой статье рассказывается о том, как эффективно работать с ChatGPT в разных задачах и архитектуре. Многие пробовали, но не у всех получилось. Статья написана по мотивам доклада для конференции Highload.
Какие темы обсуждаются:
- Поговорим о GPT;
- Разберёмся, зачем нужны промпты;
- Рассмотрим фреймворки для создания промптов;
- Создадим ассистента архитектора.
👉 @seniorFront | 3 382 | 12 | Loading... |
35 Обучаем Java-разработчиков оплата после выхода на работу
В Kata Academy можно выучиться на Java-разработчика бесплатно, а заплатить уже после трудоустройства по специальности из фактической зарплаты.
Если задуматься, то все в выигрыше:
— ты получаешь работу в Москве или Санкт-Петербурге с хорошей зарплатой, мы получаем процент за инвестиции в тебя;
— в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше;
— мы прокачиваем твои навыки еще 2 года после курса: проводим выездные мероприятия и мастер-классы — и доходы наших выпускников растут;
— мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов.
Чтобы попасть на курс, нужно выполнить небольшое тестовое задание. Переходи по ссылке и оставляй заявку!
Узнать больше
#реклама 16+
kata.academy
О рекламодателе | 2 058 | 0 | Loading... |
36 👩💻 Как эффективно разрабатывать Web-API на JavaScript?
Узнайте на открытом практическом уроке «Быстрый старт с Express.js. Разработка REST API» от OTUS, где мы построим серверное приложение на платформе Node.js с использованием популярной легковесной библиотеки Еxpress.js и разберем ее основные функции и возможности.
А также рассмотрим:
- введение в веб-серверы;
- описание маршрутов HTTP API;
- связь контроллеров и бизнес-логики;
- миддлвары.
Встречаемся 4 июня в 20:00 мск в преддверии старта курса «JavaScript Developer. Professional».
Все участники вебинара получат специальную цену на обучение!
➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cxdLrq
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjbuWJoj | 2 331 | 0 | Loading... |
37 Как очистить карму своему коду?
Часто ли у так бывает, что вы встречаете плохой код и мысленно ругаете автора?
А потом приходите к выводу, что код не так уж и плох, и автора ругали зря… Но осадок-то остался!
В общем, медитировал я давеча перед монитором, и посетил меня код с картинки:
Вслед за этим кодом меня посещает, конечно, Негативная Эмоция. Недоумение.
Почему надо делить на сто и тут же умножать на сто?
Зачем надо прибавлять сто и делать на сто? Что тут вообще происходит? WTF?
Разгадка
В ходе дебага выясняется, что код этот вполне работает. Поскольку речь идёт о целых числах, то при делении на 100 результат округляется, а при повторном умножении на сто получается меньшее число. Например, из 666 получается (666/100) * 100 = 6*100 = 600. То есть значение округляется до ближайшей сотни.
Что получается? Код как бы есть, он как бы работает, то есть обвинить программиста как бы и не в чем. Но в то же время я потратил силы, чтобы в нём разобраться, а самое главное — я произнёс вслух "What The Fuck" что увеличило мою карму на единичку.
Как же очистить карму своего кода?
Как утверждается в ведических текстах, любой программер может изменить судьбу кода, если напишет тесты и сотрет непотребные комментарии и сделав код втрое короче
👉 @seniorFront | 3 181 | 7 | Loading... |
38 Frontend Developer — это первоисточник всего, что происходит во Frontend-сообществе
Здесь опытный Senior-разработчик ежедневно публикует материалы, которые накопил за 9 лет Frontend-разработки:
➤ Шаблоны с готовым кодом для твоих проектов
➤ Вопросы с собеседований, задачи и викторины
➤ Шпаргалки по JavaScript, HTML и CSS
P.S. Даже онлайн-школы берут материалы с этого канала🤫 | 3 774 | 12 | Loading... |
Photo unavailableShow in Telegram
Как создать радиальный градиент в CSS?
Функция radial-gradient используется для задания фона в виде радиального (кругового, эллиптического) градиента.
Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}
В этом случае начальная точка помещается в центр элемента, а градиент рисуется таким образом, чтобы в углах элемента был последний указанный в скобках цвет.
Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.
Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).
Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.👍 13
Статья
Photo unavailableShow in Telegram
Берем ответственность за вопросы: как задавать их правильно
Умение правильно задавать вопросы — это навык, который можно развить. И нужен он не только менеджерам и тимлидам, а всем, потому что мы задаем много вопросов по работе каждый день.
В статье рассказывается:
- какие виды вопросов бывают и какие ошибки в них допускают чаще всего,
- какие практики повысят навык формулирования вопросов,
- как не вестись на манипулятивные вопросы и избегать их в своей речи.
👉 @seniorFront
👍 1
Статья
Photo unavailableShow in Telegram
Check same case
Создайте функцию, которая принимает две буквы и проверяет, в одном ли они регистре (обе строчные или обе заглавные).
Примеры:
'a' and 'g' returns 1
'A' and 'C' returns 1
'b' and 'G' returns 0
'B' and 'g' returns 0
'0' and '?' returns -1
👉 @seniorFront👍 4
CodeWars
Photo unavailableShow in Telegram
Запустите рекламу в телеграм-каналах с Яндекс Директом
Перфоманс-реклама теперь в телеграм-каналах ⚡
Яндекс Директ знает, как привлечь целевую аудиторию 💰👌
Узнать больше
#реклама
yandex.ru
О рекламодателе
👎 2👍 1
00:05
Video unavailableShow in Telegram
Accessible Horizontal Accordion
Свёрстано на HTML и CSS. Логика переключения реализована в JS.
👉 @seniorFront
2024-05-26 17-50-23.mp48.40 KB
🔥 6👍 1
CodePen
08:02
Video unavailableShow in Telegram
Liquid Blast Effects
В этом видео создаётся эффект взрыва частиц при наведении. В JS генерируются частицы, которые затем анимируются в CSS.
👉 @seniorFront
Liquid Blast Effects using CSS SVG & Javascript.mp433.53 MB
👍 5🔥 2
Оригинальное видео
Что делает атрибут novalidate у тега form?Anonymous voting
- Отключает пользовательскую JS валидацию формы браузером
- Отключает нативную валидацию формы браузером
- Добавляет кнопку для подтверждения отправки формы
- Скрывает подсказки об ошибках при заполнении формы
👍 4🤔 2🔥 1
00:06
Video unavailableShow in Telegram
Cards animation
Создано на чистом CSS. При наведении запускаются CSS трансформации.
👉 @seniorFront
2024-05-26 17-52-18.mp45.70 KB
👍 11
CodePen
00:09
Video unavailableShow in Telegram
Stacked Cards with Autoplay
В JS создана функция перелистывания карточек, которая запускается по заданному интервалу.
👉 @seniorFront
2024-05-26 17-49-56.mp41.68 MB
👍 9❤ 2🔥 2
CodePen
Photo unavailableShow in Telegram
Начали свой путь в разработке на JS? Хотите продвинуться дальше?
Тогда ждём вас на открытом практическом уроке «Объектно-ориентированный JavaScript и функции конструкторов» от OTUS, где мы разберем:
▫️как наследуются свойства в объектах;
▫️объектную модель JavaScript;
▫️написание ООП-кода с экономией памяти;
▫️создание объектов при помощи функций конструкторов с наследованием свойств.
Встречаемся 18 июня в 20:00 мск в рамках курса «Специализация Fullstack Developer». Все участники вебинара получат специальную цену на обучение!
➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить бесплатный урок: https://vk.cc/cxqH6K
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjeo9ejB
👍 2👎 1