Next.js был запущен командой React.js в качестве инструмента для рендеринга на стороне сервера. Разработчики, работающие с комбинацией Next и React.js, могут значительно упростить процесс разработки интерфейса.

Next.js поставляется с набором замечательных функций, таких как маршрутизация на стороне клиента и автоматическое разделение кода. Прежде всего, Next.js поставляется с полной поддержкой CSS, известной как styled-jsx, чтобы упростить разработку дизайна пользовательского интерфейса. Некоторые преимущества Next.js:

— самостоятельная структура;
— собственный файловый маршрутизатор;
— очень легко быстро начать работать;
— очень удобная работа с antd и JavaScript;
— не создает большие статические страницы связки, они легче и быстрее загружаются, очень хорошо поддерживается командой разработчиков.

Демо | GitHub

#js #framework

HTML5. Карманный справочник
Д. Роббинс, 2015

Хотите быстро найти описание элемента или атрибута HTML5, используемого на веб-странице или в веб-приложении? Перед вами классический справочник, который веб-дизайнеры и веб-разработчики стараются всегда держать под рукой на протяжении вот уже более 15 лет.

Скачать книгу | Больше книг

#book #html

Веб-фреймворки: введение для новичков

Веб-фреймворки сильно изменили мир программирования и стали неотъемлемой частью процесса разработки. Вы можете попробовать поискать информацию о них на сайтах, в статьях и книгах, но найдёте только общую и неоднозначную информацию — ничего, кроме бесконечных определений и сложных терминов, от которых закипает мозг.

Пора наконец разобраться, что из себя представляют веб-фреймворки.

Читать статью

#article #framework

Адаптивная верстка: что это и как использовать

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

В статье описаны советы и нюансы адаптивной верстки.

Читать статью

#article #frontend

Ember.js был использован при проектировании ряда сложных веб-сайтов, таких как Kickstarter, Heroku и LinkedIn. Ember.js идеально подходит для разработки сложных веб-приложений, а строковая система шаблонов, с которой она поставляется, способствует значительному уменьшению времени загрузки. Frontend JavaScript Framework также сконцентрирован на масштабируемости, чтобы разработчики могли легко работать как с мобильными, так и с веб-приложениями.

Демо | GitHub

#js #framework

Что такое AJAX и для чего он нужен?

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

Читать статью

#article #js #ajax

WakaTime — это трекер времени для программистов. Его можно установить в IDE или редактор кода и он будет отслеживать время работы над проектами. Трекер записывает сколько времени вы работали с тем или иным языком программирования, проектом, редактором кода. Просмотреть статистику можно в удобном дашборд. Поддерживает все современные IDE и редакторы кода.

Сайт | GitHub

#tools #productivity

Интересное видео о фулстеках

Кто такой фулстек программист, какие стеки бывают, каким фул-стеком "лучше" быть. О перспективах фулстек разработки. Веб фулстек, мобильный фулстек, кроссплатформенная разработка.

Смотреть видео

#video

Секреты и уловки JavaScript

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

Читать статью

#article #js #tips

JavaScript-фреймворк Express взлетает на волне популярности Node.js. Сейчас это один из самых трендовых инструментов веб-разработки. Его используют крупные компании Accenture, IBM и Uber, а также другие фреймворки, например, Kraken, Sails и Loopback.

Express позиционируется как минималистичный, быстрый и очень гибкий фреймворк. Он предоставляет все необходимые возможности, при этом активно используя все преимущества и мощность Node.js. Поддерживает REST API.

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

Демо | GitHub

#js #node #rest

Что такое WebAssembly

WebAssembly (WASM) — новый бинарный формат, позволяющий запускать код в браузере. Вы наверняка слышали, что WebAssembly очень быстрый. Но что это значит, и что это за технология в целом? Ответы на эти и другие вопросы в статье.

Читать статью

#article #js #wasm

Turntable.js — библиотека, которая позволяет из нескольких картинок сделать одну модель, которую можно вращать. Плюсы этой библиотеки в том, что она легковесная, отзывчивая, легка в установке и настройке.

С Turntable.js вы можете легко создать классные вращающие демки 3D объектов путём размещения большого массива изображений в on-hover слайдер. Это позволяет пользователям быстро пройти через весь набор изображений, создавая эффект Flipbook и демонстрацию продукта со всех сторон.

Демо | GitHub

#js #JQuery #3d

Что такое JAMstack и как с ним работать

Все больше и больше оборотов набирает довольно новый и нетрадиционный подход в создании сайтов — JAMstack.

Для начала давайте разберемся, что такое JAMStack, с чем его едят и почему он «превосходит» традиционные web-сайты. Подробнее в статье.

Читать статью

#article #js #jamstack

GraphicsJS — это мощная графическая JavaScript-библиотека с открытым исходным кодом, основанная на технологии SVG (VML для старых версий IE).

Давайте рассмотрим, чем эта библиотека хороша и выделяется среди прочих.

Во-первых, GraphicsJS весит совсем немного и обладает очень гибким JavaScript API. Она предоставляет богатые возможности для форматирования текста, а также виртуальный DOM – независимый от специфики HTML DOM в разных браузерах.

Во-вторых, в отличие от других продуктов AnyChart – JavaScript-библиотек для построения графиков – GraphicsJS бесплатна для использования как в коммерческих, так и в некоммерческих целях.

В-третьих, GraphicsJS обладает кросс-браузерной совместимостью, включая поддержку Internet Explorer 6.0+, Safari 3.0+, Firefox 3.0+, Opera 9.5+. В старых версиях IE библиотека использует VML, во всех остальных браузерах – SVG.

Наконец, GraphicsJS позволяет эффективно комбинировать графику и анимацию.

Демо | GitHub

#js #svg

За прошлый год популярность Koa выросла, хотя кажется, что уровень удовлетворения разработчиков этим фреймворком не изменился, ведь Express по-прежнему лидирует. Однако посмотрев на графики других бэкенд-фреймворков (например, Meteor), можно сказать, что дела Koa неплохие - и могут быть еще лучше.

Этот новый веб-фреймворк, который набрал более 24 тысяч звезд на GitHub, был создан той же командой, что и Express, как менее громоздкая, более выразительная и надежная платформа для веб-приложений и API. Используя средства асинхронного программирования, Koa позволяет отказаться от callback-функций и в разы эффективнее обрабатывать ошибки. В ядре Koa не проводится сборка промежуточного программного обеспечения. Этот фреймворк имеет набор первоклассных методик, которые делают написание серверов быстрым и приятным занятием.

Демо | GitHub

#js #framework #API

Как работает CSS Flexbox

Модуль flexbox позволяет решать следующие задачи:
— располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх;
— переопределять порядок отображения элементов;
— автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство;
— решать проблему с горизонтальным и вертикальным центрированием.

И многое друго. В статье подробно и с примерами описано, как пользоваться flexbox.

Читать статью

#article #css #flex

Vivus.js — это легкий класс JavaScript (без зависимостей), который позволяет вам создавать крутую SVG анимацию, придавая им ей, который вы рисуете. Доступно множество различных SVG анимаций, а также возможность создать собственный скрипт для рисования SVG любым удобным для вас способом. SVG анимация выглядит потрясающе с Vivus.js!

Демо | GitHub

#js #SVG

ItemSlide.js — простой и красивый сенсорный слайдер-карусель.

Инструмент можно настраивать под любые экраны — как удобную "бегущую" строку, так и широкоформатный слайдер.

Демо | GitHub

#js #library #jquery

Вирусы на сайтах

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

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

Читать статью

#article #security

Material Components Web — это библиотека, которая разработана командой инженеров и UX-дизайнеров из Google. Входящие в неё компоненты позволяют организовать рабочий процесс, на выходе которого можно ожидать появления привлекательных и функциональных веб-проектов. Эта библиотека заменила библиотеку react-mdl (которая теперь признана устаревшей) и набрала уже около 7 тысяч звёзд на GitHub.

Демо | GitHub

#react #library #ux