Main > stdout.in Ievgen Kuzminov IT blog

Posts by tag : js

Анонс Vue.js 2.0

Vue.js

Перевод статьи Evan You - Announcing Vue.js 2.0

Если вы никогда ранее не слышали про Vue.js: это фронтэнд фрэймворк, состоящий из главного слоя представления и вспомогательных инструментов. Высокоуровневое описание основ и специфики вы можете прочитать здесь.

Сегодня я рад представить вам первый публичный предрелиз Vue.js 2.0, который несёт множество восхитительных улучшений и новшеств. Давайте проведём беглый обзор!


Read more ...

EcmaScript 2015 / ES6 or how backend developers lost JavaScript...

tl;dr; A humble point of view of an average backend/"full stack" developer on JavaScript. How it evolved, how backend devs stayed in JavaScript 2010 and how the gap between jQuery-JS and ES6-JS became an abyss.

Terms

Let's wrap up some terms that I'll use further:

  • Backend developer - a person who writes PHP/Ruby/Python/etc. server-side code.
  • Frontend developer - a person who writes complex JS/CSS/HTML.

It is about specialization. Of course all web devs are a little bit "full-stack", but only a super guru are really "full-stack".

Once upon a time...

I remember the times 15 years ago when JS world was a total mess.
For me, as a beginner home-made web developer, it was a black magic.
It was hard.

I was making some PHP sites, generated everything at backend side. Sometime I needed some "bells and whistles". You could copy-paste some "pretty gallery or dropdown menu" from some "JS libs site". And you were lucky if it worked for you. If not - there was literally no way to get "what is happening there" and the JS code was just ugly mess (at least how I saw the situation at that moment).
It was hard.

Year 2006 blown web dev world ... jQuery.
Anyone could make some easy JS trick really easy with jQuery. And more over it had such a cool plugins system. You just add some "pretty gallery plugin" and attach that gallery with simple selector. There were clear "entry points" for customization.
Then AJAX epoch. And again jQuery made it as simple as $.ajax. All that things made JS world easier, simpler to backend developer (actually we were more like full-stack in that time).
It became easy.

But "the world has changed...". SPA and cross-platform JS mobile apps appeared. First it was "ugly-toys", but then it appeared to be serious. jQuery is not enough to make SPA or a big JS app.
Backbone came to the rescue. It was hard to get some things, but it was so "jQueryish". It literally added some app structure, but allowed us to use the same old-known things we had before (that was actually the key to adoption).
It was kinda easy too.

Dark times...

One day it just exploded: Node.js, Phonegap, Konckout, jQuery Mobile (*trollface*), thousands of Backbone-based frameworks, Marionette, Angular...

Some backend devs tried to follow, but honestly - for example it is too hard to follow your PHP news and keep yourself up-to-date with every JS framework. Someone took Node.js and became happy, someone chose Backbone-based things and decided to dive in there.


Read more ...

Yii2 component: yii2-gon. Push variables from PHP to JS.

This component publishes json serialisable data as 'key -> value' from PHP code into global JS variable window.gon.

Why?

The need for such an extensions came while working on web apps with mixed approach: rich JavaScript GUI on web page, but each page is reloaded and most of bussiness logic is still on the backend side.

The simples solution for a quick prototyping is pushing a data from PHP controller to global JS variable. That makes you free from a lot of REST API getters (you can make a lot without an API at all). So I did the first protype of this extension during "EU Web Challenge 2015" tasks coding. And now publish it as a standalone package.

Idea is inspired by Ruby gem gon https://github.com/gazay/gon (the name is taken from it too. "GON" authors - in case of any naming issues, just ping me :))


Read more ...

Основы Vue.js 1.0 (базовые концепции)

vue

Перевод статьи из блога Evan You "VUE.JS: A (RE)INTRODUCTION". Переведён прямой речью от лица автора.

Не забывайте, что мы переводим документацию Vue.js на русский язык. Присоединяйтесь! Детали тут.

Vue.js это библиотека для построения веб интерфейсов. В связке с некоторыми инструментами её даже можно назвать “фрэймворк”, однако это скорее набор необязательных инструментов, которые работают вместе действительно хорошо. Сейчас, если вы не слышали о Vue.js и не пользовались им раньше, вы думаете: "Какое счастье, ещё один скучный JavaScript фрэймворк!" Я понимаю это. Действительно, Vue не такая уж и новинка — впервые я начал работу над его прототипом почти два года назад, а первый публичный релиз произошёл в феврале 2014. С течением времени он эволюционировал и сейчас многие пользуются Vue.js в production.

Так что же предлагает Vue? Чем отличается от конкурентов? Что должно заставить вас изучать эту библиотеку, в то время как уже существуют Angular, Ember и React? Эта статья прольёт свет на эти вопросы, проведя вам короткий экскурс в мир концепций Vue.js. Надеюсь, по прочтению, вы получите ответы на ваши вопросы.


Read more ...

Notes by tag : js


Simplezoom.js - tiny image preview lib. No dependencies, mobile friendly.



iFrame Resize automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content.



Popper.js - great JS lib to manage tooltips and popovers. A lot of customizations and features.



favico.js - JS lib to make use of your favicon with badges, images or videos



You Dont Need jQuery. Side-by-side examples, how to replace jQuery calls by native JS selectors etc. Mostly we don't need jQuery in modern browsers and GUI frameworks.


Ievgen
Kuzminov "iJackUA"
Web Team Lead
at MobiDev (Kharkiv, Ukraine)
Code in Ruby and Elixir, but still love PHP. Explore ES6 and Vue.js. Explore databases, use Ubuntu and MacOS, think about IT people and management

Notes


Animista - is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.



Staticman - handles user-generated content for you and transforms it into data files that sit in your GitHub repository, along with the rest of your content.