Добро пожаловать на Web Dev Tips!

Web Dev Tips - это сборник советов и рецептов по веб-разработке (в основном по фронтенду) и настройке пк под себя, которые в какой-то момент мне помогли и которые я собрал в базу знаний, чтобы не забыть. Возможно они пригодятся и вам!

Хочу подчеркнуть, что это не энциклопедия. Для получения обширных базовых знаний стоит обратиться к MDN, javascript.info или Доке. Часть заметок здесь взята из подобных сайтов, но в основном Web Dev Tips - это вещи, которые можно узнать только из практики. Частично из моей собственной, частично из stackoverflow, блогов и остального веба.

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

Еще один дисклеймер: любым советам здесь вы следуете на свой страх и риск. Некоторые из них могут не работать у вас или работать не так.

Как пользоваться

Слева в боковой панели вы найдете все заметки, разделенные по нескольким общим рубрикам.

В шапке есть поиск по всем заметкам (ищет по заголовкам, тегам и содержимому).

Справа панель с тегами. У каждой заметки может быть множество тегов, то есть тем, которые она затрагивает.

Как поучаствовать

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

Сайт Web Dev Tips сделан на Jekyll. Если захотите собрать его у себя полностью, то учтите, что он сделан на базе ruby 2.7.6. Если у вас другая версия, используйте менеджер версий ruby rbenv или rvm.

Но чтобы поучаствовать вам не обязательно что-то устанавливать и собирать. Достаточно отредактировать заметку прямо здесь на гитхабе или создать новую. Для редактирования нажмите на ссылку "Edit on GitHub!", которая есть на каждой странице сайта. Все заметки - это файлы в формате markdown.

Имя файла обязательно должно содержать дату в формате YEAR-MONTH-DAY-name.md, например 2023-04-22-how-to.md. Сверху каждого нового файла должен быть заполнен front matter - скрытые свойства заметки. Синтаксис:

---
layout: post
title: 'Заголовок, который будет виден пользователям'
notebook: 'frontend'
tags: [css, html, animation]
---

notebook - это одна из основных рубрик (см. ниже и в сайдбаре).

Можно указать ссылку на источник в sources, если он есть. url должен быть кавычках.

sources: ['https://www.site.com/']

После этого нажмите на кнопку "Отправить пулл реквест", мне придет уведомление и я посмотрю ваше предложение. Я могу его принять, не принять, изменить или предложить изменить вам.

Рубрики

В данный момент на сайте есть рубрики frontend, webdev, backend и pc.

• frontend - html, css, js, верстка и все вокруг этого.
• webdev - сюда я вынес вещи, которые не обязательно относятся к фронтенду, но могут для него использоваться. Например npm пакеты, сборщики и т.п. Это сделано просто, чтобы не сваливать все в одну кучу.
• backend - для любых языков веб бэка. Я сейчас немного занимаюсь node.js и ruby (через jekyll).
• pc - советы, не имеющие отношения к разработке. Подобные вопросы можно найти на superuser, а не stackoverflow.

Вы также можете предложить создать новый раздел, если вам есть, что в него добавить.

Roadmap - то, что уже сделано и планы на будущее (может меняться)

• Прототип верстки на базе дефолтной Jekyll темы minima вместо готовой, потому что я не ищу простых путей
• Автоматическое наполнение сайдбара
• Облако тегов, теги в постах
• Поиск по сайту
• Пагинация
• Перенос моих заметок из базы знаний в более презентабельном виде [частично]
• Кнопка редактировать на гитхабе
• Рассказ о создании сайта и о том, почему я не ищу простых путей в about
• Отображение источников из front matter на страницах постов
• Перенести ответы со stackoverflow из моих закладок, которых не было в заметках [частично]
• Главная страница с виджетами, перенос всех постов на отдельную
• Количество постов в облаке тегов
• Перенос на полностью свою верстку (БЭМ без нестинга, устаревших практик, убрать все от minima и т.п.)
• Темная тема
• Гармошка в сайдбаре
• Посты по тегам в сайдбаре
• Подготовить верстку, как тему для jekyll
• Форк поиска
• Улучшения поиска (работающий fuzzy, подробности в результатах)
• Документация для участников
• Локализация интерфейса и содержимого на английский язык (и на русский, где на англ)
• Комменты
• Ваши предложения)

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