Вы новичок в программировании или только начинаете заниматься веб-разработкой? Вы постоянно прыгаете от одного учебника по программированию к другому? Если что-то из этого относится к вам, знайте, что вы не одиноки. Я тоже был таким же, как ты. Это чувство желания поправиться, просмотрев множество видеоуроков, - это то, что я называю чистилищем обучающих программ, и если вы окажетесь в этом бассейне, у меня может быть решение для вас.

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

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

Приложение для опроса в реальном времени

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

вещи, которые вы узнаете.

  1. Аутентификация и авторизация пользователя
  2. Базовые операции CRUD (создание опросов, чтение опросов, обновление и удаление)
  3. Управление отношениями (отношения между опросом, вариантами опроса, голосами, пользователями)
  4. Спокойный дизайн api (с использованием node / express)
  5. Голосование в реальном времени с использованием socket.io или pusher
  6. Использование api на стороне клиента (с использованием собственной выборки или аксиомов)
  7. Маршрутизация на стороне клиента
  8. Управление состоянием и анимация голосования (индикатор выполнения)

см. живую демонстрацию или ссылку на github для справки.

Приложение Todo

Да, вы, наверное, сказали, нет! не еще одно сегодняшнее приложение, но это больше, чем просто приложение с задачами. Приложение todo с акцентом на анимацию и CSS, позволяющее переключать темы.

вещи, чтобы узнать

  1. Возможность изучить новый интерфейсный фреймворк (vue, react, angular, selvete)
  2. Узнать больше об управлении состоянием
  3. Написание стилей в vanilla css.
  4. Приступаем к работе с анимацией, такой как анимация при добавлении и удалении новых элементов списка задач.
  5. Приступаем к работе с html-формами
  6. Работа с локальным хранилищем
  7. Работа с переменными css для переключения тем
  8. Добавьте дополнительные функции, такие как возможность сортировки задач путем перетаскивания

посмотрите живую демонстрацию или посетите эту ссылку на github для справки.

Приложение Node.js CLI

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

вещи, чтобы узнать

  1. Узнайте больше о манипуляциях с файловой системой с помощью node.js
  2. Как взаимодействовать со сложным вводом командной строки
  3. Создание красивых приложений командной строки
  4. синтаксический анализ аргументов командной строки
  5. как создавать небольшие интерфейсы командной строки для взаимодействия с такими фреймворками, как vue / response.
  6. Получите возможность взаимодействовать с apis узла нижнего уровня.

ссылка на учебник по twilio

Клиент HackerNews с рендерингом на стороне сервера

Рендеринг на стороне сервера сейчас важен из-за SEO и производительности. Почему бы вам не узнать об этом больше, создав новостной клиент для хакеров.

вещи, чтобы узнать

  1. Основы рендеринга на стороне сервера (что можно и что нельзя делать, а что нет)
  2. Разделение кода
  3. Гидратация на стороне клиента
  4. Прогрессивное веб-приложение
  5. Предварительная выборка и предварительная загрузка данных
  6. Подписка в реальном времени
  7. Разработка универсального приложения

этот проект фактически выполняется в nuxt (для vue), но может быть выполнен с помощью next (для реакции) или вы можете создать свой собственный, если хотите погрузиться глубже.

Живая демонстрация и ссылка на репозиторий здесь для справки

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

Вы можете общаться со мной в твиттере