Forwarded from Метод утёнка
Подборка инструмент для всех, кто хоть иногда думает
Untools — это коллекция фреймворков и инструментов, которая поможет вам решать проблемы, принимать решения и прокачать системность.
Здесь нет ИИ, это просто концепции и методологии, которые вы можете изучить и применять в работе или повседневной жизни. Всё понятно расписано, содержит иллюстрации и примеры.
Короче, кто думает, тот оценит лайком и заберёт в Избранное. Остальные просто пройдут мимо. 😏
#инструменты
Untools — это коллекция фреймворков и инструментов, которая поможет вам решать проблемы, принимать решения и прокачать системность.
Здесь нет ИИ, это просто концепции и методологии, которые вы можете изучить и применять в работе или повседневной жизни. Всё понятно расписано, содержит иллюстрации и примеры.
Короче, кто думает, тот оценит лайком и заберёт в Избранное. Остальные просто пройдут мимо. 😏
#инструменты
10 библиотек JavaScript, которые можно забыть в 2025 году
Позавчера мы рассказали про инструменты, которые будут полезны в 2025 году всем фронтенд-разработчикам. Сегодня же поделимся библиотеками, которые точно не стоят вашего времени. Они устарели и имеют множество более современных альтернатив.
Подробнее о них в статье.
#javascript
Позавчера мы рассказали про инструменты, которые будут полезны в 2025 году всем фронтенд-разработчикам. Сегодня же поделимся библиотеками, которые точно не стоят вашего времени. Они устарели и имеют множество более современных альтернатив.
Подробнее о них в статье.
#javascript
Media is too big
VIEW IN TELEGRAM
Хватит обижать джаваскриптеров!
Вы же наверняка видели, а возможно и участвовали, в этихсрачах дискуссиях по поводу того, какой язык лучше. И самыми частыми аргументами против JS являются слабая типизация, «непредсказуемое» поведение при сложении разных типов и прочее подобное.
Но ведь на самом деле всё это есть и в некоторых других языках в том или ином виде. Более того, все эти «недостатки» могут быть и преимуществами в некоторых ситуациях.
Подробнее обо всём этом можно размышляют в коротком, но интересном ролике.
#видео #javascript
Вы же наверняка видели, а возможно и участвовали, в этих
Но ведь на самом деле всё это есть и в некоторых других языках в том или ином виде. Более того, все эти «недостатки» могут быть и преимуществами в некоторых ситуациях.
Подробнее обо всём этом можно размышляют в коротком, но интересном ролике.
#видео #javascript
Как правильно работать с DOM в JavaScript в 2025 году?
Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.
1. Получение элементов
Вместо старых
2. Изменение текста и HTML
Всё зависит от того, что именно нужно поменять.
Не используйте
3. Изменение классов
Правильный способ через
4. Изменение стилей
Не стоит вручную писать
Если нужно много стилей — лучше добавьте или измените класс. Так проще, централизованно и удобнее управлять дизайном.
5. Создание и добавление новых элементов
Лучший способ — использовать
Если нужно добавлять элементы в разные места:
6. Удаление элементов
Самый актуальный способ —
Раньше приходилось делать так (и это было неудобно):
7. Обработчики событий (современный подход)
Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте
Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.
#простымисловами #фронтенд
Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.
1. Получение элементов
Вместо старых
getElementById и getElementsByClassName сегодня лучше использовать querySelector и querySelectorAll. Они более универсальные и понятные.const title = document.querySelector("#title"); // Получает 1 элемент (по id)
const buttons = document.querySelectorAll(".btn"); // Получает список всех кнопок с классом .btnquerySelector и 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("Кнопка нажата!");
});Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.
#простымисловами #фронтенд
Обновляем роадмап по веб-разработке — чел пошагово описал путь без лишней воды. В списке только нужные темы, чтобы стать разносторонним спецом и найти работу с высокой зарплатой.
• Теория веба, об устройстве браузера, методологиях разработки и работе приложений.
• Веб-компоненты и доступность приложений.
• Все необходимые инструменты от языков разметки до масштабных фреймворков и библиотек.
• Тестирование и командная разработка.
• UX/UI-дизайн.
• Алгоритмы и структуры данных.
Сохраняем роадмап — тут.
• Теория веба, об устройстве браузера, методологиях разработки и работе приложений.
• Веб-компоненты и доступность приложений.
• Все необходимые инструменты от языков разметки до масштабных фреймворков и библиотек.
• Тестирование и командная разработка.
• UX/UI-дизайн.
• Алгоритмы и структуры данных.
Сохраняем роадмап — тут.
Forwarded from Мобильная разработка
This media is not supported in your browser
VIEW IN TELEGRAM
Как управлять компонентом React с помощью URL
Иногда нам нужно, чтоб при перезагрузке сохранялись данные на странице. Например, при поиске чего-либо. Не хочется заново настраивать все фильтры после обновления страницы, согласитесь?
В React есть несколько способов сделать это. Но некоторые могут сломать ваше приложение и вызвать неприятные ошибки. В этой статье вы узнаете о правильном методе реализации такого функционала.
#react
Иногда нам нужно, чтоб при перезагрузке сохранялись данные на странице. Например, при поиске чего-либо. Не хочется заново настраивать все фильтры после обновления страницы, согласитесь?
В React есть несколько способов сделать это. Но некоторые могут сломать ваше приложение и вызвать неприятные ошибки. В этой статье вы узнаете о правильном методе реализации такого функционала.
#react
Динамические layout с Vue jsx: руководство по созданию гибких и удобных в обслуживании пользовательских интерфейсов
Вы когда-нибудь часами настраивали один и тот же layout на нескольких страницах или пытались адаптировать пользовательский интерфейс к изменяющимся данным, чтобы он не ломался? Эти распространённые проблемы могут замедлить процесс разработки и привести к созданию кода, в котором легко допустить ошибку.
Динамические layout решают это проблему и упрощают создание адаптивных интерфейсов. Как их создавать и какими особенностями они обладают, рассказали в этой статье.
#vue #фронтенд
Вы когда-нибудь часами настраивали один и тот же layout на нескольких страницах или пытались адаптировать пользовательский интерфейс к изменяющимся данным, чтобы он не ломался? Эти распространённые проблемы могут замедлить процесс разработки и привести к созданию кода, в котором легко допустить ошибку.
Динамические layout решают это проблему и упрощают создание адаптивных интерфейсов. Как их создавать и какими особенностями они обладают, рассказали в этой статье.
#vue #фронтенд
Frontend Stuff
Это постоянно расширяющийся список фреймворков, библиотек и инструментов, которые вы можете использовать для создания веб-приложений. В каталоге вы найдёте описание огромного количества инструментов со ссылками на них. Для удобства инструменты отсортированы по категориям.
#инструменты #фронтенд #github
Это постоянно расширяющийся список фреймворков, библиотек и инструментов, которые вы можете использовать для создания веб-приложений. В каталоге вы найдёте описание огромного количества инструментов со ссылками на них. Для удобства инструменты отсортированы по категориям.
#инструменты #фронтенд #github
Челлендж по запуску 12 простых IT-проектов за 12 месяцев
Летом 2023 г. появилось комьюнити инди-хакеров, в котором ребята решили запускать один простой продукт в онлайне каждый месяц.
И в реальном времени показывать: как разрабатывают, продвигают и сколько получилось заработать на запусках таких микро-проектов. Держите подборку их кейсов:
— пост про то, почему американцы платят $40 за простой конвертер картинок, который сделали за 4 недели, несмотря на обилие бесплатных аналогов.
— пост про то, как за 2 недели запустили темную тему с тарифами от $5 до $99. Четыре таких продукта приносят на пассиве как ЗП среднего разработчика.
— пост про то, как все может грустно закончиться, если 2 года пилить сложный продукт, не показывая его рынку.
— пост про то, как заработали 1,7 млн рублей на боте для создания фотокниг и какие фейлы допустили.
Первая находка в их комьюнити IT-билдеров — метод, который позволяет сделать запуск за 1 месяц.
Вторая находка — метод продвижения, который они используют. В среднем на продвижение одного IT-продукта уходит $150, причем есть продукты с 200К+ юзеров.
Вот здесь можно подписаться на канал, чтобы подглядеть за их запусками. А может, и попробовать сделать такой простой продукт самому.
Реклама. Рекламодатель: ИП Зуев Игорь Владимирович ИНН 360408359441, erid: 2W5zFJ6HzCG
Летом 2023 г. появилось комьюнити инди-хакеров, в котором ребята решили запускать один простой продукт в онлайне каждый месяц.
И в реальном времени показывать: как разрабатывают, продвигают и сколько получилось заработать на запусках таких микро-проектов. Держите подборку их кейсов:
— пост про то, почему американцы платят $40 за простой конвертер картинок, который сделали за 4 недели, несмотря на обилие бесплатных аналогов.
— пост про то, как за 2 недели запустили темную тему с тарифами от $5 до $99. Четыре таких продукта приносят на пассиве как ЗП среднего разработчика.
— пост про то, как все может грустно закончиться, если 2 года пилить сложный продукт, не показывая его рынку.
— пост про то, как заработали 1,7 млн рублей на боте для создания фотокниг и какие фейлы допустили.
Первая находка в их комьюнити IT-билдеров — метод, который позволяет сделать запуск за 1 месяц.
Вторая находка — метод продвижения, который они используют. В среднем на продвижение одного IT-продукта уходит $150, причем есть продукты с 200К+ юзеров.
Вот здесь можно подписаться на канал, чтобы подглядеть за их запусками. А может, и попробовать сделать такой простой продукт самому.
Реклама. Рекламодатель: ИП Зуев Игорь Владимирович ИНН 360408359441, erid: 2W5zFJ6HzCG