CodeSplatter… образовательный инструмент для визуального обучения и потенциальный журнальный столик.

Серия CodeSplatter раскрывает столь необходимые образовательные инструменты для визуального обучения.

Используя небольшие фрагменты текста, вы можете собрать воедино и изучить каждый CodeSplatter. Обучаю вас таким темам, как React, ES6, основы теории и т. Д.

Благодаря тому, что внимание уделяется более короткому объему, расходный образовательный контент битового размера позволяет быстрее использовать его на практике.

Анатомия веб-приложения

Современные приложения используют преимущества постоянно развивающегося Интернета и браузеров. Сегодня большая часть мира связана между API. От Netflix до умных холодильников. Все начинается с сервера. Мы рекомендуем @thedigitalocean для размещения вашего сервера #ubuntu с Nginx. Затем нужно выбрать базу данных и язык серверной части. Рекомендую заглянуть в #nodejs или #elixir. Интерфейс может показаться еще более устрашающим, но не волнуйтесь. Следите за будущими руководствами по веб-интерфейсу. Я научу вас #react, #javascript и т. Д.

Классы в Javascript ES6

В Javascript до сих пор не было классов. В ES6 представлены классы. В большинстве объектно-ориентированных языков классы похожи на чертежи. Это позволяет вам устанавливать инструкции (функции) всякий раз, когда вы инициируете новый объект из класса. Например, у вас может быть класс «Пользователь» со всеми необходимыми функциями для регистрации, входа в систему и т. Д. (PS. Вы можете создать функцию «конструктор», которая будет принимать значения по умолчанию)

Модули в Javascript ES6

Есть несколько способов использовать модули в Javascript, но я собираюсь поговорить о модулях в ES6. Модули позволяют экспортировать объекты из одного файла и импортировать в другой. Это помогает поддерживать вашу базу кода, разделяя цели по разным файлам. Поскольку классы являются просто объектами, это позволит вам экспортировать класс «User», а затем внутри маршрутизатора, вы можете импортировать и вызывать функцию регистрации (User.signup ()) при переходе в «/ signup». (PS. Обязательно поместите «import * as users from‘ ./users.js ’’ в верхней части файла)

Ассоциативные массивы, хеш-карты, объекты, словари

Ключи и значения - это то, что вам нужно знать, когда дело касается ассоциативных массивов. В зависимости от выбранного вами языка имя может отличаться для вас. Словари для Python, объекты для Javascript и т. Д. Обычный массив отображает значения с помощью числа (например, array = [«это будет 0», «это будет 1», «это будет 2»]), в то время как ассоциативный массив сопоставляет значения с вашим собственным ключом. Например, в Ruby и Javascript это будет выглядеть так (например, array = {font_size: 10, font_family: «Arial»}). Обычные массивы имеют определенные способы сопоставления значений по сравнению с ассоциативными массивами, где вы можете выводить элементы на основе заданного ключа. Также заметка с массивами. Каждому элементу присваивается уникальный пронумерованный идентификатор, начиная с 0.

Использование JSON как простой базы данных

Иногда наличие базы данных может быть излишним. Использование JSON может ускорить разработку.

JS

импортировать файловую систему из "fs";

db=[];

fs.writeFileSync (‘db’, JSON.stringify (db))

db = JSON.parse (fs.readFileSync (‘db’), ’utf8 ')

PHP

$ db = array ();

file_put_contents (‘db’, json_encode ($ db));

$ db = json_decode (file_get_contents (‘db’), true);

Рубин

требуется «json»

db=[]

File.write «db.json», db.to_json

db = JSON.parse open («db.json»). читать

Настройка сервера DO с nginx для обработки приложений PHP и Node

Знание того, как настроить собственный сервер Ubuntu с помощью nginx, может помочь вам сэкономить кучу денег. Nginx действует как http и прокси-сервер. По сути, он направляет домены на разные порты на одном сервере. Это позволяет запускать несколько приложений на одном сервере, используя разные порты. Создайте новую каплю Ubuntu на @thedigitalocean, а затем по ssh на свой сервер. Установите nginx, запустив «sudo apt-get update», затем «sudo apt-get install nginx». Настройте брандмауэр, запустив sudo ufw allow ‘Nginx full’. По умолчанию ваши приложения должны храниться в своих индивидуальных каталогах в «/ var / www / html /». Как только ваше приложение будет запущено с назначенным портом, нужно настроить серверный блок внутри «/ etc / nginx / sites-available / default». У вас может быть столько серверных блоков, сколько на изображении выше. Убедитесь, что все приложения работают на другом порту. Перезапустите Nginx, выполнив sudo systemctl restart nginx и сократив сервер за 5 долларов до последней капли.

Настройка webpack для обработки es6, react и scs

Webpack - довольно мощный инструмент, когда дело доходит до создания ваших нод-проектов на лету. Есть еще несколько вариантов, но об этом позже. Webpack состоит из 4 строительных блоков, когда речь идет о файле «webpack.config.js». Есть только точка входа, выхода, модуля и подключаемых модулей. Точка входа - это главный файл, в который вы будете импортировать различные модули и таблицы стилей. На выходе вы указываете каталог для связанного файла javascript. Модули принимают массив, называемый «правилами». Здесь вы можете использовать определенные загрузчики для sass, es6 (babel), изображений и т. Д. Затем в конце находятся плагины. Здесь вы можете уточнить свой Javascript, распаковать CSS в файлы и многое другое. В конце концов, все ваши файлы будут работать через Webpack. Предоставляя вам суперсилы вместо написания старых CSS и js.

Адаптивные миксины SCSS для организации

Быстрый совет при использовании sass / scss. Используйте приведенный выше блок кода как миксин для контрольных точек адаптивного дизайна. Затем, когда вы хотите изменить свойство, вы можете «@include breakpoint (xs) {display: none; } ». Это может увеличить размер файла скомпилированной версии css, но наличие этой возможности делает ваш рабочий процесс более интуитивным.

Системы сборки узлов

Интерфейсная экосистема постоянно расширяется, но одно можно сказать наверняка. Важность систем сборки для современного разработчика очевидна. Эти препроцессоры могут принимать несколько файлов JavaScript, объединять их, уменьшать, lint и т. Д.… Одновременно обрабатывая ваш sass, less или postcss 💣. Некоторые из популярных систем сборки - это Webpack, Gulp, Grunt & Brunch.

Скоро появятся новые CodeSplatters! Следуйте за нами в Instagram и Twitter