Доброго времени суток, друзья!

Представляю вашему вниманию перевод статьи «JavaScript Visualized: Promises & Async/Await» автора Lydia Hallie.

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

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

Среди айтишников мало жизнерадостных людей… Скорее наоборот, многие выглядят несчастными, а если провести анкетирование, то 83% проявляют признаки выгорания, хотя до крайней степени истощения и цинизма ещё не дошли. Но постоянная когнитивная нагрузка и хронический стресс ведут к закономерному результату:

• выгорание,
  
• физическая деградация,
  
• депрессия,
  
• ранний уход из профессии.

Все эти последствия хорошо предсказуемы. Поэтому их можно предотвратить.

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…

В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.

Здравствуй, мой дорогой любитель поработать с Composer'ом, создавая свой очередной крутой проект на одном из модных фреймворков. Или, быть может, ты — фронтэнд-мастер, пишущий сложные штуки на JS и CSS, компилируя их из jsx- и less-файлов, устанавливая библиотеки через Bower, а проект собирая в каком-нибудь Grunt, попутно прогоняя код юнит-тестами и, конечно же, заливая потом всё это на github… Если всё это — часть твоей повседневной жизни, то хвала Всевышнему, поздравляю: ты прошел все эти испытания и даже не сломал себе мозг. Отныне, ты — из числа тех счастливых, потративших не одну неделю, разбираясь в том, как корректно настроить всю эту кучу инструментов, а также, ты — один из тех, кто может доминировать, властвовать и унижать блистать своими знаниями в комментариях Хабра к статьям других, менее проворных и смышлёных коллег по цеху…

Но… быть может, ты — лишь один из тех, кто только мечтает о подобных извращениях манипуляциях мастеров разработки современных веб-приложений?) Тогда я спешу обрадовать тебя: я тут на днях узнал пару полезных вещей и понял, что это — настоящий подарок для начинающих разработчиков. И решил написать эту статью.

Команда разработчиков объявила в своем блоге, что они выпустили Technical Preview следующей версии Microsoft Office. Это будут универсальные приложения, которые можно запускать на компьютере, планшете и даже телефоне под Windows 10.

Пока опробовать Office for Windows 10 в действии смогут только те, кто зарегистрировался в бета-программе и скачал себе Windows 10 Technical Preview. Скоро обещают выпустить и версию для телефонов.

Новый офисный пакет будет предустановлен в телефоны и планшеты. На других платформах он будет доступен для скачивания через Windows Store.

Word для Windows 10

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

Из нововведений — некая фича под названием Office Insights. Судя по всему, это контекстный поиск всяких определений в режиме чтения документа. Работает, само собой, через Bing.

Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly.com Domain: Конструктор веб-сайтов.
• Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
• Withoomph: Мгновенное создание логотипов (англ.).
• Hipster Logo Generator: Генератор хипстерских логотипов.
• Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
• Invoice to me: Бесплатный генератор счета.
• Free Invoice Generator: Альтернативный бесплатный генератор счета.
• Slimvoice: Невероятно простой счет.

Приветствую!

Вдохновившись публикацией «Легким движением руки планшет превращается в… дополнительный монитор», я решил сделать собственную связку ноутбук-планшет, но не с помощью IDisplay, а с помощью Air Display. Программа так же, как и IDisplay, может устанавливаться на PC и Mac, IOS и Android. У автора поста планшет работает как второй монитор за счёт установленной виртуальной машины, не имея панели задач, чем я был очень огорчен, ведь управление удобней вести с планшета с панелью задач.

Да, да, это очередная статья про html5 и тэг < video >. Но главным ее отличием будет то, что здесь будут рассмотрены самые базовые понятия и теории. Так что приготовились внимательно читать и записывать, let html5 rocks!

Обычно, если вам требуется сделать блок с ползунком или даже что покруче — с выбором диапазона, то используем готовый плагин из набора jQuery UI — slider().



На ПК всё отлично работает, мы даже не заморачиваемся, меняем стили и радуемся функционалом.
Затык приходит в том моменте, когда проект — это мобильная версия чего-либо на html и обязательно вместо поля для ввода значений нужно использовать ползунок — ну потому что удобней или же по другим каким-то причинам.

Привет, хабражители!

Представляю вам список YouTube-каналов для обучения веб-разработке. Список доступен на гитхабе, там он будет пополняться и редактироваться. В планах — создание отдельной странички для фильтрации каналов по тегам и рубрикам.

Также хочу попросить вас о небольшой услуге: если вы знаете канал, не вошедший в список — опубликуйте ссылку на него в комментариях или отправьте pull request. Сообщество будет благодарно вам.

Под катом — текущая версия списка.

Доброго времени суток, уважаемые хабравчане. Поздравляю всех с наступившим 2015 годом! За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Лучшее от Codrops за 2014 год

Я думаю многие из вас знакомы с потрясающими демками от Codrops. Авторы сайта буквально всегда реализуют интереснейшие UI/UX задумки с помощью HTML/CSS/SVG/JS и подробно рассказывают о том, как они это сделали. А это их собственная мега подборка с лучшими работам. Также рекомендую для вдохновения коллекцию самых популярных пэнов за 2014 год от CodePen.

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Взломать Tor, PGP и OTR спецслужбам не под силу

Только благодаря утечкам Эдварда Сноудена и похожим событиям у нас появляется уникальная возможность посмотреть на «внутреннюю кухню» американских спецслужб. Сами они никаких конкретных цифр выдавать не могут по определению.

«Шпигель» опубликовал статью о том, как у Агентства национальной безопасности США обстоят дела со взломом криптографических алгоритмов. Это очередная утечка материалов Сноудена.

Самым полезным из этой информации является то, что на момент создания документов (2012 год) некоторые чаты и программы для пересылки электронной почты всё ещё представляли сложность для АНБ.

Содержание

1 Введение в AngularJS
2 Engineering concepts in JavaScript frameworks
3 Modules
4 Understanding $scope
5 Controllers
6 Services and Factories
7 Templating with the Angular core
8 Directives (Core)
9 Directives (Custom)
10 Filters (Core)
11 Filters (Custom)
12 Dynamic routing with $routeProvider
13 Form Validation
14 Server communication with $http and $resource

1 Введение в AngularJS

Angular – MVW-фреймворк для разработки качественных клиентских веб-приложений на JavaScript. Он создан и поддерживается в Google и предлагает взглянуть на будущее веба, на то, какие новые возможности и стандарты он готовит для нас.

MVW означает Model-View-Whatever (модель – вид – что угодно), то есть гибкость в выборе шаблонов проектирования при разработке приложений. Мы можем выбрать модели MVC (Model-View-Controller) или MVVM (Model-View-ViewModel).

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

Здравствуйте,

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



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

Всем привет! Сегодня мы расскажем о том, как самостоятельно зарегистрировать ООО.

Вопрос о создании своей компании обычно возникает, когда у вас есть идея для стартапа и вы готовы приступить к разработке. Если над проектом вы работаете один, то вам вполне достаточно статуса ИП. Если у вас есть партнёры или вы планируете привлекать инвесторов, то лучше с самого начала зарегистрировать ООО. Это самая распространённая форма для ведения бизнеса и, несмотря на некоторые ограничения, она лучше всего подходит для создания стартапа.

Мы расскажем о каждом этапе самостоятельной регистрации ООО, поделимся советами и ссылками, которые помогут вам справиться с ней максимально просто и быстро.



Инструкция по самостоятельной регистрации ООО от «Я люблю ИП»

Доброго времени суток. Решил поделиться опытом в организации рабочего процесса разработки веб-проектов и не только веб. Расскажу свое видение максимально удобного использования связки типа: bugtraker + git + ci + deploy.



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

Еще в марте 2013 года я написал статью руководство по Grunt для начинающих и она стала самой посещаемой статьей на моем сайте. Я написал ее в то время, когда сам только начинал своё знакомство с Grunt, и это было скорее руководство для себя, чем для кого-то ещё. Теперь, спустя 18 месяцев, я почувствовал, что пришло время пересмотреть как я использую Grunt потому что сейчас я знаю гораздо больше, чем в то время.

Если вам не терпится просто увидеть код, то весь он есть на Github.

Во время разработки нашего сервиса bitcalm.com, нам потребовалось организовать автоматическую сборку проекта. Перед нами стояла цель улучшить производительность frontend-части нашего приложения, а также оптимизировать процессы разработки и развертывания на сервере.

Основными задачами, которые требовалось решить, стали:

1. Объединение и минификация скриптов
2. Объединение и минификация стилей
3. Сжатие png-изображений
4. Создание спрайтов из всех изображений (с возможностью удобного использования и с поддержкой двух видов спрайтов для девайсов с разным PPI)
5. Построение разных версий html-документов для разработки и для продакшна

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

Тут уже поднималась тема об использовании такого замечательного атрибута форм как placeholder. И даже приводились примеры на js (ищем по слову placeholder). И не раз было высказано огорчение, потому что в IE данных атрибут не выполняется.

Сам атрибут очень полезен. Особенно радует экономия места при создании форм (особенно в всплывающих формах). Поэтому было решено не отказываться от атрибута, а просто помочь ему заявить о себе и Internet Explorer. На помощь был призван jQuery.