Мобільні пристрої встановили стандарт з точки зору чуйності та зручності для користувачів HMI у різних галузях. Виробники автомобілів, медичного обладнання, систем промислової автоматизації та побутової електроніки тепер хочуть відтворити цей чудовий досвід для своїх вбудованих пристроїв. Щоб з’ясувати, яку технологічну стратегію ми повинні вибирати, ми створили тест, на якому для одного розробника було виділено 160 годин, щоб створити демонстраційний додаток вбудованої системи з використанням Qt & QML та однакову кількість годин, щоб створити дуже еквівалентну програму з використанням HTML5. (більше…)
У цій статті ви знайдете кілька зручних команд для роботи з npm – менеджером пакетів, що входять до складу Node.js. З усього безлічі існуючих ми вибрали ті, які можуть бути найбільш корисні при щоденному використанні.
Спочатку згадаємо найвідоміші скорочення для установки:
npm install pkg, скорочення: npm i pkg;npm i –global pkg, Скорочення: npm i -g pkg;npm i –save pkg, Скорочення: npm i -S pkg;npm i –save-dev pkg, Скорочення: npm i -D pkg.Інші скорочення можна подивитися на офіційному сайті npm.
Перша дія при створенні нового пакета – npm init:
Якщо питання здаються вам зайвими і ви хочете їх проскочити, використовуйте npm init -y або npm init -f:
Часто використовувану команду npm test можна замінити на npm t, вона робить те ж саме:
При роботі над новим проектом ви, швидше за все, цікавитеся, що взагалі можна запустити в його рамках. Можна відкрити файл package.json і перевірити секцію scripts:
Але список доступних скриптів можна отримати і через npm run:
Ще варіант – встановити інтерактивне меню ntl (npm i -g ntl) і запустити в папці проекту:
Для перевірки залежностей теж можна було б зайти в package.json, але є варіант трохи краще – npm ls –depth 0:
Для перевірки пакетів, встановлених глобально, підходить та ж команда з відповідним прапором – npm ls -g –depth 0:
Ми встановили пакет, в ньому є виконуваний модуль, але він працює тільки при запуску через npm-скрипти. Чому це так, і як цього уникнути?
Коли ми виконуємо команди на нашому терміналі, що насправді відбувається, це те, що він шукає виконуваний файл з однаковим ім’ям на всіх шляхах, перерахованих у нашій змінній середовища PATH. Ось як вони магічно доступні з будь-якого місця. Локально встановлені пакунки реєструють їх виконувані файли локально, тому вони не перелічені в нашому PATH і не будуть знайдені.
При запуску виконуваних модулів через npm-скрипти менеджер пакетів додає додаткову папку до PATH, <директорія проекту>/node_modules/.bin. Її можна знайти, запустивши npm run env | grep "$PATH". За допомогою npm run env можна побачити всі доступні змінні оточення.
У node_modules/.bin локально встановлені пакети розміщують свої виконавчі модулі. Запускаємо ./node_modules/.bin/mochaв директорії проекту:
Просто пишіть ./node_modules/.bin/<команда>, коли хочете запустити локально встановлений виконуваний модуль.
У файлі package.json ви могли помітити запис repository. Для того, щоб відкрити відповідний репозиторій в браузері, запустіть команду npm repo. Команда npm home виконує ту ж функцію для запису homepage. Якщо ви хочете відкрити пакет на офіційному сайті , використовуйте команду npm docs.
Ви швидше за все знайомі зі скриптом pretest, він дозволяє визначити код, який слід запустити перед скриптом test. Виявляється, pre і post скрипти можна створювати для будь-яких інших скриптів, в тому числі кастомних:
Припустимо, ви використовуєте semver для управління версіями і хочете оновити версію перед черговим релізом. Можна відкрити package.json і зробити це вручну, але навіщо?
Ще простіше – запустити команду npm version з major, minor або patch:
Ще кілька порад можна знайти в спеціальному сховищі на GitHub , де крім цього зібрані різні корисні інструменти і посилання на ресурси, пов’язані з npm.
Переклад статті «8 npm Tricks You Can Use to Impress Your Colleagues»
Реальність така, що більш гнучкі цифрові банки, такі як N26, Moven і Simple, фундаментальним чином змінюють стосунки між людьми і фінустановами. Цифрові банки ( «виключно мобільні» або банки без відділень) переформатують прості трансакційні зв’язки і, якщо великі фінансові інститути мають намір наслідувати їхній приклад, то користувальницький досвід (UX – User Experience) – це одне з правильних напрямків для докладання зусиль.
Після більш ніж 13 мільйонів завантажень WordPress 4.8, ми раді повідомити про надходження випуску технічного обслуговування WordPress 4.8.1. (більше…)
Оскільки випуск React 16 ближче, ми хотіли б оголосити кілька змін у тому, як React обробляє помилки JavaScript усередині компонентів. Ці зміни включені в бета-версії React 16 і стануть частиною React 16.
До речі, ми просто випустили першу бета-версію React 16 для вас, щоб спробувати!
PHPStorm на мій погляд одна з найкращих середовищ розробки для web розробників. Вона вміє практично все, в тому числі і компілювати less в css. Правда для Цього я встановив додатковий плагін LESS CSS compiller.
Налаштувати компіляцію дуже просто.
Перше що потрібно зробити, це відкрити Preferences і створити LESS профіль:
Далі просто необхідно заповнити поля:
-вказати шлях директорії з файлами;
-укаказать ім’я файлу, який потрібно Компільо;
-вказати ім’я файлу, який повинен вийде на виході;
-вказати шлях куди зберігати отриманий файл;
-так само можна відразу стискати отриманий css файл включивши функцію Compress CSS Output (за замовчуванням вона відключена)
Після зберігаємо налаштування, і як тільки ми будемо зберігати * .less файли в директорії зазначеної до першої настоянці, буде автоматично генеруватися CSS файл.
Дуже часто клієнти вимагають, щоб текст в поле введення зникав при появі на ньому фокуса, і з’являвся назад при втраті фокуса і за умови що в поле нічого не було введено.
У HTML5 це можна зробити використовуючи атрибут data- і jQuery.
Розмітка в цьому випадку буде виглядати наступним чином:
<input type="text" value="Placeholder text" data-value="Placeholder text"/>
jQuery код буде наступним:
$('body').on('focus', 'input[type=text]',function() {
if ($(this).val() == $(this).data('value')) {
$(this).val('');
}
}).on('blur', 'input[type=text]',function() {
if ($(this).val() == '') {
$(this).val($(this).data('value'));
}
});
Не так давно я обзавівся макбуком з retina display і відразу зрозумів те, що більшість сайтів взагалі ніяк не дружать з retina display. На це можна закрити очі в нашій країні, де кількість пристроїв з retina display дуже мало. Але якщо орієнтувати свої проекти на захід то потрібно враховувати специфіку таких пристроїв.
І так адаптація сайту складається з двох частин:
Ідеально підходить для логотипів, іконок, а також будь-векторної графіки.
Це метод дає найякісніший результат. Але при створенні шрифту потрібно використовувати векторну графіку SVG формат. Щоб підготувати SVG файл можна скористатися Adobe Illustrator, або іншим аналогом (Inkscape, CorelDRAW).
Створити сам шрифт з іконками можна за допомогою програми від google, а саме icoMoon App
За допомогою селектора min-device-pixel-ratio визначаються пристрої з щільністю пікселів 2 і вище, для них підключається картинка в 2 рази більше, а властивість background-size: cover повідомляє браузеру, що наявну цю картинку необхідно отмасштабовані до розмірів блоку зберігши пропорції.
.selector { background: url(../path_to_png/apple.png) no-repeat; }
@media (-webkit-min-device-pixel-ratio: 2) {
.selector { background-image: url(../path_to_png/apple@2x.png); background-size: cover; }
}
Зміна URL адреси картинки
jQuery( document ).ready(function(){
if( 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){
var img_to_replace = jQuery( 'img.retina-2x' ).get();
for (var i=0,l=img_to_replace.length; i<l; i++) {
var src = img_to_replace[i].src;
src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1');
img_to_replace[i].src = src;
};
}
});
В HTML коді прописуємо тегу <img> необхідний клас, ширину або висоту, щоб збільшена картинка не зіпсувала дизайн.
<img class="retina-2x" src="../path_to_png/apple.png" alt="" width="200" height="200"/>
Цей метод використовує властивість window.devicePixelRatio для визначення екрану зі збільшеною щільністю, знаходить все картинки, які необхідно адаптувати і замінює їх url на аналогічний, але з доповненням в @2x.
Робота в невеликій компанії часто виглядає як абсолютно неконтрольований процес. Вчора ти займався узгодженням документів з будівництва складу, сьогодні розробкою маркетингового плану, узгодженням макетів реклами, завтра у тебе спитають “а чи є у Вас сайт?”. І пішло поїхало! Зупинити цей ком постійної зайнятості можна тільки правильно виділивши головне і розділивши обов’язки. Керівнику невеликого підприємства дуже важливо розуміти, що він не може зробити все самостійно, а якщо і може, то це триватиме не довго і закінчиться так і без досягнення значного успіху.
Один з непоганих прийомів для поділу роботи, який дозволяє встигнути все вчасно, прекрасно працює. Спробуйте скласти список всіх справ, повністю всіх, які потрібно зробити і розділіть його на 4 групи:
Важливе і термінове – це ті справи, які доведеться виконати самостійно. Включіть в цей список, то від чого залежить робота підприємства і що потрібно зробити прямо зараз.
Термінове і неважливе доручіть відповідальним співробітникам. Вони прекрасно впораються з неосновної роботою і в той же час дозволять керівнику зосередитися на суттєвих питаннях. Важливе, але не термінове можна перенести наприклад наступний тиждень. На приводу не термінового і не важливого можливо варто поки забути.
Людина не може вміти робити все краще за всіх. У кожного свої здібності і можливості. Ну припустимо вам потрібно зробити веб-сайт. Звичайно у вас є варіант піти купити книгу або пошукати підручник по HTML в інтернеті, але час не чекає і сайт вам потрібен значно швидше. У такому випадку варто вдатися до аутсорсингу і це найімовірніше обійдеться вам дешевше, ніж витрати при тривалому навчанні, втрати часу і недостатню якість результату. Аутсорсинг- відмінний спосіб зосередитися саме на тому, що ви робите найкраще. Варто також оцінювати можливі ризики при виділенні робіт на аутсорсинг. Ризики пов’язані з тим, що зменшується можливість контролю, можливі проблеми з безпекою. Але правильна оцінка ризиків і своєчасне їх усунення дозволять вам реалізовувати ваші проекти швидше і якісніше.
Ринок послуг аутсорсингу стає дедалі більше і причина зростання в тому, що збільшується потреба. Сьогодні дуже важко конкурувати з великими компаніями, у яких є великі людські та фінансові ресурси. Але деякі невеликі компаніям це успішно роблять. Такі компанії показують приклад, як можна з мінімальними вкладеннями, в найкоротші терміни випередити великі компанії в окремих напрямках бізнесу.
Отже, що ж таке LESS і як за допомогою LESS можна прискорити процес написання CSS стилів для вашого проекту?
Як говорить нам Вікіпедія LESS – це динамічний мову стилів, який розробив Alexis Sellier. Він створений під впливом мови стилів Sass, і, в свою чергу, вплинув на його новий синтаксис «SCSS», в якому також використаний синтаксис, який є розширенням CSS.
LESS розширює CSS динамічними можливостями такими як змінні, mixins, операції і функції. LESS можна використовувати безпосередньо, як на стороні сервера так і на стороні клієнта, а можна з нього генерувати CSS за допомогою певних програм наприклад WinLess і на сайті використовувати вже звичайний CSS не навантажуючи при цьому ні сервер ні браузер клієнта.
За допомогою змінних досить легко домогтися глобальних змін на сайті. Наприклад створення колірних схем. Все досить просто. В одному місці визначаємо глобальну змінну, присвоюємо їй значення і потім використовуємо по всьому LESS.
Наприклад
@color: #4D926F;
header {
color: @color;
}
h2 {
color: @color;
}
p {
color: @color;
}
І так далі.
Mixins якщо пояснити простими словами то це ті ж змінні тільки для класів. Тобто ви для певного класу задаєте певні css властивості і використовуєте цей клас в подальшому як змінну.
Наприклад обрізка кутів за допомогою css3:
В CSS це виглядає наступним чином:
header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
У LESS можна створити наступний mixin:
.corners (@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
І використовувати його в LESS в будь-якому місці додаючи в якості параметра потрібний нам радіус заокруглення. Наприклад в нашому випадку це буде виглядати так:
header{
.corners(5px);
}
Якщо параметр не ввести а написати просто:
header{
.corners();
}
то радіус буде 3px (за умовчанням установлюється)
Дуже корисне і зручне властивість LESS це вкладеність правил.
Приклад з LESS:
header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
Отриманий CSS:
header h1 {
font-size: 26px;
font-weight: bold;
}
header p {
font-size: 12px;
}
header p a {
text-decoration: none;
}
header p a:hover {
border-width: 1px;
}
Дуже зручно особливо при створенні багаторівневих меню, ніколи не загубишся і не помилишся з успадкуванням.
Ідея функцій і операцій дуже проста:
@unit: 3px;
.button{
border:@unit solid #ddd;
padding: @unit * 3;
margin: @unit * 2;
}
У вище наведеному коді ми задаємо змінної @unit значення рівне 3px. Потім для .button ми встановлюємо це значення в ширину рамки, відступи в три рази більше цієї ширини, а поля в два рази.
Можна використовувати операції множення, ділення, додавання і віднімання.
Ці ж операції можна проводити і з квітами. до одного кольору додати інший і т.п.
Приклад:
button {
background: #941f1f + #222222;
border: #941f1f - #111111;
}
Все це і є основними можливостями LESS, які в рази збільшують швидкість написання CSS коду. LESS дуже актуальний для великих проектів які роблять кілька frontend розробників.
Особисто мені він дуже подобається. Але вирішувати все одно Вам, використовувати його чи ні 😉