Рубрика «web-разработка» - 33

Перевод статьи «Building robust web apps with React: Part 4, server-side rendering», Matt Hinchliffe

От переводчика: это перевод четвертой части цикла статей «Building robust web apps with React»
Переводы:

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

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

Перевод статьи «Use Elements as Background Images with -moz-element», David Walsh

Все мы знаем, что все браузерные вендоры по своему определяют многие CSS и JavaScript фичи, и я благодарен им за это. Mozilla и WebKit предлагают свои интересные проприетарные свойства, и хотя, как мы знаем, утверждение стандартов происходит годами, намного дольше чем стоило бы, мы все должны быть за это благодарны. Есть одно интересное CSS свойство о котором вы наверняка еще не слышали — -moz-element, это реализованное Mozill'ой CSS свойство, которое позволяет разработчикам использовать HTML элементы в качестве фонов для других элементов!

Смотреть демо

Читать полностью »

От переводчика:

Привет! Мы мы продолжаем делится с сообществом полезными материалами о разработке и дизайне. В этот раз команда TrackDuck подготовили перевод статьи Jeff Dickey о Angular, которая нам очень понравилась и в свое время заставила пристальней присмотреться к Gulp. Эта статья будет полезна разработчиками, которые хотят сэкономить время на рутинных операциях и построить качественные процессы при разработке веб-приложений. Мы активно используем Angular для разработки собственного продукта для визуального комментирования веб-сайтов, поэтому готовы ответить в комментариях на интересующие вас вопросы!

Лучшие способы использования Angular.js

Я использовал Angular в довольно большом количестве приложений и видел много способов структурирования приложений с использованием этого фрэймворка. Сейчас я пишу книгу о проектировании Angular приложений c использованием MEAN стека, и больше всего исследований я провел в этом направлении. В итоге я остановился на довольно оригинальной структуре приложения. Я считаю, что мой подход более простой чем тот, что предложил Burke Holland.
Прежде чем начать, я хотел бы рассказать о существующем подходе к реализации модульности в Angular.Читать полностью »

Генплан посёлка на основе Яндекс api
Читать полностью »

Перевод статьи «Building robust web apps with React: Part 3, testing with Jasmine», Matt Hinchliffe

От переводчика: это перевод третьей части цикла статей «Building robust web apps with React»
Переводы:

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

imageЭта статья не претендует на полноценное руководство по программированию на PowerShell или пошаговую инструкцию по разработке высоконагруженных сервисов .NET. Но в ней собраны полезные приемы и разъяснение некоторых особенностей интеграции PowerShell с .NET, которые пока сложно или даже невозможно найти в Сети.
Читать полностью »

Перевод статьи «Building robust web apps with React: Part 2, optimising with Browserify», Matt Hinchliffe

От переводчика: это перевод второй части цикла статей «Building robust web apps with React», вот ссылка на перевод первой части. Перевод следующей части появится через несколько дней.

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

Код, который в начальном демо был представлен на выполнение браузеру, не проходит ни один базовый тест производительности; скрипты должны быть прекомпилированы, объединены и минифицированы перед отправкой на продакшн.Читать полностью »

Перевод статьи «Building robust web apps with React: Part 1, in-browser prototypes», Matt Hinchliffe

От переводчика: это первая статья из цикла «Building robust web apps with React», если статья пойдет хорошо, переведу остальные части.

Когда я смотрю на то, как устроены браузеры и протоколы, на которых работает веб, мне становится как-то тревожно. Есть столько всего, что может и, обычно, идет не так, что становится удивительно, как хоть что-то из того, что мы пишем, вообще работает. Надежность «вопреки всему» происходит от отказоустойчивости и обратной совместимости, которые укоренились в ключевые части веб-стека. Браузер всегда сделает все возможное, чтобы отобразить, что-то полезное, будь-то парсинг плохо написанного документа, в котором невозможно получить зависимости, или, который на 10 лет устарел.

image
404PageFound содержит до сих пор работающие сайты, созданные еще в 1993 году.
Читать полностью »

Angular Light — это самостоятельный клиентский MV(C/VM) фреймворк, который построен на идеях Angular.js и Knockout.js, и похож на упрощенный Angular.js

Основные изменения за последнее время:

  • Поддержка «совеременных» браузеров без зависимостей (12kb): Google Chrome, Firefox, IE9+ (для IE8 нужен jQuery)
  • Сделан модуль анимации, можно использовать CSS от Angular.js 1.2+
  • Одноразовый биндинг — после получения первых данных $watch удаляется, для этого нужно дописать "::" в начало, например {{::variable}} вместо {{variable}}.
  • Сохранение результирующего списка в директиве al-repeat, после применения фильтра исходный список может изменится и иногда нужно получить результат, например для определения кол-ва элементов или для вывода «список пуст». Использовать можно так: al-repeat="item in list | filter store to variable", пример.
  • Появился «track by» для директивы al-repeat — способ идентификации элементов в списке, работает по аналогии ng-repeat из Angular.js
  • Теги для al-app, позволяют делать биндинг разных частей DOM к одному scope. Бывает полезным когда на странице используется несколько разных фреймворков и не желательно «захватывать» весь документ, с помощью тегов приложение можно «раскидать» в разные места, пример.
  • В ф-ии $watch появилось событие $finishBinding, оно срабатывает после того как произойдет биндинг. Это можно использовать в место timeout в директивах (или контроллерах :) ).
  • Появилась возможность в любой момент сделать текстовую директиву статической с помощью env.finally()

Читать полностью »

Данное явление, которое я собираюсь описать, я начал наблюдать в конце мая. Подумал, что это временно, возможно, ведутся какие-то работы на сайте enter.ru, который будет основным действующим лицом в статье. Итак, дело было в мае, решил я купить коляску. Поскольку я являюсь членом клуба Связной (sclub.ru), и у меня накопилось приличное количество бонусов на карте, то я решил купить коляску именно в этом магазине. Зарегистрировался, все как положено, оформил заказ, поехал, забрал самовывозом, оплатил наличкой. Через некоторое время решил я купить фитбол для жены, чтобы укачивать ребенка. И тут началось самое интересное. А самое интересное уже под катом.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js