Обновить
512K+

Веб-разработка *

Делаем веб лучше

334,85
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Разработка сайта на WebAssembly с помощью NetCore 3 и Blazor

Время на прочтение4 мин
Охват и читатели24K

Мое мнение, что WebAssembly будущее интернета. Данная технология на текущий момент уже интегрирована в большинство современных браузерах (а точнее в их движках) на ПК и мобильных устройствах. В таких браузерах как Chrome, Edge, Firefox, и WebKit.


В данной статье я опишу как начать разработку сайта WebAssembly в Visual Studio. Статья подойдет для тех, кто хотел бы понять, как начать разрабатывать SPA приложения без использования JavaScript, зная только asp.net mvc, c#, верстку html и css.


На момент выхода статьи фреймворк NetCore 3 находится в стадии RC1, а Blazor имеет версию 3.0.0-preview9.19457.4. Релиз NetCore 3 запланирован на сентябрь 2019. Что относительно Blazor то его релиз обещают позднее в ноябре 2019 года, скорее всего после релиза NetCore 3.1


Оглавление:

Читать дальше →

История одной анимации

Время на прочтение17 мин
Охват и читатели15K
Однажды фронтендеру позвонил дизайнер и попросил сделать «паутинку» за запотевшим стеклом. Но потом оказалось, что это не «паутинка», а гексагональная сетка, и не за стеклом, а она уходит вдаль, и с WebGL фронтендер не знаком, а всей анимации пришлось учиться в процессе рисования. Тем фронтендером был Юрий Артюх (akella).



Юрий давно занимается версткой, а по воскресеньям записывает стримы с разбором реальных проектов. Он не профи в WebGL, не делает на нем карты, не пишет на Web-ассемблере, но ему нравится учиться чему-то новому. На FrontendConf РИТ++ Юрий рассказал, как провести одну анимацию от макета до сдачи клиенту так, чтобы все были довольны, и по дороге изучить WebGL. История идет от первого лица и включает в себя: Three.js, GLSL, Canvas 2D, графы и немного математики.

Проблемы и нюансы при разработке под SmartTV с использованием React.js

Время на прочтение4 мин
Охват и читатели13K
Хочу поделиться опытом разработки приложения с просмотром видео контента для SmartTV (Tizen и WebOS) и с какими проблемами мы столкнулись.

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

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

Я не буду рассказывать о том, как именно нужно делать с примерами кода, я расскажу о нюансах и решениях, которые были приняты.
Читать дальше →

Новая панель управления хостингом от ISPsystem: как посмотреть

Время на прочтение2 мин
Охват и читатели5K


Сегодня мы публично анонсировали Vepp — новую панель управления сервером и сайтом. Скоро провайдеры начнут её продавать, а пока можно попробовать бесплатно. Оцените интерфейс, создайте сайт и покопайтесь в настройках. Нам интересно ваше мнение!

Читать дальше →

Vepp — новая панель управления сервером и сайтом от ISPsystem

Время на прочтение9 мин
Охват и читатели10K


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


Сначала мы хотели просто обновить интерфейс ISPmanager 5, но на этапе проектирования поняли: интерфейсом не обойтись, нужно менять подход к задачам пользователя. Фактически это означало, что надо делать новый продукт.


Под катом объясним, почему нельзя было просто апгрейдить ISPmanager 5 и покажем, что получилось в результате его глобальной переработки.

Читать дальше →

Скучный технологический стек интернет-компании из одного человека

Время на прочтение8 мин
Охват и читатели26K

Поисковая выдача на ListenNotes.com

Listen Notes — это поисковая система и база данных подкастов. Технология на самом деле очень скучная. Никакого ИИ, глубокого обучения или блокчейна. «Если вы должны объявлять о внедрении ИИ, то вы не используете Настоящий ИИ» :)

После прочтения этой статьи вы сможете повторить мой проект или легко сделать нечто подобное. Не придётся нанимать много разработчиков. Помните, когда Instagram привлёк $57,5 млн и отошёл к Facebook за $1 млрд, у них было всего 13 сотрудников — и это не только разработчики. Покупка Instagram произошла в начале 2012-го. Сейчас 2019 год, и сегодня как никогда просто создать что-то значимое с крошечной инженерной командой — даже из одного человека.

Когда стандарта HTTP мало. Коммитим в Micronaut

Время на прочтение6 мин
Охват и читатели4.6K
Всем привет, меня зовут Дмитрий, и сегодня я расскажу о том, как производственная необходимость заставила меня стать контрибутором для фреймворка Micronaut. Наверняка многие о нём слышали. Если вкратце, то это легковесная альтернатива Spring Boot, где основной упор сделан не на рефлексию, а на предварительную компиляцию всех нужных зависимостей. Более подробное знакомство можно начать с официальной документации.

Фреймворк Micronaut используется в нескольких внутренних проектах Яндекса и зарекомендовал себя достаточно хорошо. Так чего же нам не хватало? Могу сказать сразу: из коробки фреймворк поддерживает, в принципе, все фичи, которые теоретически могут понадобиться программисту для разработки бэкендов. Однако есть редкие кейсы, которые из коробки не поддерживаются. Один из них — когда работать нужно не по HTTP, а с расширением HTTP. Например, с дополнительными методами. Таких случаев на самом деле гораздо больше, чем может показаться. Более того, часть таких протоколов является стандартами:

  • Webdav — расширение для доступа к ресурсам. Помимо стандартных методов, HTTP требует поддержки дополнительных методов типа LOCK, PROPPATCH и т. д.
  • Caldav — расширение Webdav для работы с событиями календарного типа. Данный протокол с большой долей вероятности есть в приложениях на вашем смартфоне: для синхронизации календарей, встреч и т. д.

И этим список не исчерпывается. Если вы заглянете в реестр HTTP-методов, то увидите, что HTTP-методов, лишь описанных стандартами RFC, на данный момент 39. А сколько ещё случаев, когда имеется самописный протокол поверх HTTP. Так что поддержка нестандартных HTTP-методов довольно распространена. Также часто бывает, что фреймворк, который вы используете, не поддерживает такие методы. Вот дискуссия на Stack Overflow для ExpressJS. А вот pull request на гитхабе для Tornado. Ну и поскольку Micronaut часто позиционируется как легковесная альтернатива Spring — то вот та же проблема для Spring.
Читать дальше →

10 сервисов для создания структуры сайта в 2020 году

Время на прочтение12 мин
Охват и читатели188K

Прототипирование — значимый этап в веб-разработке, который позволяет определить и сформировать ДНК проекта на ранних стадиях. В последние годы количество онлайн-сервисов и инструментов для прототипирования ощутимо возросло. В этом обзоре представлены 10 сервисов для создания визуальных сайтмэпов.


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

Сайтмэп — это структура страниц сайта представленная в иерархической модели. Такая схема помогает оценить объем страниц, которые формируют сайт, а также понять логику их взаимосвязи. Иногда это примитивные по организации и структуре схемы. А порой очень сложные с многоуровневой вложенностью карты. Сайтмэпы помогают планировать распределение содержания и механику навигации будущего сайта.

octopus.do visual sitemap
Читать дальше →

Elasticsearch Moscow meetup в Ozon

Время на прочтение2 мин
Охват и читатели2.4K
image

Давно не виделись! Пора собраться в офисе Ozon, чтобы обсудить «поисковые» делишки и задать вопросики. От вечных: как решить проблему, ничего не сломав, как повысить качество поиска и проверить, что оно действительно стало выше? До нетривиальных: как погода влияет на цвет машины и как можно эту информацию использовать?

Читать дальше →

История о V8, React и падении производительности. Часть 1

Время на прочтение8 мин
Охват и читатели14K
В материале, первую часть перевода которого мы публикуем сегодня, речь пойдёт о том, как JavaScript-движок V8 выбирает оптимальные способы представления различных JS-значений в памяти, и о том, как это влияет на внутренние механизмы V8, касающиеся работы с так называемыми формами объектов (Shape). Всё это поможет нам разобраться с сутью недавней проблемы, касающейся производительности React.


Читать дальше →

Пять перспективных языков программирования со светлым будущим (3 года спустя)

Время на прочтение8 мин
Охват и читатели72K

КДПВ


В 2016-м году я опубликовал перевод статьи про 5 перспективных языков программирования, в которой прогнозировался их рост в ближайшие 2-3 года.
Зачастую прогнозы так и остаются прогнозами, без последующего анализа. Но я решил, что это непорядок. И посколько 3 года уже пролетели, пора подвести промежуточные итоги и посмотреть, что произошло с этими языками за это время.


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


про эшелоны

В исходной статье языки программирования условно делятся на 3 эшелона по популярности.
Первый эшелон включает мейнстрим-языки, такие как Java, JavaScript, Python, Ruby, C# и т.д.
Языки второго эшелона пытаются пробиться в мейнстрим, но ещё не добились этого. Они доказали свою состоятельность путем создания сильных сообществ, но они до сих пор не используются большинством консервативных IT-компаний. Большинство языков в первом эшелоне прочно укоренились на своих позициях. Поэтому выпадение языка с лидирующих позиций занимает ощутимое время, а для языка второго эшелона очень трудно пробиться в первый.
К третьему эшелону относятся непопулярные языки, а также относительно новые перспективные языки (о которых пойдёт речь), которые только начинают свой путь наверх. Некоторые языки пребывают в третьем эшелоне на протяжении многих лет, не получая популярности, в то время как другие врываются на сцену всего за пару лет.

Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №380 (8 — 15 сентября 2019)

Время на прочтение4 мин
Охват и читатели10K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →

Насколько хорошо вы знаете CSS? (+ мини-тест)

Время на прочтение13 мин
Охват и читатели33K
image

Отличие между успешным использованием CSS и мучительными попытками справиться с ним, зачастую зависит от мелких деталей. На самом деле, в CSS очень много нюансов. Одна из наиболее часто встречающихся областей, где я часто замечаю такую борьбу — это стилизация макетов. Лично мне нравится изучать CSS-паттерны. Я заметил, что склонен использовать небольшое их количество для решения большинства проблем с макетом. Эта статья про те CSS-паттерны, которые я использую для преодоления проблем в вёрстке. Ситуации будут рассматриваться независимо от используемой CSS-методологии: будь то SMACSS, BEM или даже горячая тема CSS-in-JS, потому что все они сфокусированы на самих CSS-свойствах, а не на архитектуре, организации или стратегии.

Ближайшие события

И снова 256-й день года

Время на прочтение9 мин
Охват и читатели9.3K

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


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


Читать дальше →

Три типовых ошибки в сфере безопасности, о которых должен знать каждый React-разработчик

Время на прочтение8 мин
Охват и читатели27K
Автор статьи, перевод которой мы сегодня публикуем, говорит, что React — это её любимая библиотека для создания интерактивных интерфейсов. React одновременно и лёгок в использовании, и достаточно хорошо защищён. Однако это не значит, что React-приложения совершенно неуязвимы. Очень легко впасть в неоправданное спокойствие, решив, что о XSS-атаках можно не волноваться из-за того, что в проекте используется React.

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



Сегодня мы поговорим о типичных уязвимостях React, о том, как находить их во время код-ревью, и о том, как от них защищаться.
Читать дальше →

Укрощаем протоколы доверия – OAuth авторизация с InterSystems IRIS

Время на прочтение11 мин
Охват и читатели4.1K
Как разрешить компьютерам доверять друг другу в ваше отсутствие, сохраняя безопасность и приватность?



— Сухой «мартини». В большом бокале.
— Oui, monsieur. [Да, месье (фр.)]
— Секунду, еще не все. Три пальца «Гордона», один — водки, полпальца «Кины Ликлет». Хорошо взбейте в шейкере, а потом положите большую дольку лимона. Запомнили?

Ян Флеминг, «Казино Рояль», 1953 год

Часть 1. Истории про OAuth 2.0 and OpenID Connect


Универсальная и, похоже, сегодня в XXI веке всеми любимая связка открытых протоколов делегирования доступа и идентификации называется OAuth+OIDC. Лучше для массово использования пока ничего не придумали. Особенно популярны у фронтендеров, потому что гуляют поверх протоколов HTTP(S) и используют контейнер JWT (JSON Web Token). OpenID Connect использует для своей работы OAuth или, по другому говоря, OIDC является обёрткой для OAuth.

OpenID – открытый стандарт для аутентификации и создания систем цифровой идентификации не новинка для разработчиков. В этом 2019 году ему исполняется 14 лет. В нынешней третьей версии полное название OpenID Connect или короче OIDC. Популярен как в вебе и мобильной разработке, так и в корпоративных системах.
Читать дальше →

Использование JavaScript-модулей в продакшне: современное состояние дел. Часть 2

Время на прочтение8 мин
Охват и читатели7.3K
Сегодня мы публикуем вторую часть перевода материала, который посвящён использованию JS-модулей в продакшне.



→ Кстати, вот первая часть статьи.
Читать дальше →

Быстрое введение в Svelte с точки зрения разработчика на Angular

Время на прочтение10 мин
Охват и читатели17K

Svelte — сравнительно новый UI фреймворк, разработанный Ричем Харрисом, который также является автором сборщика Rollup. Скорее всего Svelte покажется совершенно не похожим на то, с чем вы имели дело до этого, но, пожалуй, это даже хорошо. Две самые впечатляющие особенности этого фреймворка — скорость и простота. В этой статье мы сосредоточимся на второй.



Поскольку мой основной опыт разработки связан с Angular, вполне естественно, что я пытаюсь изучить Svelte, копируя уже привычные мне подходы. И именно об этом будет рассказано в этой статье: как в Svelte делать те же самые вещи, что и в Angular.

Читать дальше →

Ant-карусель на CSS и Javascript

Время на прочтение6 мин
Охват и читатели53K
С появлением CSS3 появилась возможность совершать анимацию без использования JS-библиотек, таких, например, как jQuery. CSS3 свойство transition позволяет плавно изменять другие свойства элемента (width, height, margin, opacity и пр.), задав в качестве параметров время и закон трансформации. Предлагаю небольшую по размерам, но достаточно функциональную карусель на чистом Javascript. Небольшую, как муравей, что гораздо меньше чем сова. Но почти с такими же возможностями.

Ant-карусель позволяет:

  • показывать один или несколько элементов;
  • элементы могут быть показаны в виде конечной или бесконечной ленты (в цикле);
  • автопрокрутка элементов;
  • навигация осуществляется стрелками, индикаторными точками или перелистыванием (для тактильных экранов);
  • автоматически подстраивается под любую ширину экрана.

Помещаем нашу карусель в файл index.html (пример файла см. ниже):

HTML
<div class="ant-carousel">
  <div class="ant-carousel-hider">
    <ul class="ant-carousel-list">
      <li class="ant-carousel-element"><img src="images/img1.jpg" alt="1"> <p>Описание 1</p> </li>
      <li class="ant-carousel-element"><img src=" images /img2.jpg" alt="2"> <p>Описание2</p> </li>
	…
      <li class="ant-carousel-element"><img src=" images /imgN.jpg" alt="N"> <p>Описание N</p> </li>
    </ul>
  </div>
  <div class="ant-carousel-arrow-left"></div><div class="ant-carousel-arrow-right"></div>
  <div class="ant-carousel-dots"></div>
</div>


Здесь использованы элементы <ul><li>, но вместо них можно использовать <div > <div >, если вам это удобнее. Стрелки и индикаторные точки располагаются абсолютным позиционированием в соответствующих контейнерах. Для стрелок используются рисунки в виде треугольных скобок, которые, при желании, вы можете заменить своими рисунками или генерацией изображения псевдо-элементами :before и :after.

Как робот «Совести» общается с клиентами

Время на прочтение6 мин
Охват и читатели6.1K
Расскажем, как финтех-проект группы QIWI — карта беспроцентной рассрочки «Совесть» — перевел часть разговоров контакт-центра на робота, который не только отвечает на вопросы, но и сам задает их при исходящих обзвонах. Статья про применение на практике HTTP-запросов, синтеза речи и распознавания голоса.


Читать дальше →