6 предни предизвикателства за разработчиците

Блог

6 предни предизвикателства за разработчиците

Развитието отпред е стресиращо и трудно-но с практика човек може да овладее занаята. Ако сте готови да положите труда и усилията си, ще можете да станете опитен решавач на проблеми в предния край на развитие. Един ефективен начин да станете страхотен разработчик на front-end е просто да изградите и разрешите колкото се може повече предизвикателства.

Ето шест предизвикателства, които можете да започнете да решавате днес, за да станете майстор на front-end разработката. Без повече шум, ето шестте предизвикателства, които вероятно трябва да кодирате.

1. Формуляр за кредитна карта

Фантастична форма на кредитна карта с гладки и сладки микро взаимодействия. Включва форматиране на номера, валидиране и автоматично откриване на тип карта. Изграден е с Vue.js и също напълно отзивчив.

формуляр за кредитна карта- https://github.com/muhammederdem/credit-card-form

Какво ще научите, като решите предизвикателството

  • Обработка и валидиране на формуляри
  • Обработка на слушатели на събития (например, когато полетата се променят, тя ще отпечата стойностите на кредитната карта)
  • Разбиране как да се показват и позиционират елементи на страницата, особено кредитната карта, припокриваща формуляра

2. Стълбовидна диаграма от нулата

Стълбовидна диаграма или диаграма е диаграма или графика, която представя категорични данни с правоъгълни ленти с височини или дължини, пропорционални на стойностите, които те представляват.

Лентите могат да бъдат нанесени вертикално или хоризонтално. Вертикалната диаграма понякога се нарича линейна графика.

как да създадете уебсайт с помощта на javascript

Какво ще научите, като решите предизвикателството

  • Показване на данни по структуриран и лесно разбираем начин
  • По избор: Научете как да използвате елемента „и как да рисувате елементи с него

Можете да намерите данните за световното население по години тук .

3. Хранилища на GitHub с функционалност за търсене

Тук няма нищо от света - хранилищата на GitHub са по същество просто прославен списък.

Задачата е да се покажат хранилищата и да се позволи на потребителя да филтрира през хранилищата. Използвай официален GitHub API за извличане на хранилища на потребител.

Профилна страница на GitHub - https://github.com/indreklasn

Какво ще научите, като решите предизвикателството

  • Как да извлечете данни от API
  • Как да показвате данните от API
  • Как да филтрирате и показвате съответните данни за всяко търсене
  • По избор: Ако сте изправени пред предизвикателството, използвайте v4 API , който е изграден с помощта на GraphQL. Ако искате да научите GraphQL, преминете към една от предишните ми статии.

4. Twitter Heart Animation

Още през 2016 г. Twitter представи тази страхотна анимация за своите харесвания в туит. От 2019 г. той все още изглежда добре, така че защо да не го създадете сами?

Twitter туитва като анимация

Какво ще научите, като решите предизвикателството

  • Как | _+_ | CSS атрибутът работи
  • Как да манипулирате и анимирате HTML елементи
  • Как да комбинирате JavaScript, HTML и CSS

5. Чат стаи в стил Reddit

Стаите за чат са популярен начин за комуникация, благодарение на това, че са лесни и забавни за използване. Но какво всъщност захранва съвременните чат стаи? WebSockets!

Какво ще научите, като решите предизвикателството

  • Как да използвате WebSockets и актуализации за комуникация и данни в реално време
  • Как работят нивата на разрешения на потребителите (например собственикът на канал за чат има ролята на | _+_ |, докато други в стаята имат ролята на | _+_ |)
  • Валидиране и обработка на формуляри - не забравяйте, че кутията за чат за изпращане на съобщение е | _+_ | елемент
  • Как да създадете и да се присъедините към различни чат стаи
  • Директни съобщения и как работят. Потребителите могат да общуват с други потребители насаме. По същество ще установите връзка с WebSocket между двама потребители.

6. Навигация в стил ивици

Уникалното в тази навигация е изскачащият контейнер да се преобразува, за да пасне на съдържанието. В този преход има елегантност в сравнение с традиционното поведение на отваряне и затваряне на изцяло нова възможност.

Навигация с ивици

Какво ще научите, като решите предизвикателството

  • Как да комбинирате CSS анимации с преходи
  • Кръстосано избледняващо съдържание и прилагане на | _+_ | клас за елемента, който се задържа

Опитайте първо да го направите сами, но ако имате нужда от помощ, вижте тази публикация за ръководство стъпка по стъпка.

javascript на обикновен английски

Заключение

Не забравяйте, че няма преки пътища, когато става въпрос за усъвършенстване на кодирането. Започнете да влагате работата и подобрете уменията си за кодиране, като изградите възможно най -много. Ако не сте намерили нищо интересно, проверете публикацията по -долу за още идеи.

Благодаря за четенето - надявам се, че сте намерили нещо интересно за кодиране.

#Развитие на предния край #JavaScript #React #Програмиране