Как стать автором
Обновить
0
0
Ломакин Антон @t0H

Front-end, Back-end разработчик

Отправить сообщение

Скрипт настройки Windows 10. Часть II

Время на прочтение4 мин
Количество просмотров109K

Чуть больше года назад выкладывал свой скрипт по автоматизации настройки Windows 10. Давеча переписал Windows 10 Sophia Script в виде модуля на 10 000+ строк. Под катом — всегда самое интересное!

Читать далее
Всего голосов 60: ↑59 и ↓1+58
Комментарии143

Прокачиваем свои CSS-анимации

Время на прочтение10 мин
Количество просмотров79K


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


Разумеется, нет. Главные сложности начинаются тогда, когда речь заходит о чем-то более хитром, нежели изменение цвета или прозрачности у элемента, тогда, когда мы сталкиваемся с дизайнером с широкими взглядами, который придумыват всякие разные штуки, не особенно заботясь о том, как их потом верстать. И вот тут многие фронтендеры начинают спотыкаться. Мои наблюдения показывают, что разработчикам, причем не только начинающим, не хватает широты взглядов, не хватает каких-то дерзких идей, ломающих привычный порядок элементов на странице, чтобы реализовать что-то более-менее сложное. И мне кажется, что нужно с этим что-то сделать. В связи с этим мы сегодня посмотрим на некоторые примеры CSS-анимаций с CodePen, которые могут стать триггерами, заставляющими задуматься о широте возможностей простых казалось бы инструментов, и дадим сами себе несколько советов по поводу того, что стоит попробовать сделать при изучении этого класса анимаций. Надеюсь кому-то это поможет взглянуть на CSS-анимации под новым углом и немного прокачать свои навыки их использования.

Всего голосов 18: ↑18 и ↓0+18
Комментарии3

Крутой шаринг страниц в соцсети с помощью Open Graph

Время на прочтение2 мин
Количество просмотров92K
Решил собрать в одной статье короткий рецепт приготовления страницы, которая круто шарится во все основные соцсети. Тем, кто вообще не в теме, придётся сначала прочитать про Open Graph protocol.
Читать дальше →
Всего голосов 18: ↑13 и ↓5+8
Комментарии5

Понимание CSS Grid (1 часть): Grid-контейнер

Время на прочтение10 мин
Количество просмотров45K

Приветствую! Представляю вашему вниманию перевод статьи «Understanding CSS Grid: Creating A Grid Container» автора Rachel Andrew


Понимание CSS Grid: Создание Grid-контейнера


Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.


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


В этой статье мы рассмотрим:


  • Создание grid-контейнера с помощью display: grid или display: inline-grid
  • Создание колонок и строк с помощью grid-template-columns и grid-template-rows
  • Управление размерами неявных треков (полос / дорожек) с помощью grid-auto-columns и grid-auto-rows
Всего голосов 7: ↑7 и ↓0+7
Комментарии3

Знакомимся с Web Animations API

Время на прочтение5 мин
Количество просмотров20K
Доброго времени суток, друзья!

Веб API постоянно эволюционируют. Некоторые из них, такие как Console или Canvas, хорошо поддерживаются всеми браузерами, другие по-прежнему находятся на стадии разработки.

Одним из API, находящимся на стадии разработки, является Web Animations API или WAAPI. Несмотря на то, что первый вариант спецификации был опубликован в 2012 году, а сам API впервые реализован в браузерах Firefox и Chrome в 2014 году, я узнала о нем совсем недавно (я тоже раньше о нем не слышал — прим.пер.).

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

Давайте рассмотрим этот API на простом примере.
Читать дальше →
Всего голосов 21: ↑21 и ↓0+21
Комментарии2

Умный дом с Xiaomi на примере бани

Время на прочтение12 мин
Количество просмотров76K
В интернете довольно много обзоров и видеороликов о построении умных домов. Бытует мнение, что все это достаточно дорого и хлопотно в организации, то есть, в целом, удел гиков. Но прогресс не стоит на месте. Устройства становятся более дешевыми, при этом более функциональными, а проектирование и монтаж – довольно простыми. Однако, в основном, обзоры фокусируются на 1-2 примерах использования, практически не покрывая нюансы и не создавая целостной картины. Поэтому в данной статье я хочу сделать обзор законченного проекта, продемонстрировать сценарии использования и встретившиеся подводные камни в построении умного дома с помощью устройств Xiaomi на примере бани. Описанные идеи с небольшими вариациями можно применить и при автоматизации квартиры.

image

Читать дальше →
Всего голосов 39: ↑37 и ↓2+35
Комментарии99

Просто о D3.js

Время на прочтение6 мин
Количество просмотров82K


70 тысяч звездочек на гитхабе и сотни интересных проектов. Кажется, что D3 это что-то большое и очень сложное, но это не так. Я расскажу об основах D3 и поделюсь опытом разработки инфографики Бюростат.

Читать дальше →
Всего голосов 34: ↑34 и ↓0+34
Комментарии21

Объясняем современный JavaScript динозавру

Время на прочтение15 мин
Количество просмотров264K


Если вы не изучали JavaScript с самого начала, то осваивать его современную версию сложно. Экосистема быстро растёт и меняется, так что трудно разобраться с проблемами, для решения которых придуманы разные инструменты. Я начал программировать в 1998-м, но начал понимать JavaScript только в 2014-м. Помню, как просматривал Browserify и смотрел на его слоган:


Browserify позволяет делать require («модули») в браузере, объединяя все ваши зависимости


Я не понял ни слова из предложения и стал разбираться, как это может помочь мне как разработчику.


Цель статьи — рассказать о контексте, в котором инструменты в JavaScript развивались вплоть до 2017-го. Начнём с самого начала и будем делать сайт, как это делали бы динозавры — безо всяких инструментов, на чистом HTML и JavaScript. Постепенно станем вводить разные инструменты, поочерёдно рассматривая решаемые ими проблемы. Благодаря историческому контексту вы сможете адаптироваться к постоянно меняющемуся ландшафту JavaScript и понять его.

Всего голосов 174: ↑171 и ↓3+168
Комментарии505

Тащим музыку из ВК без публичного music API

Время на прочтение6 мин
Количество просмотров90K

Как все начиналось


Дело было вечером, делать было нечего… Точнее, я просто хотел загрузить аудиокнигу перед парами и тут меня ждал сюрприз. Кэш в кейт мобайле отключили. Как так? Что делать? Конечно же писать свое приложение с кэшем и аудиозаписями. Но для начала нужно понять, как вк превращает ссылки вида audio%user_id%_%track_id% в прямые ссылки на mp3. Что из этого вышло приложения я не написал и как скачать определенный плейлист можно прочитать под катом.
Читать дальше →
Всего голосов 35: ↑34 и ↓1+33
Комментарии46

Создание модулей JS

Время на прочтение4 мин
Количество просмотров22K
Здравствуйте!

В этой статье я хочу рассказать вам о моём подходе к написанию модулей на JavaScript. Профессионалы вряд ли найдут для себя что-то новое, а вот новичкам, я думаю, будет полезно ознакомиться с предложенным подходом и аргументами в его пользу.
Читать дальше →
Всего голосов 27: ↑15 и ↓12+3
Комментарии7

Круглый график на Canvas

Время на прочтение5 мин
Количество просмотров26K

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


Совсем недавно для одного проекта мне понадобилось отображать проценты в круглых графиках(?). И как обычно я принялся искать готовое решение в интернете, однако ничего путного найти не удалось (возможно из-за того что я точно не знаю как этот элемент правильно называется). Более-менее то что мне нужно я нашел в библиотеке Knob, но его функционал оказался излишен, т.к изменять значения в графике нет необходимости, помимо этого в библиотеке затесался баг. В итоге пришлось сочинять очередной велосипед.

image
Читать дальше →
Всего голосов 36: ↑33 и ↓3+30
Комментарии22

Web Components — будущее Web

Время на прочтение12 мин
Количество просмотров114K
Спустя какое время стало ясно, что основная идея Prototype вошла в противоречие с миром. Создатели браузеров ответили на возрождение Javascript добавлением новых API, многие из которых конфликтовали с реализацией Prototype.

— Sam Stephenson, создатель Prototype.js, You Are Not Your Code

Создатели браузеров поступают гармонично. Решение о новых API принимают с учётом текущих трендов в opensource сообществах. Так prototype.js способствовал появлению Array.prototype.forEach(), map() и т.д., jquery вдохновил разработчиков на HTMLElement.prototype.querySelector() и querySelectorAll().

Код на стороне клиента становится сложнее и объёмнее. Появляются многочисленные фреймворки, которые помогают держать этот хаос под контролем. Backbone, ember, angular и другие создали, чтобы помочь писать чистый, модульный код. Фреймворки уровня приложения — это тренд. Его дух присутствует в JS среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.
Читать дальше →
Всего голосов 95: ↑89 и ↓6+83
Комментарии90

Карточная игра на JavaScript и Canvas, или персональный Лас-Вегас. Часть 1

Время на прочтение11 мин
Количество просмотров30K
Однажды на досуге я придумал карточную игру и, недолго думая, создал ее электронную версию. А потом добавил еще четыре игры, включая покер Техасский Холдем. А чтобы было еще интереснее, я встроил некое подобие прогресса: выигрываешь в одной игре – открывается новая. Запланировал я разместить свою игру в двух социальных сетях и в магазине Windows Store как html5-js приложение. А также, возможно, создать еще сборки под Android и iOs. Можно играть чрез сервер с другими людьми, а можно – офф-лайн с ИИ.

Для работы я, как всегда, не использовал никакие сторонние движки и библиотеки, даже jQuery мне не понадобилось. Только функции ванильного JavaScript, включая средства работы с холстом (canvas). Холст в игре – основа для вывода всей игровой графики. В WebGL, на этот раз, не было необходимости, поэтому зоопарк поддерживаемых браузеров расширился. Средой программирования, как обычно, стал продвинутый блокнот. Игра получилась объемом 3,8 Мб, из которых 3 Мб — это семь карт спрайтов в формате png. Запускается игра по html-файлу. Сервер на PHP. В случае выбора однопользовательской игры (то есть, с ИИ), запросы к серверу не отправляются и все расчеты ведутся на клиенте. Диздок не писал – он не нужен хипстерам.


Далее – занимательная геометрия и программирование, а во второй части будет рассказ о размещении игры в социальных сетях и в магазине.
Читать дальше →
Всего голосов 30: ↑28 и ↓2+26
Комментарии45

Настройки Photoshop после установки

Время на прочтение2 мин
Количество просмотров42K

image


Несмотря на то, что Фотошопом пользуюсь всё реже и реже, к нему иногда приходится возвращаться. Скетч слишком плохо работает с растром (фактически никак), поэтому графику подготавливаю в Фотошопе. В этом посте поделюсь своими настройками интерфейса.

Читать дальше →
Всего голосов 45: ↑29 и ↓16+13
Комментарии31

Консоль в массы. Переход на светлую сторону. Bash

Время на прочтение6 мин
Количество просмотров55K
keep-calm-and-bin-bash

Вступление


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

Мы добрались до самой интересной и увлекательной темы — это скрипты на bash. Когда вы запускаете терминал, внутри него работает специальная программа-оболочка — shell (англ) — интерпретатор команд. Shell понимает все команды, которые вы вводите с клавиатуры, и обрабатывает их. Также выводит сообщения об ошибках, следит за корректностью команд и их синтаксисом. Примером таких команд могут быть: сменить директорию, создать новую директорию, добавить текстовый файл, отредактировать текстовый файл, сохранить изменения и другие.
Всего голосов 69: ↑57 и ↓12+45
Комментарии108

Правила хорошего тона при написании плагина на jQuery

Время на прочтение7 мин
Количество просмотров32K
Правила хорошего тона при написании плагина на jQueryЯ написал уйму плагинов на jQuery. Если посмотреть код всех плагинов, сортируя их по дате публикации на github, то можно проследить эволюцию кода. Ни в одном из этих плагинов не соблюдены все рекомендации, которые будут описаны ниже. Все что будет описано, лишь мой личный опыт, накопленный от проекта к проекту.
Писать расширения на jQuery довольно просто, но если хотите узнать как написать их так, чтобы потом их было просто поддерживать и расширять, добро пожаловать под кат.
Читать дальше →
Всего голосов 31: ↑27 и ↓4+23
Комментарии36

CSS-маски для hover-эффекта

Время на прочтение4 мин
Количество просмотров71K


На многих сайтах-портфолио работы представлены в виде небольших картинок-миниатюр с приятными hover-эффектами. В этой статье будет рассказано о способе сделать такой эффект, используя CSS-маски. Работает только в современных браузерах, но к счастью и в старых верстка выглядит корректно и не съезжает.
Читать дальше →
Всего голосов 58: ↑54 и ↓4+50
Комментарии11

Консоль в массы. Переход на светлую сторону. Часть вторая

Время на прочтение6 мин
Количество просмотров34K
tmux example

Вступление


Довольно долгое время я использовал в своей работе screen. Но со временем он меня перестал устраивать. Я начал искать альтернативы. Такой альтернативой является tmux. На многих порталах его описывают так: «Это тот-же screen, только на стероидах». Сначала я не мог понять почему такое сравнение пока не попробовал. Скажу честно, я на него не с первого раза перешел. Раза три-четыре пробовал, возвращался к screen’у. Но tmux все же победил.
Всего голосов 31: ↑28 и ↓3+25
Комментарии38

Мобильное приложение «Shared Track»

Время на прочтение2 мин
Количество просмотров2.3K


Shared track это простое приложение для смартфонов и планшетов на базе ANDROID / IOS для создания трасс своих путешествий, прогулок и поездок. К трассам можно добавлять фото и делиться ими с друзьями и близкими.

Приложение доступно на App Store и Google Play.

Читать дальше →
Всего голосов 15: ↑6 и ↓9-3
Комментарии8

Как построить гоночный коптер и не устать

Время на прочтение6 мин
Количество просмотров24K
Многих интересует тема строительства мультироторных гоночных квадрокоптеров на раме ZMR250, но как только начинаешь исследовать тему, то обнаруживается просто тонна специфической информации, которая может только отпугнуть новичков, но никак не помочь при этом.

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


Читать дальше →
Всего голосов 25: ↑25 и ↓0+25
Комментарии55
1
23 ...

Информация

В рейтинге
Не участвует
Откуда
Саранск, Мордовия, Россия
Дата рождения
Зарегистрирован
Активность