#13: Webpack, React, Pug, гриды, облачный редактор и убийца npm

Дорогие наши зрители, перед вами очередной выпуск DevShow c символичным и несколько устрашающим номером 13. Но не пугайтесь, выпуск не принесет вам бед и несчастий, напротив, из него вы почерпнете много полезной и нужной информации.

Если вы еще ни разу не сталкивались с таким понятием, как гриды, то сервис-игра Grid Garden поможет вам в увлекательной форме разобраться с этим трендом 2017 года. А если вы мечтаете изучить React или Webpack, вам прямая дорожка на сайт Survivejs, который тоже включен в этот обзор. В выпуске вы также познакомитесь с облачным IDE Cloud9, с пакетным менеджером Yarn, призванным заменить npm, и шаблонизатором PUG, узнаете про набирающий популярность js-фреймворк — Vuejs и самый легкий CSS-фреймворк.

1. Grid Garden

Сервис Grid Garden — ресурс, который научит вас пользоваться CSS Grid. Ещё недавно макет для всех страниц HTML верстался с помощью таблиц, float, затем появился Flexbox. Но теперь у нас есть новый тренд 2017 – это CSS Grid. Сервис Grid Garden поможет вам в увлекательной форме разобраться с этой технологией, которая еще больше облегчит жизнь верстальщика.

2. Облачное IDE Cloud9

Облачное IDE Cloud9 — это самый популярны на сегодняшний день облачный редактор. Им пользуются самые большие компании и университеты. Cloud9 постоянно развивается, в нем есть свои «фишки». Главное преимущество – имея логин, вы получаете доступ к своим проектам на любом компьютере, где все уже настроено под вас. Вы не привязываетесь к компьютеру, все что вам нужно — это интернет и, конечно же, облачное IDE Cloud9.

3. Survivejs.com — сервис для изучения React и Webpack

Следующим рассмотрим проект Survivejs.com — сайт, который здорово вам поможет, если вы мечтаете изучить React или Webpack. Здесь представлены две книги, которые можно купить в бумажном варианте, а можно читать онлайн. Survivejs.com рекомендуется в официальной документации Webpack. Изучаем, смотрим и шаг за шагом создаем свою сборку на Webpack. Даже если ваш английский не на высоте, здесь достаточно просто копировать код, вставлять, запускать и видеть результат. Очень рекомендуем Survivejs.com!

4. Yarn — пакетный менеджер нового поколения

Сайт yarnpkg.com – ресурс, посвященный пакетному менеджеру нового поколения Yarn, его создали ребята из Facebook, призванный заменить npm. Фактически им можно полностью заменить npm. Yarn работает быстрее, он более надежен и стабилен. Yarn показывает время выполнения каждой задачи в секундах, многие задачи делает более красиво и минималистично, что для большинства разработчиков удобнее. В нем можно работать оффлайн. На сайте LoftSchool.com вы найдете урок по Yarn, если вам интересно, заходите, смотрите!

5. Purecss.io — легкий CSS-фреймворк

На сервисе purecss.io представлен самый легкий CSS-фреймворк, как заявляют разработчики. Главное, чем гордятся разработчики, — это объем разделов CSS-фреймворка. Это и такие разделы, как Grids, Forms, Buttons, Menus и др. Разделы можно подключать по отдельности или целиком. Если вы хотите сверстать проект и сделать его максимально легким и быстро загружаемым, то purecss — это то, что вам нужно!

6. Foundation — frontend-фреймворк

Frontend-фреймворк, представленный на сайте foundation.zurb.com, предназначен для тех, кто хочет сделать проект профессиональным, с большими возможностями, настройками и вариациями. Это один из самых знаменитых frontend-фреймворков, который развивается уже не один год. Постоянно выходят свеженькие версии, очень многие знаменитые компании пользуются foundation.zurb.com. Это хороший инструмент в вашем арсенале!

7. PUG — шаблонизатор и препроцессор HTML

На сайте pugjs.org вы познакомитесь с известным шаблонизатором, достаточно распространенным. Многие его используют как препроцессор SASS для CSS. С помощью PUG можно писать сокращенный код html, только без скобок и закрывающих тегов. Документация очень наглядная, можно изучить PUG буквально за 2-3 часа и попробовать создать небольшой проект на нем. Это шаблонизатор для Node.js, возможности которого очень широки. Загляните на pugjs.org, это весьма полезный ресурс.

8. Handlebarsjs — шаблонизатор для js

Далее хотим рассказать вам о handlebarsjs.com — это JavaScript-шаблонизатор. Как говорят, «он старенький, но удаленький»! Создаете шаблончик, вставляете переменные и handlebarsjs.com сгенерирует html-код. Попробуйте, достаточно знаменитый шаблонизатор!

9. Vue — javascript-фреймворк

Сайт vuejs.org представит вам набирающий популярность js-фреймворк Vue. Мы сами начали использовать его в нашей компании LoftSchool.com, возможно и Loftblog тоже перепишем скоро на нем. В итоге работой с Vuejs остались действительно довольны. Он минималистичный и аккуратный. Очень подробная документация и очень достойная конкуренция AngularJS и ReactJS.

10. Бесплатные курсы на LoftSchool

На сайте нашей школы онлайн-образования LoftSchool вы найдете как платные курсы, так и бесплатные. Один из бесплатных курсов посвящен веб-разработке, включает в себя очень большое количество вебинаров. Второй бесплатный курс посвящен фрилансу. Хочется выделить в этом курсе то, что в нем есть большой раздел по английскому языку специально для IT-разработчиков. Заходите на сайт, регистрируйтесь и изучайте полезные курсы совершенно бесплатно.

Уверены, этот выпуск DevShow станет таким же интересным для вас, как и предыдущие. Не забудьте поделиться им со своими друзьями и поддержать лайками. Мы всегда рады обратной связи с вами! Давайте делиться и делать мир веб-разработки лучше и полезнее! А через неделю мы снова порадуем вас очередным набором полезностей. Всем спасибо! Пока!

Тайминг
1) 0:13 http://cssgridgarden.com/
2) 1:20 https://c9.io/
3) 2:30 https://survivejs.com/
4) 3:33 https://yarnpkg.com/lang/en/
5) 5:47 http://purecss.io/
6) 6:33 http://foundation.zurb.com/
7) 7:09 https://pugjs.org/api/getting-started…
8) 8:08 http://handlebarsjs.com/
9) 8:44 https://vuejs.org/
10) 9:30 https://loftschool.com/

Видеоурок по Yarn: https://youtu.be/8YamFtDEPZU

Оставь комментарий!

Добавить комментарий