Стоит ли учить Backbone.js сегодня?
В Backbone.js изучать особо нечего. Замена ему давно уже есть — react и vue. С нуля я бы точно не стал строить проект. Сейчас Backbone.js сильно отстает, стоит учить только с прицелом на конкретную вакансию.
В Backbone.js изучать особо нечего. Замена ему давно уже есть — react и vue. С нуля я бы точно не стал строить проект. Сейчас Backbone.js сильно отстает, стоит учить только с прицелом на конкретную вакансию.
Зачем верстальщику нужно изучать JavaScript?
Верстальщику Javascript нужен на минимальном уровне, исключительно для включения и настроек плагинов. Javascript должен заниматься программист front-end. Если требуют его знания, то это не вакансия верстальщика. Есть front-end developer. Это и верстальщик и программист и ещё много кто в одном лице. Оплачиваться это должно совсем по-другому.
Если для себя хотите понять, что и как, сходите на собеседование - получите точный ответ, что от вас хочет конкретная контора
Верстальщику Javascript нужен на минимальном уровне, исключительно для включения и настроек плагинов. Javascript должен заниматься программист front-end. Если требуют его знания, то это не вакансия верстальщика. Есть front-end developer. Это и верстальщик и программист и ещё много кто в одном лице. Оплачиваться это должно совсем по-другому.
Если для себя хотите понять, что и как, сходите на собеседование - получите точный ответ, что от вас хочет конкретная контора
Топ 10 фреймворков JavaScript
1. AngularJS - это фреймворк с открытым исходным кодом для создания фронтенда веб-приложений. Он нацелен на решение нескольких задач, с которыми сталкивается разработчик при построении одностраничных приложений.
2. React - это библиотека JavaScript.
Он используется для построения пользовательских интерфейсов. React поддерживается Facebook, Instagram и другими компаниями.
3. Ext JS - это фреймворк для создания приложений на JavaScript. Он задействуется при построении интерактивных кроссплатформенных веб-приложений. Использует такие технологии как Ajax, DHTML и др.
4. Ember.js - веб-фреймворк JavaScript с открытым исходным кодом. Основан на шаблоне Model-View-ViewModel. Этот фреймворк позволяет разработчикам создавать одностраничные веб-приложения.
5. Backbone.js - это библиотека JavaScript. Она использует RESTful JSON интерфейс. Основана на шаблоне проектирования приложений Model-View-Presenter (MVP). Эта библиотека создана для разработки одностраничных веб-приложений.
6. GWT - Google Web Toolkit помогает разработчикам создавать и поддерживать сложные фронтенд-приложения на Java.
7. Knockout это фреймворк JavaScript, использующий шаблон проектирования Model-View-ViewModel.
В нем присутствует четкое разделение между представлением (View) и данными (Model), которые должны отображаться.
8. Vue.js это прогрессивный JavaScript-фреймворк с открытым исходным кодом. Используется для создания пользовательских интерфейсов.
Фреймворк очень адаптивен благодаря интеграции в другие проекты.
9. Dojo - Набор инструментов Dojo это модульная библиотека JavaScript с открытым кодом. Используется для разработки кроссплатформенных приложений и сайтов на основе JavaScript/Ajax.
10. Polymer - Polymer это библиотека JavaScript с открытым исходным кодом. Она применяется для создания веб-приложений, использующих веб-компоненты. Видоизмененные YouTube и Google Earth, YouTube Gaming и многие Google-сайты используют Polymer.
1. AngularJS - это фреймворк с открытым исходным кодом для создания фронтенда веб-приложений. Он нацелен на решение нескольких задач, с которыми сталкивается разработчик при построении одностраничных приложений.
2. React - это библиотека JavaScript.
Он используется для построения пользовательских интерфейсов. React поддерживается Facebook, Instagram и другими компаниями.
3. Ext JS - это фреймворк для создания приложений на JavaScript. Он задействуется при построении интерактивных кроссплатформенных веб-приложений. Использует такие технологии как Ajax, DHTML и др.
4. Ember.js - веб-фреймворк JavaScript с открытым исходным кодом. Основан на шаблоне Model-View-ViewModel. Этот фреймворк позволяет разработчикам создавать одностраничные веб-приложения.
5. Backbone.js - это библиотека JavaScript. Она использует RESTful JSON интерфейс. Основана на шаблоне проектирования приложений Model-View-Presenter (MVP). Эта библиотека создана для разработки одностраничных веб-приложений.
6. GWT - Google Web Toolkit помогает разработчикам создавать и поддерживать сложные фронтенд-приложения на Java.
7. Knockout это фреймворк JavaScript, использующий шаблон проектирования Model-View-ViewModel.
В нем присутствует четкое разделение между представлением (View) и данными (Model), которые должны отображаться.
8. Vue.js это прогрессивный JavaScript-фреймворк с открытым исходным кодом. Используется для создания пользовательских интерфейсов.
Фреймворк очень адаптивен благодаря интеграции в другие проекты.
9. Dojo - Набор инструментов Dojo это модульная библиотека JavaScript с открытым кодом. Используется для разработки кроссплатформенных приложений и сайтов на основе JavaScript/Ajax.
10. Polymer - Polymer это библиотека JavaScript с открытым исходным кодом. Она применяется для создания веб-приложений, использующих веб-компоненты. Видоизмененные YouTube и Google Earth, YouTube Gaming и многие Google-сайты используют Polymer.
VSCode Extensions
Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Помогает закрывать теги
Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Автоматически переименовывает теги
Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Проще ориентироваться в блоках
CSS Peek
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
Быстрее находит нужные стили
Darkula
https://marketplace.visualstudio.com/items?itemName=alex-pex.theme-darkula
Иногда скучаю по стилистике Webstorm
EditorConfig for VS Code
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Для дружбы с editorconfig
ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Поддержка ESLint
IntelliSense for CSS class names in HTML
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Помогает с автокомплитом для CSS
open in browser
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
Быстро открывает сайт в браузере
Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Помощь с нахождением путей
Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Форматирует автоматически код в красивый
Svelte
https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode
Для любителей Svelte
Vetur
https://marketplace.visualstudio.com/items?itemName=octref.vetur
Просто необходимый extension для всех любителей Vue
vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Красивые иконки для разных типов файлов
JS Parameter Annotations
https://marketplace.visualstudio.com/items?itemName=lannonbr.vscode-js-annotations
Показывает название параметров для функций
Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Помогает закрывать теги
Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Автоматически переименовывает теги
Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Проще ориентироваться в блоках
CSS Peek
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
Быстрее находит нужные стили
Darkula
https://marketplace.visualstudio.com/items?itemName=alex-pex.theme-darkula
Иногда скучаю по стилистике Webstorm
EditorConfig for VS Code
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Для дружбы с editorconfig
ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Поддержка ESLint
IntelliSense for CSS class names in HTML
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Помогает с автокомплитом для CSS
open in browser
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
Быстро открывает сайт в браузере
Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Помощь с нахождением путей
Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Форматирует автоматически код в красивый
Svelte
https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode
Для любителей Svelte
Vetur
https://marketplace.visualstudio.com/items?itemName=octref.vetur
Просто необходимый extension для всех любителей Vue
vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Красивые иконки для разных типов файлов
JS Parameter Annotations
https://marketplace.visualstudio.com/items?itemName=lannonbr.vscode-js-annotations
Показывает название параметров для функций
Javascript: Как практиковаться?
Кодить и еще раз кодить
Нужно просто начать писать код, желательно что-то своё. Писать свое велосипеды, слайдеры, пытаться повторить что то сложное. Кстати лучше пытаться делать что посложнее тк одновременно будете и закреплять на практике, что знаешь и нагугливать новые знания( и тут же их применять).
Попробуйте без фреймворков, даже без джейквери на чистом JS, коряво и в одном файле. Пишите мелкие задачи, калькулятор, вывод по кнопке информацию на экран, табы, если так делать 2-3 недели, практика закрепится на ура.
Кодить и еще раз кодить
Нужно просто начать писать код, желательно что-то своё. Писать свое велосипеды, слайдеры, пытаться повторить что то сложное. Кстати лучше пытаться делать что посложнее тк одновременно будете и закреплять на практике, что знаешь и нагугливать новые знания( и тут же их применять).
Попробуйте без фреймворков, даже без джейквери на чистом JS, коряво и в одном файле. Пишите мелкие задачи, калькулятор, вывод по кнопке информацию на экран, табы, если так делать 2-3 недели, практика закрепится на ура.
Можно ли использовать Node.js на хостинге?
Проект будет работать только на Node.js хостинге, на php или python хостинге работать не будет. Вам нужен vps/vds, а не хостинг. Если требуется быстро запустить небольшой сайт, проще загрузить на php, если проект принципиально на node, можете просто взять CMS на Node.js и вообще отказаться от PHP.
Проект будет работать только на Node.js хостинге, на php или python хостинге работать не будет. Вам нужен vps/vds, а не хостинг. Если требуется быстро запустить небольшой сайт, проще загрузить на php, если проект принципиально на node, можете просто взять CMS на Node.js и вообще отказаться от PHP.
Svelte.js: Еще один повод не учить react, vue
Учите более распространенные вещи — react, vue. По ним больше учебных материалов, легче найти ответы и советы, а Vue не сильно сложнее svelte. если для трудоустройства на официальную работу, то конечно надо изучать то, на что есть спрос в этих компаниях - react, vue. Если делать для своих проектов, для фриланса, то можно побаловаться и с Svelte.
Для чего Вам пригодится Svelte ?
Если Вы работаете один и Вам срочно нужно сделать MVP или небольшую админку. С большой админкой будут проблемы так как при написании нового кода Вы забудете старый или нужно обязательно писать само-документированный код, так как Svelte не «заставляет» Вас это делать.
Если Вы только начинаете учиться писать на JS и делать фронтенд Svelte даст Вам всю свободу «выстрелить в ногу», в соседа по парте или устроить массовую стрельбу по ногам. На самом деле Вам не нужно будет учить JSX или долго разбираться в конвенциях кода, Вы сразу можете сделать Ваш первый фронтенд проект и увидеть, что у Вас уже что-то получилось и что-то даже работает.
Учите более распространенные вещи — react, vue. По ним больше учебных материалов, легче найти ответы и советы, а Vue не сильно сложнее svelte. если для трудоустройства на официальную работу, то конечно надо изучать то, на что есть спрос в этих компаниях - react, vue. Если делать для своих проектов, для фриланса, то можно побаловаться и с Svelte.
Для чего Вам пригодится Svelte ?
Если Вы работаете один и Вам срочно нужно сделать MVP или небольшую админку. С большой админкой будут проблемы так как при написании нового кода Вы забудете старый или нужно обязательно писать само-документированный код, так как Svelte не «заставляет» Вас это делать.
Если Вы только начинаете учиться писать на JS и делать фронтенд Svelte даст Вам всю свободу «выстрелить в ногу», в соседа по парте или устроить массовую стрельбу по ногам. На самом деле Вам не нужно будет учить JSX или долго разбираться в конвенциях кода, Вы сразу можете сделать Ваш первый фронтенд проект и увидеть, что у Вас уже что-то получилось и что-то даже работает.
Нужен ли TypeScript для написания бэкенда на Node.js?
Можно ли обойтись чистым JavaScript?
Да. TypeScript лишь добавляет к JavaScript статическую типизацию в компайл-тайм. После компиляции будет все тот же JS.
Главный плюс TypeScript - скорость разработки за счет подсказок IDE и автодополнения, больше авторефакторингов. Ну и возможность ограничить использование функций/методов от нежелательного использования тоже плюс. А если еще и проектировать доменную модель на типах, то можно сразу видеть, если что-то не сходится, еще до написания логики. В самой логике код неотличим от обычного JS, но с хорошей проверкой типов.
Можно ли обойтись чистым JavaScript?
Да. TypeScript лишь добавляет к JavaScript статическую типизацию в компайл-тайм. После компиляции будет все тот же JS.
Главный плюс TypeScript - скорость разработки за счет подсказок IDE и автодополнения, больше авторефакторингов. Ну и возможность ограничить использование функций/методов от нежелательного использования тоже плюс. А если еще и проектировать доменную модель на типах, то можно сразу видеть, если что-то не сходится, еще до написания логики. В самой логике код неотличим от обычного JS, но с хорошей проверкой типов.
Git базовые команды
git clone адрес репозитория - клонировать репозиторий на локальный компютер
git commit -m 'initial commit' комит изменений в локальный репозиторий
git push -u origin master - только первый раз отправка изменений в удаленный репозиторий
git push - все последующие разы отправка изменений в удаленный репозиторий
Откат изменений
git pull - скачивается актуальная версия удаленного репозитория и все изменения применяются к локальному репозиторию
checkout - перейти в другую ветку
discard - не отправлять в репозиторий те изменения которые нам не нравятся
revert - откатить существующие комиты
hard reset -откатить целую пачку комитов
Работа с ветками
merge - сначала подтягиваем в свою ветку из master все изменения
merge - потом тестируем и делаем слияние переходим (checkout) в master и применяем (merge) все изменения из нашей ветки
git commit -a -m 'commit all edited files' закомитить все измененные файлы безиспользования команды git add
git clone - скачивание репозитория
git status - просмотр текущих изменений
git add - добавить файл в локальный репозиторий
git commit - коммит в локальный репозиторий
git push - коммит в удаленный репозиторий
git clone адрес репозитория - клонировать репозиторий на локальный компютер
git commit -m 'initial commit' комит изменений в локальный репозиторий
git push -u origin master - только первый раз отправка изменений в удаленный репозиторий
git push - все последующие разы отправка изменений в удаленный репозиторий
Откат изменений
git pull - скачивается актуальная версия удаленного репозитория и все изменения применяются к локальному репозиторию
checkout - перейти в другую ветку
discard - не отправлять в репозиторий те изменения которые нам не нравятся
revert - откатить существующие комиты
hard reset -откатить целую пачку комитов
Работа с ветками
merge - сначала подтягиваем в свою ветку из master все изменения
merge - потом тестируем и делаем слияние переходим (checkout) в master и применяем (merge) все изменения из нашей ветки
git commit -a -m 'commit all edited files' закомитить все измененные файлы безиспользования команды git add
git clone - скачивание репозитория
git status - просмотр текущих изменений
git add - добавить файл в локальный репозиторий
git commit - коммит в локальный репозиторий
git push - коммит в удаленный репозиторий
Что нужно знать, чтобы работать с react native?
Знание React это большой плюс, но проблема в том что есть серьезные различия Web и Native. Вам как минимум надо знать основные компоненты, например FlatList, где его применяют обязательные свойства и как с ним работать. Не обязательно знать все атрибуты. Естественно никто вам не запретит лезть в доку, но думаю на собеседовании если вы скажете обязательные свойства это будет плюсом. Еще большим плюсом будет понимание кода java и object c (это вам понадобиться рано или поздно, и в зависимости на какой уровень вас берут могут спросить)
Знание React это большой плюс, но проблема в том что есть серьезные различия Web и Native. Вам как минимум надо знать основные компоненты, например FlatList, где его применяют обязательные свойства и как с ним работать. Не обязательно знать все атрибуты. Естественно никто вам не запретит лезть в доку, но думаю на собеседовании если вы скажете обязательные свойства это будет плюсом. Еще большим плюсом будет понимание кода java и object c (это вам понадобиться рано или поздно, и в зависимости на какой уровень вас берут могут спросить)
Как с помощью Webpack минифицировать несколько CSS не объединяя их?
Можно создать отдельные точки и в них импортировать нужные css файлы.
main.css, codehilite.css --> style.min.css
light.css --> light.min.css
dark.css --> dark.min.css
Можно создать отдельные точки и в них импортировать нужные css файлы.
main.css, codehilite.css --> style.min.css
light.css --> light.min.css
dark.css --> dark.min.css
entry: { 'bundle.js': [ path.resolve(__dirname, 'src/index.js') ], 'light.js': [ path.resolve(__dirname, 'src/light.js') ], 'dark.js': [ path.resolve(__dirname, 'src/dark.js') ], }
Верстка roadmap
Если с нуля, можно попробовать еще так:
1) Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
2) Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
3) Как cделается - на js считаете ключевые точки (координаты), через которые нужно провести линии.
4) Динамически рисуете SVG по вашим ключевым точкам.
5) На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
6) Опционально делайте все и добавляете сверху ещё один путь, который по скроллу будет "заполняться"
Если с нуля, можно попробовать еще так:
1) Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
2) Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
3) Как cделается - на js считаете ключевые точки (координаты), через которые нужно провести линии.
4) Динамически рисуете SVG по вашим ключевым точкам.
5) На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
6) Опционально делайте все и добавляете сверху ещё один путь, который по скроллу будет "заполняться"
10 потрясающих CSS3 техник
1. Меню в размытии
Прекрасно исполненная версия меню на чистом CSS.
2. Облака на CSS3
На этом демо-сайте можно сгенерировать крайне реалистичные облака и даже поиграть с ними.
3. Логотипы на чистом CSS
Здесь собраны логотипы известных компаний: изготавливались логотипы хардкорно, только с помощью CSS.
4. Азбука на CSS
Ещё один пример творческого подхода к CSS. Каждый пост этого tumblr-журнала представляет собой анимированную букву алфавита, оживающую с помощью CSS.
5. Панель навигации от Jan Kaděra
Простая, но стильная панель навигации.
6. Google Doodle на CSS
Это CSS-версия простой Google Doodle анимации. Выполнена очень аккуратно, работает быстро, и никакого JavaScript!
7. лайдеры для изображений
Ещё один классный проект, посвящённый слайдерам для изображений.
8.Двойное кольцо
Славное анимированное колечко, выполненное с помощью одного-единственного div-элемента и менее сотни строк CSS-кода.
9. Фильтр размытия
Очередная демонстрация использования последних функций CSS3 — переходов, фильтров, 3D-трансформаций и проч.
10. Полное руководство по Flexbox
Подробная статья о новых “гибких” контейнерах (так называемых “флексбоксах” — flexbox). Флексбоксы — это новый способ вёрстки страниц в CSS.
1. Меню в размытии
Прекрасно исполненная версия меню на чистом CSS.
2. Облака на CSS3
На этом демо-сайте можно сгенерировать крайне реалистичные облака и даже поиграть с ними.
3. Логотипы на чистом CSS
Здесь собраны логотипы известных компаний: изготавливались логотипы хардкорно, только с помощью CSS.
4. Азбука на CSS
Ещё один пример творческого подхода к CSS. Каждый пост этого tumblr-журнала представляет собой анимированную букву алфавита, оживающую с помощью CSS.
5. Панель навигации от Jan Kaděra
Простая, но стильная панель навигации.
6. Google Doodle на CSS
Это CSS-версия простой Google Doodle анимации. Выполнена очень аккуратно, работает быстро, и никакого JavaScript!
7. лайдеры для изображений
Ещё один классный проект, посвящённый слайдерам для изображений.
8.Двойное кольцо
Славное анимированное колечко, выполненное с помощью одного-единственного div-элемента и менее сотни строк CSS-кода.
9. Фильтр размытия
Очередная демонстрация использования последних функций CSS3 — переходов, фильтров, 3D-трансформаций и проч.
10. Полное руководство по Flexbox
Подробная статья о новых “гибких” контейнерах (так называемых “флексбоксах” — flexbox). Флексбоксы — это новый способ вёрстки страниц в CSS.
Какие минусы у Vue-cli?
В контексте небольших и средних проектов у vue-cli одни плюсы - за условные 5 минут вы получаете типовой config, который можно расширить своими плагинами и получить рабочую сборку.
Большой же проект предполагает, что:
1) может потребоваться нестандартная сборка, несколько точек входа со своим конфигом и прочие веселые прелести
2) на проекте работает специалист, который знает как работает сборщик и умеет написать к нему необходимый конфиг сам с нуля
Если проект полностью подходит под стандартный конфиг vue-cli - ничего плохого в его использовании нет.
У angular cli в этом плане получше - там можно выбрать, что делать с кастомным конфигом - примешать к стандартному, или заменить им стандартный. У vue, несколько я знаю, такой возможности нет.
В контексте небольших и средних проектов у vue-cli одни плюсы - за условные 5 минут вы получаете типовой config, который можно расширить своими плагинами и получить рабочую сборку.
Большой же проект предполагает, что:
1) может потребоваться нестандартная сборка, несколько точек входа со своим конфигом и прочие веселые прелести
2) на проекте работает специалист, который знает как работает сборщик и умеет написать к нему необходимый конфиг сам с нуля
Если проект полностью подходит под стандартный конфиг vue-cli - ничего плохого в его использовании нет.
У angular cli в этом плане получше - там можно выбрать, что делать с кастомным конфигом - примешать к стандартному, или заменить им стандартный. У vue, несколько я знаю, такой возможности нет.
Backend-разработчику нужно знать вёрстку?
Для Backend-разработчика верстка важнее, чем для верстальщика backend
Если вы только изучаете верстку, вам будет даже проще зайти в backend, все таки фронтенд это уже другое.
Нужно знать и понимать фронт. И HTML, и современный CSS, и современный JS, включая Vue и прочие реакты. Лишним оно точно не будет.
Кроме того, работая backend-разработчиком, вам придётся общаться с фронтами. И лучше, если вы будете разговаривать на одном языке.
Да и просто лучше разбираться в том, как это всё работает вместе.
Но если вы нацелены именно на backend, достаточно будет знать frontend-технологии на базовом уровне. Глубокие знания не обязательны.
Для Backend-разработчика верстка важнее, чем для верстальщика backend
Если вы только изучаете верстку, вам будет даже проще зайти в backend, все таки фронтенд это уже другое.
Нужно знать и понимать фронт. И HTML, и современный CSS, и современный JS, включая Vue и прочие реакты. Лишним оно точно не будет.
Кроме того, работая backend-разработчиком, вам придётся общаться с фронтами. И лучше, если вы будете разговаривать на одном языке.
Да и просто лучше разбираться в том, как это всё работает вместе.
Но если вы нацелены именно на backend, достаточно будет знать frontend-технологии на базовом уровне. Глубокие знания не обязательны.
Как написать фронтенд плагин для JavaScript с помощью ES6, SASS и Webpack
Плагин – это независимый элемент общего назначения. При подключении его к приложению не требуется лишних усилий и конфигураций. Фронтенд плагин – это календарь, слайдер, буферклавиатуры. Фронтенд плагином может быть все, что увеличивает функциональность доступных элементов в приложении. Этот плагин может представлять собой отдельное крупное приложение – например, фотогалерею с увеличением для превью.
Плагин – это независимый элемент общего назначения. При подключении его к приложению не требуется лишних усилий и конфигураций. Фронтенд плагин – это календарь, слайдер, буферклавиатуры. Фронтенд плагином может быть все, что увеличивает функциональность доступных элементов в приложении. Этот плагин может представлять собой отдельное крупное приложение – например, фотогалерею с увеличением для превью.
Github для верстальщика
Зачем верстальщику github?
Основные причины использования github:
- Хранение верстки(портфолио).
- Использование хостинга github для работы ваших сайтов.
- Использование github gist(публикация небольшого кода)
Если вы новичок, скорее всего думали о создании github аккаунта, это стоит сделать для структурирования ваших работ, не раз ловил себя на моменте, что хранить свои работы в папках на компьютере или на хостинге, не лучшая идея, очень не удобно.
Зачем верстальщику github?
Основные причины использования github:
- Хранение верстки(портфолио).
- Использование хостинга github для работы ваших сайтов.
- Использование github gist(публикация небольшого кода)
Если вы новичок, скорее всего думали о создании github аккаунта, это стоит сделать для структурирования ваших работ, не раз ловил себя на моменте, что хранить свои работы в папках на компьютере или на хостинге, не лучшая идея, очень не удобно.
Полезные плагины VS Code для вёрстки
Emmet
Помогает ускорить вёрстку. С помощью ! и tab можно создать базовую структуру кода за 1 секунду, либо быстро создать вложенные теги.
Material Theme
Приятная тема для редактора с разными акцентными цветами.
Live Server
Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with Live Server» и в браузере отобразится страница, которая автоматически будет перезагружаться.
CSS Peek
Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле.
Bracket pair colorizer
Окрашивает открывающие и закрывающие скобки в определённые цвета, что минимизирует количество ошибок и позволяет быстрее разобраться в коде.
Auto rename tag
Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут переименованы автоматически.
Emmet
Помогает ускорить вёрстку. С помощью ! и tab можно создать базовую структуру кода за 1 секунду, либо быстро создать вложенные теги.
Material Theme
Приятная тема для редактора с разными акцентными цветами.
Live Server
Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with Live Server» и в браузере отобразится страница, которая автоматически будет перезагружаться.
CSS Peek
Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле.
Bracket pair colorizer
Окрашивает открывающие и закрывающие скобки в определённые цвета, что минимизирует количество ошибок и позволяет быстрее разобраться в коде.
Auto rename tag
Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут переименованы автоматически.
Как правильно верстать?
Сделайте 1 страницу полностью, на других страницах доделывайте все остальные, копируя разметку и классы. Обычно придерживаюсь принципу верстки независимыми блоками.
После анализа макетов, делайте одну-две-три (смотря по объему макетов) вспомогательных страниц, на которых верстаете:
1. Базовые элементы. Общая типографика, кнопки, ссылки и т.п.
2. Общие блоки. То что повторяется на нескольких страницах и/или может быть переиспользовано, какие-то виджеты, менюшки, и т.п.
Все это занимает основную часть времени работы. И к окончанию этих этапов вы имеете своего рода набор, или конструктор, из готовых блоков. Остается только написать лейауты для разных страниц и раскидать по ним имеющиеся блоки.
Сделайте 1 страницу полностью, на других страницах доделывайте все остальные, копируя разметку и классы. Обычно придерживаюсь принципу верстки независимыми блоками.
После анализа макетов, делайте одну-две-три (смотря по объему макетов) вспомогательных страниц, на которых верстаете:
1. Базовые элементы. Общая типографика, кнопки, ссылки и т.п.
2. Общие блоки. То что повторяется на нескольких страницах и/или может быть переиспользовано, какие-то виджеты, менюшки, и т.п.
Все это занимает основную часть времени работы. И к окончанию этих этапов вы имеете своего рода набор, или конструктор, из готовых блоков. Остается только написать лейауты для разных страниц и раскидать по ним имеющиеся блоки.
Модальное окно на чистом JS
document.addEventListener('click', e => { const modalId = e.target.dataset.target; if (modalId) { e.preventDefault(); document.querySelector(`#${modalId}`).classList.add('modal--active'); } else if (e.target.classList.contains('modal__close')) { e.target.closest('.modal').classList.remove('modal--active'); }});