Pull to refresh
1
0

Пользователь

Send message

10 советов и приемов, которые помогут вам стать лучшим разработчиком на VueJS

Reading time4 min
Views23K

Перед вами вольный перевод статьи "10 Tips & Tricks to make you a better VueJS Developer" с сайта Dev.to. Автор расскажет нам об интересных и полезных вариантах применения привычных нам средств VueJS.


Введение


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

Читать дальше →
Total votes 24: ↑23 and ↓1+22
Comments16

Заметки верстальщика: Полезные расширения Google Chrome в 2019 году

Reading time4 min
Views52K

В моем браузере установлено около 30 расширений, которые упрощают жизнь и работу в интернете. В этой статье я хочу поделиться 10 актуальными расширениями Google Chrome для верстальщика, которые постоянно использую при разработке сайтов.

Читать дальше →
Total votes 37: ↑34 and ↓3+31
Comments16

9 полезных браузерных расширений для разработчиков (cписок на 2020 год)

Reading time4 min
Views19K
Как упростить себе жизнь при помощи браузерных плагинов.

Хитрые веб-разработчики умеют пользоваться браузером на уровне «god-mode». Расширения(плагины, add-on) чрезвычайно полезны, когда речь идет об улучшении рабочей среды и повышении производительности написания кода.

Не за горами 2020 год. Появилось много новых расширений. Я собрал наиболее полезные расширения для веб-разработчиков и поместил их в один список.

Refined GitHub


Refined Github упрощает интерфейс GitHub и добавляет полезные улучшения.

image

Refined Github

«Надеемся, что GitHub заметит как необходимы эти улучшения и добавит некоторые из них. Поэтому, если вам нравится какое-либо из этих улучшений напишите, пожалуйста, в службу поддержки GitHub об этом».
— создатели Refined Github.
Читать дальше →
Total votes 30: ↑23 and ↓7+16
Comments8

Нетривиальная расстановка элементов на flexbox без media-запросов

Reading time7 min
Views27K
Казалось бы, какой пост может быть о CSS Flexbox в 2019 году? Верстальщики уже несколько лет активно используют данную технологию, и все тайны должны быть разгаданы.

Однако, недавно у меня возникло стойкое ощущение, что нужно поделиться одним нетривиальным и, на мой взгляд, полезным приёмом, связанным с flexbox. Написать пост побудил тот факт, что ни один знакомый (из учеников, верстальщиков и просто людей, близких к web), не смог решить задачку, связанную с flexbox, хотя на это нужно всего 4-6 строк.
Читать дальше →
Total votes 52: ↑51 and ↓1+50
Comments18

Где и как использовать мультиколонки (CSS Columns)

Reading time7 min
Views26K

При всём ажиотаже вокруг технологий CSS Grid и Flexbox, часто упускается из виду другой метод разметки. В этой статье я хочу рассмотреть многоколоночный макет — часто называемый просто «Multicol» или «CSS Columns». Вы узнаете, для каких задач он подходит и какие нюансы следует учитывать при его использовании.
Читать дальше →
Total votes 13: ↑12 and ↓1+11
Comments3

Верстаем flex-календарик

Reading time8 min
Views18K

Идет 2018 год, модные пацаны давно уже верстают на grid, а я все на третьем бутстрапе сижу с col-md кочерячусь, мельком поглядывая на четвертый.


Решил я, что это не дело, и стоит немного знания освежить, но у grid вроде как поддержка пока хромает, а вот flex технологию уже даже утюги поддерживают.


Вот и решил его освоить. И процессом усвоения с вами поделится. В общем, будем верстать календарик на весь год.

Читать дальше →
Total votes 15: ↑13 and ↓2+11
Comments8

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Reading time7 min
Views82K
Аккордеон и faq

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

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

  1. Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
  2. Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
  3. Будет доступно управление элементами с клавиатуры и других устройств.
  4. Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
  5. Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
  6. Работает при выключенном javascript.
Total votes 38: ↑37 and ↓1+36
Comments17

.container больше не нужен

Reading time7 min
Views135K
Все верстальщики в своих проектах используют div.container для центрирования контента и этот способ имеет некоторые особенности, от которых можно избавиться. Прочитав эту статью, Вы узнаете про способ, который позволит полностью отказаться от контейнера. Я попытаюсь рассказать о плюсах и минусах использования контейнера и альтернативного способа центрирования контента средствами только лишь css.
Читать дальше →
Total votes 32: ↑27 and ↓5+22
Comments51

Заметка для фронтендеров: что проверить перед тестированием

Reading time4 min
Views7.2K
Всем привет!

Так сложилось, что я из той самой службы контроля качества. Недавно наша команда писала большую фичу. Немного порефлексировав, решил создать такую вот статью-шпаргалку для фронтендеров. Она напомнит на что стоит обратить внимание перед передачей задачи в тестирование.
Читать дальше →
Total votes 20: ↑18 and ↓2+16
Comments15

Дайджест свежих материалов из мира фронтенда за последнюю неделю №373 (22 — 28 июля 2019)

Reading time3 min
Views12K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →
Total votes 25: ↑25 and ↓0+25
Comments1

Дайджест свежих материалов из мира фронтенда за последнюю неделю №374 (29 июля — 4 августа 2019)

Reading time3 min
Views12K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →
Total votes 27: ↑27 and ↓0+27
Comments2

Использование let объявлений переменных и особенности образуемых связываний в замыканиях в JavaScript

Reading time7 min
Views11K
Написать данную заметку меня сподвигло прочтение статьи на Хабре «Var, let или const? Проблемы областей видимости переменных и ES6» и комментариев к ней, а также соответствующей части книги Закаса Н. «Understanding of ECMAScript 6». Исходя из прочитанного я вынес, что не всё так однозначно в оценке использования var или let. Авторы и комментаторы склоняются к тому, что при отсутствии необходимости поддержки старых версий браузеров имеет смысл полностью отказаться от использования var, а также использовать некоторые упрощенные конструкции, заместо старых, по умолчанию.

Про области видимости этих объявлений уже сказано достаточно, в том числе и в указанных выше материалах, поэтому я хотел бы заострить внимание только на некоторых неочевидных моментах.
Читать дальше →
Total votes 23: ↑22 and ↓1+21
Comments1

Сначала фронт, а потом бэк (когда-нибудь)

Reading time14 min
Views49K

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


Разработка сложного функционала требует тонкой координации усилий коллектива инженеров.


И одним из важнейших моментов является вопрос распараллеливания задач.


Возможно ли избавить фронтовиков от необходимости ждать реализацию бэка? Есть ли способ распараллелить разработку отдельных фрагментов UI?


Тему распараллеливания задач в веб-разработке мы и рассмотрим в этой статье.


Читать дальше →
Total votes 33: ↑31 and ↓2+29
Comments69

Дайджест свежих материалов из мира фронтенда за последнюю неделю №375 (5 — 11 августа 2019)

Reading time4 min
Views11K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →
Total votes 26: ↑26 and ↓0+26
Comments3

Задание для саморазвития: HTML-форма со списком случайных строк и отбором по ним

Reading time3 min
Views4K
Предлагаю вниманию хабровчан и гостей Хабра задание для саморазвития во frontend-стороне разработки. Задание ориентировано на исполнителей, начинающих разбираться с frontend-программированием и настроенных тесно познакомиться с базовыми механизмами программирования в браузере. Необходимые технологии: HTML, CSS, JavaScript (Vanilla).

image

Задание специально составлено так, чтобы как можно больше разобраться в базовых технологиях при минимальном подключении каких-либо дополнительных средств. По сути, требуется только браузер и редактор кода; никаких предварительных манипуляций, без необходимости обработки на backend-стороне. Кому интересно ознакомиться с постановкой — Добро пожаловать под кат!
Читать дальше →
Total votes 22: ↑10 and ↓12-2
Comments0

Дайджест свежих материалов из мира фронтенда за последнюю неделю №371 (24 — 30 июня 2019)

Reading time4 min
Views11K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →
Total votes 36: ↑33 and ↓3+30
Comments2

Дайджест свежих материалов из мира фронтенда за последнюю неделю №372 (1 — 7 июля 2019)

Reading time3 min
Views11K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →
Total votes 26: ↑26 and ↓0+26
Comments3

Что ты такое, замыкания в JavaScript?

Reading time4 min
Views27K
В этой статье я постараюсь подробно разобрать механизм реализации замыканий в JavaScript. Для этого я буду использовать браузер Chrome.

Начнем с определения:
Замыкания  - это функции, ссылающиеся на независимые (свободные) переменные. Другими словами, функция, определённая в замыкании, 'запоминает' окружение, в котором она была создана.
MDN

Если вам что-то не понятно в этом определении, это не страшно. Просто читайте дальше.

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

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

Итак, приступим:


Рисунок 1
Читать дальше →
Total votes 29: ↑27 and ↓2+25
Comments11

Полезные расширения Google Chrome для программиста

Reading time4 min
Views40K
Работа программиста настолько сложна и разнообразна, что в ней просто не обойтись без помощи различных инструментов. Подготовил список из 34 полезных расширений Google Chrome, которые облегчат вашу жизнь и сэкономят время.

image

1. Octotree

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

2. PerfectPixel by WellDoneCode

Это расширение позволяет разработчикам накладывать изображения полупрозрачным слоем поверх HTML и делать попиксельное сравнение.

3. GitHub Repository Size

Удобный и простой плагин, отображающий как объем отдельного репозитория, так и размер кажого файла в нем.
Читать дальше →
Total votes 35: ↑26 and ↓9+17
Comments11

SVG индикатор загрузки на Vue.js

Reading time12 min
Views12K

Привет! Учусь на front-end, и параллельно, в учебном проекте, разрабатываю SPA на Vue.js для back-end, который собирает данные от поискового бота. Бот нарабатывает от 0 до 500 записей, и я должен их: загрузить, отсортировать по заданным критериям, показать в таблице.


Ни back-end ни бот, сортировать данные не умеют, поэтому мне приходятся загружать все данные и обрабатывать их на стороне браузера. Сортировка происходит очень быстро, а вот скорость загрузки, зависит о коннекта, и указанные 500 записей могут загружаться от 10 до 40 секунд.


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


Чтобы скрасить пользователю ожидание, я решил показать ему процесс загрузки:


  1. цифрами — сколько % записей уже загружено
  2. графиком — время загрузки каждой записи
  3. заполнением — % загрузки. Так как график по мере загрузки заполняет прямоугольный блок, видно, какую часть блока осталось заполнить

Вот анимация результата, к которому я стремился и получил:



… по-моему, получилось забавно.


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


Total votes 19: ↑18 and ↓1+17
Comments5

Information

Rating
Does not participate
Location
Россия
Registered
Activity