Фронтенд или бэкенд

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

Узнать особенности фронтенда и бэкенда в формате выбора класса в ММОРПГ вы сможете в этой интересной статье.

Начать игру

#начинающим #фронтенд #бэкенд

Пользовательские директивы во Vue

Во Vue директивы представляют собой специальные html-атрибуты, позволяющие манипулировать DOM-элементами. Все директивы обычно начинаются с буквы v, а затем через дефис идет название директивы.

Помимо встроенных директив (таких как v-model и v-show), Vue также позволяет регистрировать ваши собственные пользовательские директивы. Подробнее о том, как можно создать свои директивы, вы сможете узнать в этом подробном уроке.

#js #vue #веб #фронтенд

​​​Полный курс по Vue.js

Vue.js — это JavaScript-фреймворк, который создал разработчик Эван Ю. В 2012 году Эван работал в Google, где успел попробовать Backbone.js и Angular.

Именно после этого он решил создать собственный фреймворк — сначала просто как пет-проект. И хотя популярность обрушилась на Vue.js ещё в 2015 году, он до сих пор по душе многим разработчиками.

И вот отличный видео-курс, в котором вы рассмотрите работу с Vue.js: https://youtu.be/6wYu4_6hcDY

#фронтенд #vuejs #курс

Полезный справочник для фронтенд-разработчика в 2024 году

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

Для тех, кто предпочитает самообучение, самое то: https://frontendmasters.com/guides/front-end-handbook/2024/

#фронтенд #обучение

Что должен знать начинающий фронтендер?
 
Собрали советы для достижения успеха в профессии от опытного фронтенд-разработчика в одну статью. А также ответили на частые вопросы новичков: от зарплаты и стека до перспектив карьерного роста.

https://tproger.ru/articles/frontend-razrabotka--chem-zanimayutsya-i-skolko-zarabatyvayut-specialisty

#фронтенд #советы

Дорожная карта для фронтенд-разработчиков

Здесь собраны основные темы и технологии, которые нужно изучить для становления настоящим фронтендером.

#дорожнаякарта #веб #фронтенд

Как создать приложение Todo на React

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

Стартуем здесь.

#фронтенд #javascript #react

Верстаем сайт-портфолио для Frontend-разработчика

В резюме разработчики перечисляют hard skills и применяемый стек технологий, но как проверить эти знания? GitHub и его аналоги требуют загрузки проектов, чтобы изучить их детально. У работодателя или потенциального клиента может не быть на это времени.

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

Как создать красивый личный веб-сайт на HTML, CSS и JavaScript с разными темами можно посмотреть в этом видео.

#html #js #фронтенд

Как выбрать наилучшую стратегию рендеринга для вашего приложения

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

Сегодня существует множество технологий таких, как генерация статических сайтов (SSG), рендеринг на стороне сервера (SSR), рендеринг на стороне клиента (CSR), инкрементальная статическая регенерация (ISR) и экспериментальный частичный предварительный рендеринг (PPR). Каждая хороша для своих задач. Какую выбрать для вашего проекта, рассказали в этой статье.

#фронтенд

Как правильно работать с DOM в JavaScript в 2025 году?

Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.

1. Получение элементов

Вместо старых getElementById и getElementsByClassName сегодня лучше использовать querySelector и querySelectorAll. Они более универсальные и понятные.

const title = document.querySelector("#title"); // Получает 1 элемент (по id)
const buttons = document.querySelectorAll(".btn"); // Получает список всех кнопок с классом .btn

querySelector и querySelectorAll позволяют находить элементы так же, как в CSS (.класс, #id, input[type="text"] и т. д.). А также querySelectorAll возвращает не «живую» коллекцию, а обычный статичный список (NodeList), что логичнее при итерации.

2. Изменение текста и HTML

Всё зависит от того, что именно нужно поменять.

textContent — если надо изменить только текст (без HTML).

title.textContent = "Привет, мир!";

Не используйте innerHTML, если вставляете данные от пользователя — это дыра в безопасности (XSS-атаки). Если всё же используется innerHTML, убедитесь, что данные проверены.

title.innerHTML = "<strong>Важное сообщение!</strong>";

insertAdjacentHTML — отличная альтернатива innerHTML, если нужно добавить HTML в определённое место, не перезаписывая весь элемент.

title.insertAdjacentHTML("beforeend", "<span> 👋</span>");

3. Изменение классов

Правильный способ через classList, потому что `className`заменяет все классы сразу, из-за чего можно случайно удалить важные стили.

title.classList.add("highlight"); // Добавит класс
title.classList.remove("hidden"); // Удалит класс
title.classList.toggle("active"); // Переключит класс (если был — уберёт, если не было — добавит)

4. Изменение стилей

Не стоит вручную писать style.cssText, потому что он затирает всё, что было до этого. Используйте style для отдельных свойств.

title.style.color = "red";
title.style.fontSize = "24px";

Если нужно много стилей — лучше добавьте или измените класс. Так проще, централизованно и удобнее управлять дизайном.

title.classList.add("error"); // В CSS заранее определите .error { color: red; }

5. Создание и добавление новых элементов

Лучший способ — использовать createElement, а не innerHTML.

const newDiv = document.createElement("div"); // Создаём элемент <div>
newDiv.textContent = "Новый блок!";
newDiv.classList.add("box");  
document.body.appendChild(newDiv); // Добавляем в конец <body>

Если нужно добавлять элементы в разные места:

appendChild() — добавляет в конец родителя.

prepend() — добавляет в начало.

before() и after() — добавляют перед или после элемента.

title.after(newDiv); // Вставит newDiv сразу после title

// С помощью append() можно сразу добавлять текст и несколько элементов
const container = document.querySelector(".container");
container.append("Просто текст", document.createElement("span"));

6. Удаление элементов

Самый актуальный способ — remove().

newDiv.remove(); // Удалит элемент из DOM

Раньше приходилось делать так (и это было неудобно):

newDiv.parentNode.removeChild(newDiv); // Старый подход

7. Обработчики событий (современный подход)

Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте addEventListener.

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("Кнопка нажата!");
});

Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.

#простымисловами #фронтенд

Интерактивное руководство по CSS Transitions

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

https://www.joshwcomeau.com/animation/css-transitions/

#css #веб #фронтенд

​Создание и деплой полнофункционального приложения для обмена сообщениями в чате

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

Все подробности в видео:

https://www.youtube.com/watch?v=MJzbJQLGehs

#фронтенд #бэкенд #видео

Матовое стекло следующего уровня с backdrop-filter в CSS

Для создания эффекта матового стекла на веб-сайте самый просто способ — использования filter: blur(). Но Джош Комо предлагает вариант с помощью backdrop-filter: blur(), ещё одного CSS-свойства, которое делает эффект круче.

В этой статье вы узнаете, чем оно отличается от классического свойства filter, как браузер вычисляет «то, что под элементом», какие эффекты (blur, brightness, contrast…) сочетаются между собой и где сегодня есть поддержка. В конце — интерактивная песочница: меняйте параметры и сразу видите результат.

#фронтенд #css

​Как выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ

Можно ли выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ? Узнали у экспертов, какими источниками пользоваться, чтобы начать карьеру во фронтенде: https://tproger.ru/articles/kak-besplatno-vyuchit-html-i-css

#фронтенд

Бэкенд без боли: что нужно знать фронтендеру

Вы начали разбираться во фронтенде, уже пишете интерфейсы и подключаете данные. Но тут появляется слово вроде «rate limiting» — и всё, паника.

На этом этапе многим не хватает простой вещи — базового словаря. Понять, что происходит «на той стороне», помогает даже знание пары ключевых терминов.

Этот материал — как мини-гид по миру бэкенда для тех, кто с ним только начинает сталкиваться. Без лишней теории, коротко, по делу, простыми словами. Чтобы не просто копировать чужие fetch-запросы, а понимать, как всё устроено.

#фронтенд #бэкенд

Первый сайт «своими руками»: пошаговая инструкция без фреймворков

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

А вы когда последний раз вручную писали сайт без сборщиков?

#фронтенд #html #css

Сайт-портфолио нового уровня

Следите за мыслью. Что будет, если сделать интерактивный 3D-офис, в котором стоит с ЭЛТ-монитором, в который встроено нечто напоминающее Windows 95, в которой есть игры и браузер, в который встроен реальный сайт с портфолио? А получится проект Генри Хеффернана, созданный с использованием React, Three.js и WebGL.

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

Заценить и оценить можно тут: https://henryheffernan.com

#фронтенд #webgl #threejs #портфолио

30 вопросов, которые стоит знать фронтендеру перед собеседованием

На собесе вам могут спросить о чем угодно — от разницы между var и let до Event Loop и нюансов CSS‑селекторов. И лучше подготовиться заранее, чем краснеть перед интервьюером.

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

#фронтенд #собеседование

Hack Frontend: тренируйтесь для собеседования с огоньком

Если вы мечтаете прокачать фронтенд‑скиллы и спокойно заходить на тех‑интервью — обратите внимание на Hack Frontend. Это платформа, где вы сможете отточить навыки и подготовиться к успешному собеседованию.

Что внутри:

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

#фронтенд #тренажер #javascript