Pull to refresh
1
0
Максим @PML

Front-end developer

Send message

Как создать веб-приложение на базе Telegram Mini Apps

Level of difficultyMedium
Reading time9 min
Views16K

Telegram Mini Apps — отличная возможность выйти за пределы обычных ботов и попробовать себя в создании более интересных интерфейсов приложений. На базе этого инструмента можно создать магазин или даже сервис для заказа шавермы.

В этой статье познакомимся с Telegram Mini Apps и попробуем создать простое приложение. Сделаем это с использованием обновленного Angular 17 и telegraf, а в конце — задеплоим проект на виртуальный сервер.
Читать дальше →
Total votes 30: ↑30 and ↓0+30
Comments6

Типизированные формы в Angular

Level of difficultyMedium
Reading time4 min
Views4.7K

Всем привет! В июне 2022 года наша фронтенд команда наконец-то дождалась строго типизированных форм от разработчиков Angular! Через какое-то время мы заметили что не все работает так, как интуитивно ожидаешь. Позже я создал небольшой внутренний документ с “фишками”, которые явно не описаны в официальных доках. И подумал: “А почему бы мне не выложить наш небольшой гайд на Хабр?”. И вот, выкладываю.

Читать далее
Total votes 10: ↑10 and ↓0+10
Comments5

10 полезных ИИ, которые облегчат вашу жизнь

Level of difficultyEasy
Reading time4 min
Views51K

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

Узнайте, как автоматизировать рутинные операции с помощью умных ассистентов. Читайте наш обзор и выбирайте самые полезные инструменты для себя!

Читать далее
Total votes 24: ↑19 and ↓5+14
Comments8

Angular получил новый синтаксис шаблонов

Level of difficultyMedium
Reading time4 min
Views8K

Новый синтаксис шаблонов, встроенное управление потоком данных и прощание с структурными директивами? В последние годы не так много менялось. Angular был стабильным для некоторых разработчиков и застойным для других. Теперь он движется вперед со сверхсветовой скоростью. Но куда именно он направляется?

Читать далее
Total votes 6: ↑5 and ↓1+4
Comments10

70 вопросов по JavaScript для подготовки к собеседованию

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

Надеюсь, эта статья будет полезна как начинающим разработчикам, так и опытным.

В вопросах, которые показались мне сложнее прочих, приведены ссылки на дополнительную литературу.

Буду признателен за развернутые комментарии. Все замечания будут учтены при редактировании статьи.

Итак, поехали.
Читать дальше →
Total votes 46: ↑43 and ↓3+40
Comments135

Все, что вам нужно знать об обнаружении изменений в Angular

Reading time8 min
Views84K
Наткнулся на хорошую статью об устройстве Angular'овского механизма обнаружения изменений (change detection). Т.к. тема достаточна важна, но при этом недостаточно глубоко раскрыта даже на англоязычных ресурсах, а найти русскоязычные материалы на эту тему, вообще, не представляется возможным, решил перевести данную статью.
Перевод под катом
Total votes 21: ↑20 and ↓1+19
Comments8

Автоматическая загрузка файлов на Яндекс.Диск

Reading time4 min
Views26K
Предлагаю вашему вниманию PHP скрипт автоматической загрузки файлов на сервис Яндекс.Диск. Скрипт прост до безобразия, достаточно передать ему в качестве параметров логин, пароль и путь к файлу и в результате он загрузит ваш файл на сервис и выдаст вам ссылку на него. Не знаю, сколько еще меня вместе с моими постами будет терпеть Яндекс, но все-таки приведу исходный код скрипта :)
Читать дальше →
Total votes 100: ↑94 and ↓6+88
Comments125

Подборка уроков для начинающего разработчика игр на JavaScript

Reading time1 min
Views29K
В этой подборке уроков рассматриваются основы создания игр на JavaScript, изучив которые вы научитесь:
— Работать с позицией курсора мыши
— Вращать объекты внутри CANVAS элемента
— Выделять объекты мышью внутри CANVAS
— Перетаскивать объекты внутри CANVAS
— Создавать эмуляцию гравитации для объектов внутри CANVAS
— Определять скорость мыши
— Использовать мультиязычность в своих игровых проектах.
Все уроки полностью на русском языке и выполнены в наглядной форме.
image
Читать дальше →
Total votes 20: ↑11 and ↓9+2
Comments16

Элементарные социальные share-кнопки

Reading time3 min
Views194K
В ответ на посты о кнопках для шаринга в социальных сетях с громоздким исходным кодом, и сложной детальной кастомизацией, хочу показать хабрасообществу решение которое однажды написал неизвестный, но однозначно добрый программист. Автор сего чуда не я, но использую это решение уже больше года в проектах с которыми работаю.
Читать дальше →
Total votes 78: ↑68 and ↓10+58
Comments58

Почти полное руководство по flexbox (без самих flexbox)

Reading time3 min
Views63K
image

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

Хотя некоторый CSS-код в этом руководстве, возможно, покажется очевидным, я собираюсь бросить вызов flexbox, а также предложить простые решения проблем, которые возникали, пока он не обрёл популярность.

Читать всю статью
Total votes 41: ↑32 and ↓9+23
Comments59

Бесплатный курс по AngularJS от Codeschool

Reading time1 min
Views47K


Всем привет!

Пару дней назад мне на почту пришло письмо от Codeschool.com, в котором очень красочно (как можно заметить из картинки в шапке поста) представлялся новый курс по AngularJS. Т.к. платной подписки у меня сейчас нет, я решил отложить просмотр до лучших времён, а сегодня случайно узнал, что курс оказывается «Sponsored by Google», а соответственно бесплатный. Закончив работу над первым уровнем, я поспешил проверить наличие заметки об этом чудном событии на Хабре, но с удивлением обнаружил, что никто до сих пор не поделился этой новостью. Значит придётся взять всё в свои руки.
Читать дальше →
Total votes 53: ↑48 and ↓5+43
Comments17

БЭМ-методология: с чего всё начиналось и зачем это всё нужно

Reading time13 min
Views230K
На Хабре уже много писали о методологии БЭМ, выросшей в Яндексе. И мы решили, что пора системно рассказать о том, откуда она появилась и что сделало БЭМ таким, каким мы его знаем. Думаем, это будет интересно не только тем, кто уже использует БЭМ, но и тем, кто считает, что эта методология не подходит для их проектов. Возможно, они увидят, что мы решали проблемы, похожие на их собственные, и найдут что-то полезное для себя.

image

Конечно, все началось с собственных потребностей Яндекса. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом. Постепенно команда увеличилась настолько, что стало очевидно — без единых стандартов работать будет сложно. К тому же, мы находимся в офисах Яндекса в разных городах. Возникла идея создать общую методологию, которая поможет организовать процессы в большой команде, работающей над разными проектами. А главное то, что мы хотели не только упорядочить и ускорить разработку, но и снизить порог входа в проект для нового разработчика.
Читать дальше →
Total votes 73: ↑58 and ↓15+43
Comments100

Лучшие бесплатные коллекции векторных иконок

Reading time2 min
Views333K
Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.

Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

Responsive Icons (100 иконок, PSD, AI, EPS, SVG)


Responsive Icons

Читать дальше →
Total votes 91: ↑82 and ↓9+73
Comments23

Что такое лендинг

Reading time9 min
Views108K
Картинка схематично обозначающая лендинг В свое время при начале работы с CRM-системами, мне пришлось косвенно и напрямую разбираться с Landing Page: что это такое; какие бывают Landing Page; почему их используют; какую пользу они приносят, какой вред; в чем отличие их от сайта? Эти и многие другие вопросы стояли передо мной. Думаю, с ними сталкиваются многие, кто услышал что-то про Landing Page и решил сделать его для себя или своей компании.

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

Читать дальше →
Total votes 16: ↑12 and ↓4+8
Comments17

Быстрый старт за 5 минут с Angular 2 beta

Reading time16 min
Views160K
Вашему вниманию предлагается перевод туториала «5 min quickstart» от команды Angular. Туториал описывает процесс создания «Hello World»-приложения на новом фреймворке Angular 2, который недавно получил статус «бета».

Давайте начнём с нуля и построим суперпростое приложение Angular2 на TypeScript.

Демо


Запуск работающего примера — это самый лучший способ увидеть, как оживает приложение на Angular 2.
Нажатие этой ссылки открывает новую вкладку, загружает пример в plunker и отображает простое сообщение:
My First Angular 2 App

Читать дальше →
Total votes 26: ↑22 and ↓4+18
Comments36

Как на самом деле будет выглядеть рынок JavaScript в 2016 году

Reading time9 min
Views42K
image


Сегодня на сайте Mashable появилась любопытная статья «Чтобы стать гуру программирования в 2016 году, достаточно освоить Javascript и переехать в Юту» о рынке труда разработчиков программного обеспечения. Данный материал формирует весьма превратную картину действительности, а потому давайте разбираться вместе.

Краткая предыстория. Я разработчик программного обеспечения и на протяжение нескольких последних лет мне доводилось неоднократно проводить собеседования с желающими пополнить ряды моих коллег. Кроме того, я обучал разработчиков JavaScript навыкам, благодаря которым они получали шикарную работу. У меня приличный опыт в сфере создания и консультирования многообещающих команд разработчиков и компании из списка Fortune 500.

Я также часто сотрудничаю с кадровыми агентствами, благодаря чему не понаслышке знаю, чего хотят самые высокотехнологичные компании в мире. Руководствуясь собственным опытом и тем, что рассказывают мои студенты, я могу с уверенностью заявить, что прекрасно понимаю структуру рынка труда JavaScript как снаружи, так и изнутри.
Читать дальше →
Total votes 34: ↑25 and ↓9+16
Comments57

Кастомизация социальных кнопок

Reading time3 min
Views45K
Многие из нас так или иначе сталкивались с проблемой кастомизации кнопок соцсетей, а многие ещё столкнутся. Недавно нам на Sports.ru пришлось решать задачу, как не только настроить внешний вид «лайков», но и разместить на одной странице сразу несколько блоков социальных кнопок, относящихся к разным текстовым блокам.

В этом топике мы расскажем, как решили эту проблему в своем спецпроекте (осторожно, он рекламный), и поделимся готовым и, что немаловажно, достаточно гибким решением.

Читать дальше →
Total votes 30: ↑29 and ↓1+28
Comments27

MODx Revo, настройка авторизации Login. Базовая установка

Reading time7 min
Views56K
Данная статья в большей части является переводом урока с официального rtfm, а именно компонента «Login», но с вставками переводчика. На лучший перевод не иду, но суть в итоге должна быть понятной. Тем не менее, перевода на русский я до сих не нашёл.
Данный урок, хоть и называется «базовым», имеет много взаимосвязанных частей. В данном уроке мы будем обсуждать, какие страницы надо создать, какие чанки (фрагменты кода) и сниппеты нужно опубликовать на страницах для полноценной авторизации пользователей.

Номера в скобках — это ID ресурсов. Это page_id, у вас он может отличаться. Здесь они выбраны просто для удобства.
Читать дальше →
Total votes 13: ↑13 and ↓0+13
Comments10

Готовая сборка новостного портала NewsModxBox

Reading time8 min
Views24K


Два года назад я писал про готовую сборку интернет-магазина на MODX Revolution. За это время было сделано не мало интернет-магазинов на ShopModxBox (о бОльшая их часть силами сторонних разработчиков) и на сегодня количество установок движка составляет 200-300 штук в месяц. Проект и сегодня продолжает развиваться, получая в ядро новый полезный функционал.

Главные качества, которые мы отмечаем в ShopModxBox — это высокая производительность, гибкость и минимальный объем кода (ShopModxBox — это решение на базе фреймворка MODX Revolution, и его собственная часть кода составляет буквально 3-5 тысяч строк php-кода + Smarty-шаблоны).

И вот на днях мы выпустили новую сборку NewsModxBox. Здесь основа та же, что и в ShopModxBox, только логика заточена именно под новостные порталы и СМИ. Сборка пилилась под реальный и совсем не маленький новостной портал и во многом отвечает реалиям бизнес-логики электронных и смешанных СМИ.
Читать дальше →
Total votes 8: ↑4 and ↓40
Comments19

Задачи, микрозадачи, очереди и планы

Reading time8 min
Views71K
Предлагаю вашему вниманию перевод статьи «Tasks, microtasks, queues and schedules» Джейка Арчибальда (Jake Achibald), занимающего должность Developer Advocate for Google Chrome.

Когда я сказал своему коллеге Мэту Ганту, что подумываю о написании статьи об очерёдности микрозадач и порядке их исполнения внутри событийного цикла браузера, он сказал «Джейк, буду честен, я об этом читать не стану». Что ж, я всё же написал, поэтому откиньтесь на спинку кресла и давайте вместе в этом разберёмся, ладно?

На самом деле, если вам будет проще посмотреть видео, есть замечательное выступление Филиппа Робертса на JSConf, которое рассказывает о событийном цикле – оно не покрывает микрозадачи, но в остальном является отличным вступлением в тему. В любом случае, погнали…

Давайте рассмотрим следующий код на JavaScript:
console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

Как вы думаете, в каком порядке должны вывестись логи?
Читать дальше →
Total votes 22: ↑21 and ↓1+20
Comments9

Information

Rating
Does not participate
Location
Самара, Самарская обл., Россия
Date of birth
Registered
Activity

Specialization

Frontend Developer, Web Developer
Angular
TypeScript
JavaScript
HTML
CSS
Web development
Git