Рубрика «javascript» - 375

Привет!

Наш прошлый перевод нетрадиционного обзора React многим понравился, и, конечно, люди стали сравнивать Реакт с популярным AngularJS. Сегодня мы публикуем перевод статьи «An Unconventional Review of AngularJS» от того же автора (Джеймса Шора, ведущего проекта Let’s Code: Test-Driven JavaScript). Поклонникам Angular просьба сохранять спокойствие :)

Нетрадиционный обзор AngularJS - 1

AngularJS это все, что я ожидаю от фреймворка. И это не хорошо.

В ноябре, декабре и январе я обозревал AngularJS для серии «front-end frameworks» в рамках проекта Let’s Code JavaScript. Суммарно я провел 40 часов изучая, программируя и решая задачи. Как обычно, моей целью было изучить AngularJS создавая приложение.

Angular это, наверное, самый популярный фронт-энд фреймворк сейчас. Его разрабатывает команда из Google, что сразу внушает доверие. Он настолько популярен, что входит в акроним. Angular это часть так называемого стека «MEAN»: MongoDB, Express, AngularJS, Node.JS. Самая что ни на есть передовая технология.

Angular описывает себя как инструмент для улучшения ХТМЛ. Он позволяет расширить ХТМЛ новыми определениями — директивами — которые превращают статичный ХТМЛ-документ в динамический шаблон. Директивы могут быть атрибутами или тегами (или даже комментариями или классами, но это уже не совсем обычная история), и они превращают статичный ХТМЛ-документ во что-то живое и дышащее, на первый взгляд без добавления JavaScript.Читать полностью »

Спешу предположить, что вы наслышаны о ES6 и, возможно, успели попробовать её. Тогда вам наверняка покажется интересной заметка о некоторых фичах спецификации, опубликованная Блейком Уильямсом в блоге Thoughtbots. Я же, с позволения автора, публикую перевод.

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

ES6 сегодня

Вы можете начать писать на ES6 прямо сейчас, используя транслятор в ES5 6to5. 6to5 поддерживает достаточно много инструментов сборки, в их числе: Broccoli, Grunt, Gulp и Sprockets. У меня всё прекрасно работало со sprockets-es6, а 4.x Sprockets будут поддерживать 6to5 из коробки. Также вы можете попробовать ES6 прямо в браузере в 6to5 REPL.
Читать полностью »

Зачем использовать Bootstrap?

Разрабатывая и дорабатывая решения на основе SharePoint, я всё больше стал сталкиваться с повышенными ожиданиями пользователей от стандартных форм создания и редактирования элементов. Всех окружают такие удобные и привычные Яндекс, Gmail, Facebook, VK и другие. Симпатичные, быстрые и понятные интерфейсы стали нормой. Многие ожидают интерфейсы подобного уровня и в корпоративных системах.
Читать полностью »

Сначала пару слов о себе

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

Всё время делал какие-то программы, облегчающие жизнь мне и моим коллегам. В первую очередь на C++Builder (замечу, что пользовался лицензионной версией). Некоторые из программ, типа программного комплекса по анализу качества работы базовой подсистемы 2G и 3G, используется до сих пор (PHP+JS, «фишка» там больше не в программировании, а в использовании множества алгоритмов для поиска проблемных элементов), хотя на момент написания этой статьи я уже 2 года как не работаю в сотовой связи.
Читать полностью »

image

В этом обзоре мы поговорим про бесплатные курсы виртуальной академии Microsoft MVA, которые будут полезны как профессиональным разработчикам программного обеспечения и ИТ-про, так и новичкам. Некоторые курсы предлагают бесплатную подготовку к официальным сертификационным экзаменам. Обратите внимание, что видео-плеер на сайте для ряда курсов, которые созданы на английском языке, содержит возможность включить русские субтитры.

Хит! Экспресс-погружение в разработку приложений на JavaScript

Если вы занимаетесь разработкой на JavaScript, то этот курс поможет вам разобраться в том, что вас ждет уже в ближайшем будущем. Мы постарались дать краткий обзор новых тенденций и современных возможностей в разработке приложений на JavaScript: будь это сложные веб-решения, приложения для Windows или кроссплатформенные приложения, или игры. Так же мы немножко заглянем в будущее и посмотрим на возможности следующей версии стандарта JavaScript – ECMAScript 6 и затронем новые сферы, в которых уже сегодня можно применять JS.

Хит! Введение в AngularJS

Веб-разработчики, если вам понравился модуль Введение в AngularJS в курсе Одностраничные приложения с jQuery и AngularJS, то приготовьтесь к еще более мощному курсу! По многочисленным запросам эксперты Stacey Mulcahy и Christopher Harrison продемонстрируют вам как использовать встроенную функциональность AngularJS в ваших приложениях. Узнайте о самых полезных задачах, которые помогает решить AngularJS и разберите на примере простого приложения функции и особенности Фреймворка, включая Directives, Databinding, Expressions и Filtering. Плюс, научитесь таксономии, языку, структуре и еще большему. Приступайте к этому информативному курсу целиком посвященному AngularJS!

Хит! Разработка современных приложений на C#

Основная задача курса – показать мощь современной платформы Microsoft .NET и управляемых языков, в частности — языка программирования C# (хотя мы также коротко показываем, как прекрасен может быть F#). В обзорной форме мы рассказываем о том, как C# можем применяться для создания универсальных приложений на платформе Windows, облачных сервисов, а также устройств для «интернета вещей» и мобильных роботов.
Читать полностью »

Когда появился node.js, многие web-разработчики стали задумываться о возможности использовать один и тот же код как на клиенте, так и на сервере. Сейчас существует несколько фреймворков, ставящих подход «пишем код один раз, используем везде» во главу угла, время от времени появляются новые. Вот и я не смог пройти мимо, пишу подобный микро-фреймворк — bnsf. Он предназначен для тех, кто предпочитает создавать front-end своих приложений по БЭМ-методологии, пользуясь соответствующим набором технологий и инструментов.

Давайте попробуем начать писать front-end для простого одностраничного web-приложения, используя bnsf. Чтобы не отвлекаться на создание back-end части, будем использовать в качестве back-end'a API vk.com. Наше приложение будет состоять всего из двух страниц, главной — с формой поиска пользователей по идентификатору — и вторичной, на ней будем выводить информацию о выбранном пользователе.
Читать полностью »

Идея игры

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

Смысл игры – составлять слова из соприкосающихся гексагонов. В игре 3 режима:

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

Внешний вид

image

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

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

image

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

Привет!

Мы в Хекслете любим свой стек технологий :) Когда рассказываем другим — многие завидуют: Rails, Docker, AWS, React JS. Реакт мы используем в первую очередь для создания веб-среды для разработки Hexlet-IDE, которая позволяет нашим пользователям выполнять упражнение по разработке приложений и взаимодействию с виртуальной машиной прямо в браузере.

Сегодня мы публикуем перевод статьи «An Unconventional Review of React» Джеймса Шора, ведущего проекта Let’s Code: Test-Driven JavaScript.

Нетрадиционный обзор React - 1

Он мне понравился. Я не ожидал такого.

Для специальных выпусков Let’s Code JavaScript в августе и сентябре я изучал Реакт.

На случай если вам не знаком Реакт: это библиотека для фронт-энд веб-разработки. С помощью него создаются компоненты: короткие, не-совсем-ХТМЛ теги, которые можно комбинировать для создания интерфейса.

Реакт знаменит своими нетрадиционными решениями: реализацией виртуального DOM’а, созданием элементов интерфейса в JavaScript вместо шаблонов, создание суперсета языка JavaScript — JSX, который позволяет вставлять не-совсем-ХТМЛ прямо в код JS.

С этими решениями разработка уходит от схемы манипуляции DOM’ом — добавить этот элемент, скрыть эффектом другой элемент, обновить это текстовое поле. Вместо этого вы описываете как сейчас должен выглядеть DOM. Реакт берет на себя сложную работу по определению необходимых действий чтобы DOM на самом деле стал выглядеть так, как вы сказали.Читать полностью »

Эта статья не про ваши сладкие интерфейсы на реакте, ангуляре или что вы там используете? Это статья про те ситуации, когда у вас есть кучка jQuery лапши. Нет, пусть это будут горы jQuery лапши, завернутой во вьюшки бэкбона.

В статье используется библиотека Backbone.View.Elements

Проблема первая: маловыразительные селекторы

Все мы видели лапшу, все мы знаем: лапша в JSе — наверно и в верстке не все хорошо. А раз все так, то код, скорее всего, кишит непонятными манипуляциями с домом. Читать такой код сложно, ведь надо, не упуская мысли автора о том, что здесь вообще происходит, держать в уме кучку невнятных названий для элементов. Итак, давайте придадим коду немножко выразительности:

_selectors: function () {
    return {
        elemName: '.block__elem-name'
    };
}

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

this._elem('elemName');

вмсето

this.$('.block__elem-name');

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


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