html, css, js: Переводы и личный опыт

Что почитать ?

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

Итак, Ева Кюри, младшая дочь Марии Склодовской-Кюри. Она написала книгу «Путь среди воинов». Читаю оооочень медленно, тк нет перевода на русский (и это в 2017 году!).

По фронтенду записала несколько статей, пусть лежат тут:

1) Сюрреализм на JavaScript RU
2) От Wes Bos Реакт для начинающих EN
3) Воркшоп по реакту и флюксу

5 апреля  

Установка Apache, PHP, и MySQL на Mac OS Sierra

Уточнение: Этот пост для новых установок.

Обновление PHP: На Mac OS Sierra уже стоит php 5.6, но последняя версия php 7.1. После того как вы сделаете то что описано тут, вам следует обновить php.

Так как Mac OS работает поверх UNIX, большинство программ UNIX легко устанавливаются на Mac OS. Кроме того, Apache и PHP идут в комплекте с OS X. Чтобы создать локальный веб-сервер, все, что вам нужно сделать, это настроить Apache и установить MySQL.

Все команды будут исполняться в терминале, поэтому предлагаю сразу открыть терминал и переключить на root права, чтобы можно было запускать команды с полным разрешением.

sudo su -

Включить Apache

apachectl start

Откройте http://localhost, там должна быть надпись «It works!»

Следующим шагом будет включение php для Apache.

Сначала сделайте резервную копию конфигурации Apache по умолчанию. Это хорошее правило и потом вы сможете сравнить эту конфигурацию с другими конфигурациями в будущих версиях Mac OS.

cd /etc/apache2/
cp httpd.conf httpd.conf.sierra

Теперь нужно отредактировать конфигурацию.


Используйте любой редактор к которому вы привыкли

vi httpd.conf
nano httpd.conf
sublime httpd.conf

Раскомментируйте следующую строку (удалить #):

LoadModule php5_module libexec/apache2/libphp5.so

Перезапустите Apache:

apachectl restart

Теперь можно проверить, что php включено. Нужно включить phpinfo() в  DocumentRoot

По умолчанию DocumentRoot в MacOS Sierra находится в /Library/WebServer/Documents. Это можно проверить в конфигурации Apache такой командой:

grep DocumentRoot httpd.conf

Теперь создадим страницу phpinfo() в нашем DocumentRoot

echo '<?php phpinfo();' > /Library/WebServer/Documents/phpinfo.php

Проверяем php по ссылке: http://localhost/phpinfo.php

Установка MySQL на Mac OS Sierra

Скачайте и установите последнюю версию MySQL с официального сайта.

Можно сделать алиасы для mysql и mysqladmin. Однако есть и другие полезные команды, такие как mysqldump. Вместо этого вы можете обновить свой путь, включив /usr/local/mysql/bin. Для этого вам нужно ввести эту команду в терминале.

export PATH=/usr/local/mysql/bin:$PATH

И наконец, можно запустить mysql_secure_installation. Хотя это необязательно, это хорошая практика, чтобы сохранить свою базу данных.

Соединяем PHP и MySQL

Нужно настроить PHP и MySQL друг на друга. Для этого есть несколько вариантов. Я делаю так:

cd /var
mkdir mysql
cd mysql
ln -s /tmp/mysql.sock mysql.sock

Дополнительная настройка (опционально)

Конфигурация Apache 2.4 по умолчанию для OS X выглядит довольно скудной. Например, обычные модули, такие как mod_rewrite, отключены. Вы можете включить это сразу, чтобы не забывать, что они отключены в будущем.

vi /etc/apache2/httpd.conf

В файле нужно раскомментировать строчки (удалить #)

LoadModule deflate_module libexec/apache2/mod_deflate.so
LoadModule expires_module libexec/apache2/mod_expires.so
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
27 марта   apache   macos   mysql   Sierra

Как я учу английский

1) Каждый день 10 новых слов (беру из видео и текстов)
2) 30 минут видео на английском языке с англ.субтитрами, чтобы бы можно было остановиться и записать неизвестное слово
3) Выбрать книгу и читать по странице (опять же, чтобы находить неизвестные слова)

Вы спросите, а как же все эти времена и тд, к черту это все, пополняем словарный запас!

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

18 марта  

REM? Что это такое и почему все бояться это использовать

Рассуждения и исследования про то, какие единицы измерения лучше использовать при задании размера шрифта в верстке, в сети очень много как на русском, так и на английском. Так что здесь я не буду оригинальной и опишу кратко свои поиски лучшей адаптивной верстки (тут только про шрифты), и дам mixin для конвертирования px в rem.

Отзывчивая верстка: em, rem или % ?

Иногда бывает, что макет нарисован на 1000px и выглядит вполне прилично. Но при верстке, как правило, ограничение на ширину контента больше (в зависимости от макета, конечно, но самые распространенные у меня ограничения 1440px, 1600px). И вот начинается огорчение: тексты смотрятся не на своем месте, отступы кажутся слишком маленькими на большом экране и так далее.

Самое очевидное решение — это сделать типографику тоже гибкой к разрешениям. Но как? Самые распространенные относительные единицы в верстке — это, пожалуй, em, % и rem. Есть еще так называемая “Viewport Sized Typography“. Но она не работает при ресайзе экрана и вообще в настоящий момент с некоторыми глюками ее поддерживают только самые новые браузеры (IE10+, Firefox 19 +, Safari 6+, Chrome 20+).

Раньше я не знала о существовании rem. em мне казалось не удобно использовать из-за ее слишком “относительной относительности”: значение em зависит от размера родительского элемента. То есть если системный шрифт по умолчанию 16px, то 1em=16px. Но если у body, к примеру, размер 0.875 em (14 px), то у элемента внутри body с размером 1em размер шрифта будет уже 14px. В проекте чуть более среднем по сложности такая система измерений может вызвать массу трудностей и неявной логики.

Так что раньше в верстке я предпочитала комбинировать % и px. Для body font-size и line-height задавала какую-то фиксированную величину в px, которую можно было менять с помощью media queries. А уже для элементов текста задавала font-size и line-height в %. Этот метод я нахожу весьма рабочим, но не всегда удобным.

Относительная единица измерения rem очень похожа на em, но позиционируется она относительно root элемента документа, то есть относительно html. Соответственно, никакой путаницы не может возникнуть и можно переносить все размеры прямо из макета без особо сильных вычислений. При использовании CSS фрэймворка вообще все это можно делать в две строчки: первая в px для старых браузеров, вторая с функцией, вычисляющей rem. Чуть ниже я подробнее напишу про кроссбраузерность при использовании rem (ie8 и ниже не поддерживают rem единицы).

Применение rem на практике: размеры шрифтов, высота строк, отступы

Как уже сказано мною ранее, rem считается относительно корневого элемента (html). Это очень удобно и просто контролировать весь процесс верстки в целом.

Нужно сначала определить font-size для html:

html {
       font-size: 100%;
       @include screen_max_1024() { font-size: 90%; }
       @include screen_min_1280() { font-size: 115%; }
       @include screen_min_1440() { font-size: 125%; }
 }

В данном случае @include screen_…() — это миксы для задания media queries. Пример миксина:

@mixin screen_max_1024 { 
       @media screen and (max-width: 1024px) { @content; }
}

После того, как мы задали базовый размер для html, приступаем к работе непосредственно с rem. Во-первых, определимся как переводить px, которые мы видим в макете, в rem. Можно считать где-нибудь в сети (видела калькуляторы px to rem), если вы не используете никаких CSS фрэймворков. Можно написать такой калькулятор самим любыми подручными средствами. В Compass Fr. далеко ходить не нужно, можно просто написать небольшую функцию конвертации px в rem:

@function px-to-rem($px){
      @return ($px/16) + rem;
}

Это посчитано по формуле планируемая величина/контекст = результат. Где планируемая величина — это переменная $px, контекст — в нашем случае font-size html = 16 (px).

Вот тут можно подробнее почитать про вычислении rem и адаптивности.

Теперь можно применять написанную функцию. Для примера задать шрифт для p:

p { 
     font-size: 13px; 
     font-size: px-to-rem(13); 
     line-height: 18px; 
     line-height: px-to-rem(18); 
}

Все эти css правила я сократила до mixin:

@mixin font-size($font_px) {
     font-size: $font_px + px;
     font-size: px-to-rem($font_px);
 
     $line_h: $font_px * 1,2;
 
     line-height: $line_h + px;
     line-height: px-to-rem($line_h);
}

Теперь все можно записать буквально в одну строчку:

p { @include font-size(13); }

Что получается в файле css на выходе:

p {
     font-size: 13px;
     font-size: 0,8125 rem;
     line-height: 15.6px;
     line-height: 0,975 rem;
}

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

Кросбраузерность

Если задаешь что-то в rem, нужно не забывать перед этим делать fallback в px (показано в примере выше).

Ссылки:
Web Typography: Using The Golden Ratio and REM’s
Краткий курс — «Адаптивный сайт за неделю»: типографика и сетка (часть II)

18 марта   adaptive   css   rem

Заметки про angular

Отличие контроллеров от сервисов

Контроллеры описывают поведение вида, т. е. отвечают на вопросы, что произойдет, если нажать на кнопку Х и где проводить работу с данными Х. Для каждого вида приложения создается отдельный экземпляр контроллера. В контроллерах ни в коем случае нельзя проводить манипуляции с DOM. Работа с DOM производится только в директивах.

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

2017   angular
Ctrl + ↓ Ранее