Всем привет! Подскажите пожалуйста есть такая задача, есть форма из 5 шагов, как сделать так что бы каждый шаг открывался без перезагрузки страницы, или все на одной странице но каждый шаг ставал доступен только после корректного заполнени…
Новое сообщество Just Vue It расскажет о преимуществах фреймворка VueJS в формате открытого общения.
— Читать дальше «Вебинар «Зачем мне нужно изучить VueJS»»
…
Как убрать расстояние между двумя столбцами в библиотеке recharts
Считается, будто порог входа во фронтенд-разработку невысок. Этот стереотип испортил репутацию профессии, приведя в нее немало готовых работать за еду новичков. Рассказываем, как не пополнить их ряды.
Чтобы стать классным специалистом и начать хорошо зарабатывать, вам придется постараться и потратить немало времени. Создавать визуальную часть сайта ничуть не проще чем серверную, а знать для этого нужно очень много. Предлагаем вашему вниманию актуальную в 2021 году дорожную карту фронтендера. Следуйте этому плану, и вы сможете освоить популярную профессию, не пополнив ряды программистов за еду.
Список задач, которые решает Front-end developer, меняется в зависимости от специфики проекта и уровня подготовки разработчика. В него могут входить следующие позиции:
Веб-разработчикам никуда не деться от изучения трех «китов»: разметки (HTML), каскадной таблицы стилей (CSS) и языка программирования JavaScript. С этим помогут материалы на CodeAcademy и YouTube: HTML Full Course, CSS Tutorial и CSS Crash Course for Absolute Beginners, Object-oriented Programming in JavaScript.
Для работы потребуется использовать один/несколько фреймворков: ReactJS, AngularJS, VueJS, Bootstrap. Разобраться с React JS поможет ролик freeCodeCamp на YouTube, там же можно найти курс по VeuJS.
Примеры статических сайтов: визитки, лендинги, справочники, каталоги продукции. Упростить их создание помогут: Next (React-based), Nuxt (Vue-based), Gatsby (React-based), Gridsome (Vue-based).
Расшифровка акронима JAM: JavaScript, API and Markup. Архитектура JAMStack основана на клиентском JavaScript, повторно используемых API и предварительно созданной разметке. Что такое JAMStack и как с ним работать можно почитать здесь и на snipcard. Дополнительно в стеке используют CDN и Git.
Знания PWA (англ. progressive web app или мобильное приложение в браузере) потребуются опытным разработчикам. Прогрессивные приложения направлены на надежность и быстроту работы с технологиями Push Notifications, Service Worker, Web App manifest, App shell, HTTPS.
Этот язык запросов и манипулирования данными для API (а также среда выполнения запросов) является основным для каждого фронтендера, который не хочет работать за еду. Обрабатывающий запросы сервер GraphQL находится между клиентом и источниками данных.
Ресурсы для изучения GraphQL:
Веб-программисту на коммерческом или корпоративном проекте стоит уметь выполнять:
Основы чистого кода:
Если вы используете Windows, не стоит полагаться только на графический интерфейс. Чтобы упростить работу с файлами и каталогами (найти, открыть, закрыть, удалить и пр.), а также использовать неочевидные возможности ОС, потребуется знание базовых команд. Кроме старого доброго CMD рекомендуется освоить более прогрессивный PowerShell, а использующим один из дистрибутивов GNU/Linux разработчикам стоит изучить bash.
Онлайн-хостинг для контроля версий GitHub позволяет людям по всему миру совместно работать над проектами. К тому же в репозиториях можно найти много бесплатных решений для собственных разработок.
Открытый проект OWASP собирает статистику, необходимую для обеспечения безопасности веб-приложения. Для изучения основ необходимо понимать отличия HTTPS и HTTP, какова политика защиты контента (CSP) и принципы работы с CORS.
В процессе изучения теории важно сразу применять знания на практике. Писать фрагменты кода, собирать их в единый проект (можно в выдуманный) – это поможет при трудоустройстве после обучения. Если вы создадите что-то полезное и выложите это на GitHub, всегда можно показать свои наработки потенциальному работодателю. Даже если сразу не получится пойти на позицию джуниора, не пренебрегайте бесплатной стажировкой. Начинающих специалистов на рынке труда более чем достаточно, так что стоит пользоваться любым шансом.
Оставаться востребованным фронтенд-разработчиком можно только если вы все время учитесь. В этом вам помогут freeCodeCamp, Codecademy.
Перечень недостающих знаний можно проверить по чек-листам:
Продвижение по карьере, особенно в сторону менеджмента, предполагает развитие софт-скилов. Вот их примерный список:
Если вы знаете английский, можно пройти курс w3wschhools по HTML, CSS и JavaScript, или по программе Мичиганского университета заняться на coursera веб-дизайном и программированием. Популярная международная платформа предлагает множество аналогичных позиций, включая курс Duke university по основам JavaScript, HTML и CSS.
Если вас больше привлекает обучение на русском языке, обратите внимание на факультет frontend-разработки GeekBrains. В программе российской образовательной онлайн-платформы есть все необходимое:
Всем привет! Пишу приложение на react для маркировки техники, для этого при определенном option мне нужно отрисовать новые поля (select, input) для заполнения, как мне это осуществить?
…
const filter = () => {
const menu = document.querySelector(‘.portfolio__menu’),
items = menu.querySelectorAll(‘li’),
wrapper = document.querySelector(‘.portfolio__blocks’),
markAll = wrapper.querySelectorAll(‘.all’),
…
Спикеры из крупных мировых компаний поговорят о применении Flutter и Dart в разработке приложений, сайтов и игр. Рассмотрят кейсы, проведут панельные дискуссии, воркшопы и Q&A-сессии.
— Читать дальше «Flutter Global Summit’21»
…
Полностью скопировал код из одного ролика и столкнулся с ошибкой, которой не было у автора. Есть страница index.php, с такой частью php кода.
$page = $_GET[‘page’];
if (!isset($page)) {
require(‘stars.php’);
} elseif (…
Руководители Red Collar и HTML Academy расскажут о специфике разработки в диджитал-агентстве, задачах и проектах frontend-разработчика и трудоустройстве джунов.
— Читать дальше «Митап «Как устроена разработка в диджитал-агентстве: интервью с Red Collar…
Небольшая подборка малоизвестных техник для HTML, CSS и JavaScript.
Чтобы спрятать DOM-элемент, вам не нужен JavaScript, достаточно нативного HTML-атрибута hidden. Эффект аналогичен добавлению стиля display: none, элемент просто исчезает со страницы.
<p hidden>Этот параграф не виден на странице, он спрятан из HTML.</p>
Конечно, с псевдоэлементами такой трюк не сработает.
Вы знакомы с CSS-свойством inset? Это сокращенный вариант для всем знакомых top, left, right и bottom. По аналогии с кратким синтаксисом свойства margin или padding вы можете задать все смещения для элемента одной строчкой.
// До
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
// После
div {
position: absolute;
inset: 0;
}
Использовать краткий синтаксис полезно для уменьшения размера CSS-файла, и код так выглядит чище. Однако не забывайте, что inset – это логическое свойство, оно учитывает направление письма. То есть если на вашем сайте используется язык с направлением rtl, то лево окажется справа и наоборот.
Вы можете легко определить скорость интернета пользователя из кода на JavaScript с помощью объекта navigator.
navigator.connection.downlink;
Результат не очень 🙂 Скорость моего интернета всего 5,65 мб/сек.
Да, так тоже можно. Метод vibrate() объекта window.navigator может включить режим вибрации на мобильном устройстве.
window.navigator.vibrate(500);
Методу можно передать параметр – время вибрации в миллисекундах. А можно указать даже паттерн – чередование интервалов вибрации и пауз. Для этого передайте методу массив чисел.
Pull-to-refresh (потяни для обновления) – это популярный паттерн мобильной разработки. Если он вам не нравится, просто запретите этот эффект с помощью CSS-свойства overscroll-behavior-y со значением contain.
body {
overscroll-behavior-y: contain;
}
Это свойство также очень полезно для организации прокрутки внутри модальных окон – оно запрещает основной странице перехватывать скролл на себя при достижении границы.
Возможно, вы захотите запретить пользователю вставлять в поля ввода скопированный откуда-то текст (хорошо подумайте, стоит ли оно того). Это очень просто сделать отследив событие paste и вызвав его метод preventDefault().
<input type="text"></input>
<script>
const input = document.querySelector('input');
input.addEventListener("paste", function(e){
e.preventDefault()
})
</script>
Упс, теперь не получится копипастить, придется писать вводить все руками.
Эти приемы используются не очень часто, но могут быть вам полезны в ряде ситуаций. Надеемся, вы нашли что-то интересное для себя.
Компания Т1 Консалтинг проводит свой хакатон CRM Hack, чтобы найти решения для CRM нового поколения, которой будут пользоваться крупнейшие корпорации.
— Читать дальше «CRM Hack»
…
Недавно проходил собеседование на Fronted разраба, спросили разницу между for и while, не смог ответить. Если можно сделать все, то что делается на while, можно сделать на for и даже больше. Так в чем разница?
…
я начинающий во фронтенде, попал недавно в школу от IT комании, где нам дали проект.
Нас в команде трое(2 фронта и 1 бэк).
Так вот,я вообще не понимаю с чего начать,как сделать первые шаги,что обсудить с напарниками из команды,как вообще р…
Изучите всё, необходимое фронтенд-разработчику: HTML, CSS, JS, а также React в связке с Redux. Ничего платить не придётся, пока не найдёте работу в Москве.
— Читать дальше «Обучение фронтенду с оплатой после трудоустройства»
…
Эксперт по бэкенд- и фронтенд-разработке поговорит о типичных проблемах на бэкенде с Node.js, о фронтенде с React/Redux, ответит на вопросы и даст рекомендации.
— Читать дальше «Митап «Common anti-patterns in JS apps»»
…
В коде ниже, во время загрузки страницы вместо "u" генерируется знак рубля "₽" с нужными стилями. "u" здесь выступает в качестве заглушки и без нее, к сожалению никак.
<span class="ruble">u<…
Становимся более крутыми JavaScript-разработчиками с помощью семи популярных репозиториев на GitHub. Не теряя ни минуты приступаем к рассмотрению.
Перевод публикуется с сокращениям…
Всем привет, это Макс Кравец из Holyweb. Поговорим о том, почему фронтенд-разработчику важно учить JavaScript, а не фреймворк или библиотеку.
— Читать дальше «Прекратите изучать фреймворк, станьте JavaScript-разработчиком!»
…
Вот так выглядит сайдбар с категориями:
Хочу сделать так, как изображено здесь, на сайте unsplash.com, то есть придать способность пролистывать:
Я не могу сделать так, как хочу, а вместо этого у меня слайдер лишь с одним пунктом на кажды…
Написать функцию increaseSalary, которая:
1)Получает данные по всем работникам
2)Находит работника с наименьшей зарплатой
3)Отправляет запрос на повышение зарплаты этому сотруднику на 20%
4)Если запрос прошел успешно – отправить сотруднику…
Написать функцию increaseSalary, которая:
1)Получает данные по всем работникам
2)Находит работника с наименьшей зарплатой
3)Отправляет запрос на повышение зарплаты этому сотруднику на 20%
4)Если запрос прошел успешно – отправить сотруднику…
Ищу среду разработки или расширение для какой-нибудь среды, через которое можно делать верстку html странички через графический конструктор. Или хотя бы при работе с кодом можно было в режиме реального времени увидеть графические изменения…
2 недели онлайн-сессий, воркшопов, разборов кейсов и круглых столов по архитектуре фронтенда и разработке интерфейсов от ведущих разработчиков Авито, Aviasales, Feature Sliced Core Team, DRIVE2 и Effector.
— Читать дальше «Конференция Podlodka Frontend…
Console – встроенный отладчик браузера. Многие разработчики постоянно используют в коде console.log() для вывода отладочных сообщений, но этот инструмент может предложить гораздо больше.
…
На сайте используется lightbox (всплывающее окно со слайдером) Glightbox js,оно открывается нажатием на картинку но нужно чтобы открывалось и на кнопку.
в readme говорится о триггерах, но непонятно как это использовать.
https://biati-digit…
Введение
Здравствуйте.
Думаю стоит начать с того что я новичок в Python ну и соответственно в Pandas. А с фронтенд разработкой я вообще раньше никогда не сталкивался. Так уж случилось что мне нужно было написать небольшой скрипт для автома…
На вводном вебинаре бесплатного курса «JavaScript/Front-end. Stage 0» расскажут про школу, процесс обучения и выдадут первое домашнее задание.
— Читать дальше «Курс «JavaScript/Front-end. Stage 0»»
…
Как вишенка на торте — работающий Click Wheel.
— Читать дальше «iPod.js — веб-версия легендарного плеера с авторизацией через Spotify и Apple Music»
Необходимо заменить дефолтное отображение в компоненте v-data-table.
В template можно передать шаблон для конкретного столбца, но этих столбов 11. Такой код неудобно читаем и, при изменении дизайна, нужно менять в 11 местах.
Код, который и…
Не взламывая ничего, естественно.
Свежие комментарии