Помощь в трудоустройстве в IT-сфере!

По всей России объявили бесплатную программу на шестимесячное обучение по IT-cпециальностям.

Запись на участие в программе продлится до конца июля, но чтобы туда попасть, нужно пройти специальный профтест.

По результату тестирования сразу узнаете, какая профессия вам подойдет, и проходите ли вы на бесплатное обучение.

Перейти на сайт

#реклама 16+
urban-university.ru
О рекламодателе

Читать полностью…

Frontend теперь в телеграм!

Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках:

Логово Верстальщика — научит верстать продающие сайты.

Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.

Frontender's notes — советы и полезные приемы для каждого разработчика.

Читать полностью…

Джентельменский набор трушного фронтендера

Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер.

Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram.

Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д.

JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку.

codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты

Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров!

Развивайся с нами, ведь так проще!

Читать полностью…

❗️Создайте свое приложение для прогноза погоды всего за 1 час

❓Хотите научиться создавать полезные приложения и работать со сторонними веб-сервисами?

⏰ Ждем вас на открытом вебинаре 4 сентября в 20:00 мск, где мы разберем:

- как работать с API сторонних веб-сервисов на примере создания приложения для прогноза погоды;
- основные принципы работы с API и их интеграции в проекты;
- как расширить функционал приложения и использовать больше браузерных инструментов.

🔥 Урок идеально подходит для тех, кто знает основы JavaScript (циклы, условия, функции, базовая работа с DOM).

Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!

👉Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cA2r4D

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid 2SDnjc9FMjY

Читать полностью…

Мы за бесплатное обучение

Подборка каналов для роста и развития в сфере Frontend-разработки

👥 Reactify | Frontend Разработка — активное сообщество для бесплатного обучения веб-разработке.

💼 Frontend | Собеседования — огромная база актуальной теории для Frontend Разработчиков.

Обучайтесь, общайтесь, растите вместе с нами. Станьте частью IT-сообщества!

Читать полностью…

Настольная книга веб-дизайнера. Практический курс по вебдизайну и проектированию сайтов

Эта книга научит вас тонкостям веб-дизайна и проектированию сайтов. Учебник включает в себя все этапы работы вебдизайнера: начиная с проектирования и заканчивая реализацией сайта.

Книга посвящена описанию этапов разработки сайтов: прототипированию, дизайну веб-страниц, нарезке, дизайну мобильной версии и запуску сайта.
Также вы узнаете: как сделать продающий сайт, как правильно заполнить техзадание и создать базу образцов, как собрать семантическое ядро, купить хостинг и домен, какой конструктор сайтов выбрать. Вы легко создадите первую страницу сайта, состоящую из: хедера, слайдера, преимуществ, модуля «О компании», каталога товаров, схемы работы, отзывов, фотогалереи и футера.

Для начинающих специалистов.

👉 @frontendInterview

Читать полностью…

Отдел разработки на пути к релизу

👉 @frontendInterview

Читать полностью…

Один день из жизни JavaScript разработчика и его техлида

По долгу службы я очень много времени трачу на ревью кода своей команды. Ревью кода на столько глубоко вошло в мою жизнь, что отрывок из одного из них я решил переложить на бумагу.

В этой небольшой заметке вашему вниманию предлагается диалог разработчика и его лида на код ревью. Посмотрим, как они приходят к финальному решению, какие стадии претерпевает код в процессе рефакторинга, как рассуждают лид и его подопечный и какое красивое итоговое решение у них получится.

👉 @frontendInterview

Читать полностью…

Как сделать фон полупрозрачным?

Для создания цветного фона разной степени прозрачности применяется свойство background или background-color, в качестве значения указывается функция rgba(), в которой цвет задаётся четырьмя параметрами: красная, зелёная, синяя составляющая цвета и уровень прозрачности. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Чтобы полупрозрачность элемента была заметна, под него следует подложить фоновую картинку. В примере на картинке для веб-страницы установлено фиксированное фоновое изображение и добавлен <div> с классом overlay, для которого задан белый фон с уровнем прозрачности 0.8.

👉 @frontendInterview

Читать полностью…

​Что такое замыкание ?

Это когда функция запоминает своё лексическое окружение даже после того, как она выполняется вне своей области видимости. Другими словами, функция, объявленная в определённой области видимости, сохраняет доступ к переменным этой области, даже когда она вызывается за пределами своего первоначального контекста. Это важно по нескольким причинам:

- Позволяют скрыть переменные внутри функции, делая их недоступными извне, кроме как через другую функцию, созданную в той же области видимости.
- Позволяют сохранять состояние между вызовами функции, без использования глобальных переменных.
- Облегчают каррирование и другие техники функционального программирования, позволяя функциям работать с переменными, которые были в их области видимости в момент создания.

Пример:

function создатьСчетчик() {
    let количество = 0; // переменная количество "замкнута" внутри функции увеличить

    function увеличить() {
        количество += 1;
        return количество;
    }

    return увеличить;
}

const счетчик = создатьСчетчик();
console.log(счетчик()); // 1
console.log(счетчик()); // 2

В этом примере, функция увеличить имеет доступ к переменной количество, даже после того как создатьСчетчик завершила выполнение. Это происходит благодаря механизму замыканий: увеличить "запоминает" переменные, которые были в её области видимости в момент создания.

👉 @frontendInterview

Читать полностью…

Find the Missing Number

Вам дан неотсортированный массив, состоящий из чисел от 0 до 100. Но одного числа не хватает, найдите это число.

👉 @frontendInterview

Читать полностью…

Запустите рекламу в телеграм-каналах с Яндекс Директом

Перфоманс-реклама теперь в телеграм-каналах ⚡

Яндекс Директ знает, как привлечь целевую аудиторию 💰👌

Попробовать

#реклама
yandex.ru
О рекламодателе

Читать полностью…

👉 @frontendInterview

Читать полностью…

​Как сделать перенос слов?

Переносы слов в тексте используются для разбиения длинных слов, когда они не помещаются на одной строке. Переносы делают текст удобнее для чтения, облегчают восприятие информации и оптимальнее распределяют слова в абзаце.

HTML переносит слова на другую строку целиком, без учёта правил расстановки переносов. Из-за этого правый край абзаца выглядит неровным и напоминает «лесенку»
Выравнивание текста по ширине убирает неровность правого края, но между некоторыми словами появляются слишком широкие промежутки.

Расстановка переносов слов позволяет оптимизировать пробелы между словами и повысить эстетическую привлекательность блока текста. Есть несколько вариантов как этого добиться: с помощью элемента <wbr>, используя спецсимвол &shy; и через свойство hyphens.

Использование элемента <wbr>
Элемент <wbr> ставится в тех местах, где предполагается возможный перенос. Браузер уже сам, в зависимости от расположения текста решает, делать перенос в этом месте или нет
У <wbr> есть определённые недостатки, в частности, при переносе не добавляется дефис, обозначающий перенос.

Использование спецсимвола &shy;
Спецсимвол &shy; начинается со знака амперсанда (&) и завершается точкой с запятой. Работает этот спецсимвол схожим с <wbr> образом — там, где в тексте встречается &shy;, браузер при необходимости добавляет перенос слова. Обратите внимание, что &shy; при переносе слов добавляет символ дефиса.

Использование свойства hyphens
Перечисленные выше методы имеют один минус — это ручная расстановка переносов в тексте. Свойство hyphens же задействует встроенный в браузер словарь, в котором, в том числе, указаны правила переноса множества слов.

Чтобы браузер понимал, с каким языком и словарём он должен работать, к тексту следует добавить атрибут lang с кодом языка. К примеру, кодом русского языка будет ru

Если на сайте предполагается один язык (к примеру, весь сайт только на русском), то атрибут lang пишется в элементе <html>. В случае использования нескольких языков, lang добавляется к абзацу <p> или другому подходящему текстовому элементу.

Для автоматической работы свойство hyphens задаём со значением auto и добавляем это свойство к абзацу

👉 @frontendInterview

Читать полностью…

Хочешь прокачать навыки программирования за 3 дня? Присоединяйся к праздничному интенсиву от METHED!

Ты создашь веб-приложение для отображения расписания автобусов в реальном времени, используя Node.js и JavaScript.

На интенсиве ты:
- Научишься создавать сервер на Node.js
- Разработаешь интерактивный интерфейс с помощью JavaScript
- Интегрируешь WebSocket для работы в реальном времени
- Научишься развертывать свои проекты на хостинге.

Количество мест ограничено!

Регистрируйся сейчас и прокачай свои навыки: https://tglink.io/37357a541bc9

Читать полностью…

​Что делать, когда клиент просит какую-то «дичь»

Слышу много историй о том, как клиент, получив результат работы, даёт какую-то дикую обратную связь. Например, просит увеличить размер логотипа в сто раз или нарисовать желтый прозрачный круглый квадрат.

В фрилансерских кругах есть любители поржать на эту тему. Я тоже когда-то таким был. До тех пор, пока не осознал две вещи.

Первая. Какую бы дичь ни предлагал клиент, ему она дичью не кажется и стоит относиться к этому с уважением. Просто клиент настолько далёк от специфики работы, что его комментарии могут восприниматься странно. Важно просто объяснить ему, почему предложение кажется нам чрезмерным, и предложить более крутой вариант.

Вторая. И тут-то и заключается проблема. Фрилансер, получив странный комментарий к результату своей работы, сразу представляет, как ему придётся тратить время на внесение правок, испытывает от этого дискофморт и его первая реакция (которая очень легко и неприязненно считывается собеседником) — резко возразить.

Как уменьшить количество «дичи» от клиента, да ещё и повысить его удовлетворённость от процесса работы и результата? Ответ в статье.

👉 @frontendInterview

Читать полностью…

Как сделать ссылку на верх веб-страницы?

Ссылка «наверх» позволяет быстро перейти к верхней части веб-страницы, где обычно располагается логотип, навигация по сайту и другие типовые элементы сайта.

Для создания такой ссылки, в её адресе достаточно указать #top. Все современные браузеры понимают такой адрес и при щелчке по этой ссылке переходят к верхней части текущей веб-страницы.

<a href="#top">Наверх</a>

Вместо ссылки можно использовать кнопку, а переход по ссылке реализовать через JavaScript. Для этого к <button> добавляем событие onclick, внутри которого пишем window.location.href со значением #top

<button onclick="window.location.href='#top'">Наверх</button>

👉 @frontendInterview

Читать полностью…

👉 @frontendInterview

Читать полностью…

​Какие главные особенности куки ?

Cookies (куки) — это небольшие кусочки данных, хранящиеся в браузере и используемые для сохранения информации о пользователе. Вот основные особенности:

Хранение данных на клиенте
Хранятся на стороне клиента (в браузере) и используются для сохранения информации, которая может быть полезна при последующих посещениях веб-сайта.

Ограниченный размер
Размер каждого куки ограничен (обычно до 4KB). Поэтому куки не подходят для хранения больших объемов данных.

Срок действия (время жизни)
Каждая кука имеет время жизни, которое задается параметром Expires или Max-Age. По истечении этого времени кука автоматически удаляется браузером.

Доступность по домену и пути
Доступны только для указанного домена и пути. Это позволяет ограничивать доступ к кукам для других страниц и поддоменов.

Безопасность (HTTP-only и Secure)
HTTP-only: Куки, установленные с флагом HttpOnly, недоступны через JavaScript, что помогает защитить данные от XSS-атак.
Secure: Куки, установленные с флагом Secure, передаются только по защищенному HTTPS соединению.

Передача с запросами
Автоматически отправляются серверу с каждым HTTP-запросом к соответствующему домену, что позволяет серверу узнавать пользователя и сохранять его сессию.

👉 @frontendInterview

Читать полностью…

Count the photos!

Вам дана строка, представляющая собой дорогу. На ней есть камеры, обозначенные символом ".", а также машины, которые двигаются вправо - ">", и машины, которые двигаются влево - "<". Камера делает фотографию, если машины двигается в её сторону. Создайте функцию, которая вернет количество сделанных фото.

Примеры:
For ">>." -> 2 photos were taken
For ".>>" -> 0 photos were taken
For ">.<." -> 3 photos were taken
For ".><.>>.<<" -> 11 photos were taken

👉 @frontendInterview

Читать полностью…

Что такое :root в CSS?

Псевдокласс :root нужен для обращения к самому главному родительскому элементу документа. Его также называют корневым элементом. В случае HTML-документа самым главным родителем всей страницы будет тег <html>. Часто :root используется для того, чтобы задавать кастомные свойства.

Пример
Укажем в документе нужный нам шрифт и создадим несколько кастомных свойств:

:root {
  font-family: 'Oswald', sans-serif;
  --button-size: 40px;
  --main-color: #bada55;
}

🛠 Поскольку :root — это псевдокласс, его специфичность будет выше, чем селекторов по тегу html или svg.

В примере ниже фон документа окрасится в персиковый цвет, а не в томатный.

:root {
  background-color: peachpuff;
}

html {
  background-color: tomato;
}

👉 @frontendInterview

Читать полностью…

Партнёрская программа рекрутинга в Яндекс Еду

Станьте партнёром Яндекс Еды по привлечению курьеров и получите кучу преимуществ:

💰Платим до 25 000 ₽ за успешного кандидата

📞Поддержка на всех этапах

📅Свободное расписание

📊Удобные инструменты для работы

Приводите новых курьеров и получайте в среднем 187 000 ₽ в месяц!


Зарегистрироваться

#реклама
eda.yandex.ru
О рекламодателе

Читать полностью…

Такси для бизнеса. Яндекс Go

Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go


Узнать больше

#реклама
business.go.yandex
О рекламодателе

Читать полностью…

👉 @frontendInterview

Читать полностью…

Методичка: как сделать онлайн-встречи эффективнее

Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать?

Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи.

Из методички узнаете:
- Как создать постоянную ссылку и подключаться на встречи в 2 клика,
- Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных.
- Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту.

Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч.

Получить гайд можно бесплатно на сайте.

Скачать

#реклама
mts-link.ru
О рекламодателе

Читать полностью…

React быстро

«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.

👉 @frontendInterview

Читать полностью…

Что такое миксины в CSS препроцессорах?

Миксины Используются в препроцессорах, таких как Sass и Less, для группировки CSS-деклараций, которые можно повторно использовать во всем стилевом файле. Это упрощает поддержку и изменение стилей, позволяя избежать повторения кода.

Пример использования в Sass:

@mixin border-radius($radius) {
     -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
         -ms-border-radius: $radius;
             border-radius: $radius;
}

.button {
     @include border-radius(10px);
}

Миксины позволяют избежать дублирования кода и способствуют более чистой, модульной и легко поддерживаемой кодовой базе. В программировании и веб-разработке миксины представляют собой мощный инструмент для повышения эффективности и улучшения архитектуры проектов.

👉 @frontendInterview

Читать полностью…

Как подружить веб-компоненты и JS-фреймворки

У крупных технокомпаний, как правило, есть множество ИТ-продуктов. Разрабатывают их, обычно, не одни и те же люди, целые группы команд. При этом фронтенд во всех этих продуктах обычно пишут на одних и тех же технологиях: берут готовый шаблон, что-нибудь обновляют — и готово. А что делать, если все эти продукты написаны на разных фреймворках? Конечно, можно сделать десяток UI-наборов на все случаи жизни, но будет крайне дорого их писать и поддерживать.

Могут ли веб-компоненты помочь разрешить эту проблему? Ответ в статье.

👉 @frontendInterview

Читать полностью…

ТОП-4 Курса по Программированию

⚡Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов.

✅Хотите стать программистом, но не знаете с какого языка начать?
Помогаем разобраться в самых популярных и востребованных языках программирования.
Подарок в конце подборки!

Выбрать

#реклама 16+
tutortop.ru
О рекламодателе

Читать полностью…

​Как увеличить в размере при наведении элемент, не сдвигая соседние?

Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.

Пример использования

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Увеличение при наведении</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            transition: transform 0.3s;
        }
        .item:hover {
            transform: scale(1.2); /* Увеличение размера при наведении */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

Объяснение
`transition: transform 0.3s;`: Это свойство добавляет плавный переход для любых изменений, связанных с трансформацией элемента. В данном случае, это применимо к изменению масштаба (transform: scale(1.2)), которое происходит при наведении.
`transform: scale(1.2);`: Эта строка кода увеличивает размер элемента на 20% при наведении (hover). Значение 1.2 означает увеличение на 20% по обеим осям (X и Y).
Контейнер с `display: flex;` Используется для демонстрации того, что элементы остаются на своих местах и не сдвигаются при увеличении одного из них. gap добавляет пространство между элементами.

👉 @frontendInterview

Читать полностью…