I haven't no. FEM have just released an async course though, by a lead engineer at Netflix, who is also on the TC39 committe, it looks very, very good!

I haven't no. FEM have just released an async course though, by a lead engineer at Netflix, who is also on the TC39 committe, it looks very, very good!

The same guy does a series on Egghead https://egghead.io/series/mastering-asynchronous-programming-the-end-of-the-loop. He talks insanely fast on the FEM one. I honestly thought the video had been sped up. I'll have to check it out.

I really like the idea this. I have a feeling it will be considered normal practice in a few years. Wordpress's templating isn't getting any better.

 

http://alistapart.com/column/nearly-headless-cms

I quite like the idea too. The backend should just push out data, it should not care about the UI at all in my opinion. RESTful API's as far as I know do this?

Correct. There are a few ways to do them in existing CMS's.

 

http://wp-api.org

https://github.com/pixelandtonic/ElementAPI

https://devot-ee.com/add-ons/rest

 

I'm interested to see what impact this would have in terms of SEO. Especially with services like https://prerender.io around.

I got a tax refund so I bought a few JS shirts. A React one, and a plain JS one. The JS shirt ended up being really cheap with the dollar conversion, and the fact they sent me a $10 coupon code for following them on Twitter.

 

http://shirtjs.com/product/react-tools-black/

http://www.unixstickers.com/tshirts-and-hoodies/t-shirts/the-ultimate-javascript-tshirt

 

These should replace my older programming ones. Out with the old, in with the new.

Edited October 1, 201510 yr by Jack

Talks from this years JSConf (and CSSConf) are being added to Youtube - https://www.youtube.com/user/jsconfeu/videos

Some interesting presentations.

Talks from this years JSConf (and CSSConf) are being added to Youtube - https://www.youtube.com/user/jsconfeu/videos

 

Some interesting presentations.

 

Thanks for sharing!

 

It's gonna take me a while to get through those

I was talking about Angular 2 Paul

 

Although (speaking in terms of JS here) and my somewhat lacking knowledge of classes - what benefits do you get from using them if you are not using inheritance?

 

My understanding is that they are primarily used to group data into objects and / or allow for inheritance. both of which JavaScript can do via object literals and prototype delegation.

 

If I'm wrong on this assumption please expand more on why a class might be useful

 

There's a growing list of some of the best minds in the industry who are saying class can be a damaging pattern. I've listed them before but for the sake of those who have not seen our convos:

 

• Douglas Crockford - The JavaScript guy, created JSON, Author of JS the Good Parts, Senior JS Architect at PayPal
• Kyle Simpson - One of the leading JS teachers, Author of You Don't Know JS series http://davidwalsh.name/javascript-objects
• Eric Elliot - Author of Programming JavaScript Applications https://medium.com/javascript-scene/a-simple-challenge-to-classical-inheritance-fans-e78c2cf5eead
• Mattias P Johansson - Senior Spotify Dev - read https://www.quora.com/Why-do-JavaScript-programmers-favor-inheritance
• Jafar Husain - Technical lead at Netflix - I've not seen him say classes are bad, but I've never seen him use them in his teachings.

Doug and Jafar are both on the TC39 committee, which is about as high as you can get in the JavaScript world.

 

Crockford says that the idea of classes being bad is very controversial, just as the idea of goto being bad was hugely controversial in the 70's - we don't miss it now.

Programming paradigms change, and when some of the industry smartest minds are collectively saying something is bad I think the probability of them being onto something is highly likely. Watch the video below. Although it's not the main topic of his keynote, he goes into why he considers class a bad pattern. Doug has experience in many languages dating back to him being a leading computer game developer for Atari in the early 80's, and was at one time an advocate for classical OOP.

 

 

These guys are way more advanced than me or anybody on here it's hard to believe they are all missing a point that we would see?

 

I'm always open to learning new ideas, and there's such a plethora of information out there, I think it's wise to listen to the teachings of the best in the industry.

Edited October 11, 201510 yr by rbrtsmith

Paul those experts are experienced in many languages. Like I put Crockford has been programming for many decades, he was around even before OOP came around so I don't think you can label them as just JS experts.

Eric Elliot was also a systems dev in C++ before he moved onto Java and then JavaScript.

 

i also think you might find classical languages easier because that's what you were taught with. Likewise for me JS is much easier for me because that's what I was taught with.

If you don't try to shoehorn classes then JavaScript is not difficult to debug, you don't need instanceof if you are not trying to misuse the language.

 

Being different to the norm does not make it bad or difficult, many were just taught to think in a different way. OOP was once considered weird to those taught in the procedural style. Now functional and prototypes, to those brought up in OOP style will seem weird.

 

The reason JS is so confused with the class thing is because Brendan Eich was forced by politics to 'make it look like Java' but underneath that he had lambdas and the prototypal system which are both brilliant.

 

I believe what the experts are saying because they give very good arguments - like the gorilla banana issue that was covered by Mattias in that video further up in this page.

 

I am always open for seeing other ideas though so I'd be happy if you can present a situation where a class is a better option than the other tools JavaScript provides you with. Of course in things like Java you have to uses classes for object instantiation so I'm talking specifically JavaScript here

 

And for your last point I think if we just keep on doing the same thing because it works then we will never discover new and better ways of doing things. It's really important we get better at embracing change because stagnation doesn't help anybody.

Edited October 11, 201510 yr by rbrtsmith

Paul what do you make of the Crockford video? You might have more truck with his reasoning. I don't think it's as simple as them stating an orange is an apple or vice versa. He's giving very strong, real word arguments.

 

If it was just one of them claiming classes in JS are bad I would be more skeptical, but it's not just the one. These devs got to this point in authority largely because they have proven to be very good at what they do, this is why I am going to listen to their teachings.

 

Apparently for years devs who wrote in binary thought assembly was a bad idea, same happened when assemblers thought high level languages were a terrible idea, then when the notion that 'goto' was a bad idea many thought that to be outrageous.

The pattern seems to go on and on - and it points to that we just do not embrace change and it took industry leaders to push change through.

 

In these circumstances the leaders were right in their thinking. I think the probability the guys I listed above being correct is higher than them being incorrect.

Edited October 11, 201510 yr by rbrtsmith

Vue.js 1.0 released. This framework is a lot more popular than it appears.

 

http://vuejs.org/2015/10/26/1.0.0-release/

Really impressed with Riot, especially considering it's 12kb. I've spent some more time working with it this evening. The scoped CSS is pretty cool.

 

I'm going to link it up to an API next.

Jack do you have any good links / intros for riot? I'm still learning React & flux + a million other things and intend to learn more about this RxJS that is used in the Frontend Masters Async course. I have to be very careful what I spend my time with - with there being so many new frameworks and libraries being continually released!

There's a course on here https://egghead.io/playlists/learning-riotjs. Some of the videos are free. A lot of it can be found just reading the docs http://riotjs.com/guide/.

 

React is a large and complex framework in comparison to Riot. I wouldn't worry that you're spending too much time on it. I picked the entire framework up in an hour. If you haven't had much experience working with React components, then I think it's a good place to start to learn the concepts. It helped for me, since React has a lot of new ideas, it can take a while to get your head around.

 

I'd recommend reading the direct comparison on their site http://riotjs.com/compare/.

yeah I've read of one similar called Deku which Mattias Johansson uses, it takes a more functional approach, I don't really like the fact that react encourages use of classes, so Deku looks interesting for that reason, I'll take a look at riot, hopefully it's more functional like Deku. Classes, while useful in other languages have no place in JavaScript when we have better options available.

Edited October 29, 201510 yr by rbrtsmith

yeah I've read of one similar called Deku which Mattias Johansson uses, it takes a more functional approach, I don't really like the fact that react encourages use of classes, so Deku looks interesting for that reason, I'll take a look at riot, hopefully it's more functional like Deku. Classes, while useful in other languages have no place in JavaScript when we have better options available.

 

I don't see any classes in the mark-up. It's not going to be as involved to use, but it also doesn't have as much power as React, or even Vue. It's pretty much for creating these re-usable components that you can use in templates, as well as a few nice things like data binding, scoped CSS, loops and conditionals.

Can Anyone tell me if there is a reason why you can not assign default values to function arguments in JS?

 

In PHP you can do this:

function returnValues ($param1='default value'){
    return $param1;
}

In JS you have to do this:

function returnValues(param1) {
    if (param1 === undefined) {
        param1 = 'Default value';
    }
    return param1;
}

Is there any logical reason for this?

You can in ES6 using destructuring.

I use it in the plugin I wrote.

See the first function BlockSlider - in it's signature you see two parameters, one called collection, the other an object with default values. That object gets destructured and the individual variables can be accessed directly as you can see on line 38 where I reference sTransition.

https://github.com/rbrtsmith/BlockSlider/blob/master/src/block-slider.js

 

See

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

for more on destructuring in ES6.

 

 

Your ES5 example can be reduced greatly too:

function returnValue(param1) {
  return param1 || 'some default value';
}

Edited November 1, 201510 yr by rbrtsmith

 

You can in ES6 using destructuring.

I use it in the plugin I wrote.

See the first function BlockSlider - in it's signature you see two parameters, one called collection, the other an object with default values. That object gets destructured and the individual variables can be accessed directly as you can see on line 38 where I reference sTransition.

https://github.com/rbrtsmith/BlockSlider/blob/master/src/block-slider.js

 

See

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

for more on destructuring in ES6.

 

 

Your ES5 example can be reduced greatly too:

function returnValue(param1) {
  return param1 || 'some default value';
}

 

Nice one. Thanks

An interesting article on the relevance of jQuery http://developer.telerik.com/featured/jquerys-relevancy-there-and-back-again/

 

I happen to agree, and all to often we just try to be clever and not need jQuery. While it's important to know what it's doing under the hood, there's little point in reinventing the wheel.

Time = money, both in the initial development and in the maintenance. jQuery is not always appropriate, you may be using a framework like React, or doing very simple DOM interactions. But under many circumstances it is a smarter move to use jQuery than to not.

 

We're always abstracting away things, saying you never need jQuery because you can write stuff without is the same as saying you should never use Lodash or underscore. You should also never use build tools like grunt or gulp that abstract away build processes--it's just silly.

Abstractions are very, very useful. We can all be smart and do things without, but that doesn't make us good value to our employers or clients.

 

Opinions?

Edited November 7, 201510 yr by rbrtsmith

An interesting article on the relevance of jQuery http://developer.telerik.com/featured/jquerys-relevancy-there-and-back-again/

 

I happen to agree, and all to often we just try to be clever and not need jQuery. While it's important to know what it's doing under the hood, there's little point in reinventing the wheel.

Time = money, both in the initial development and in the maintenance. jQuery is not always appropriate, you may be using a framework like React, or doing very simple DOM interactions. But under many circumstances it is a smarter move to use jQuery than to not.

 

We're always abstracting away things, saying you never need jQuery because you can write stuff without is the same as saying you should never use Lodash or underscore. You should also never use build tools like grunt or gulp that abstract away build processes--it's just silly.

Abstractions are very, very useful. We can all be smart and do things without, but that doesn't make us good value to our employers or clients.

 

Opinions?

I guess it depends on the complexity what you are coding. For many "plain" websites the native API can be sufficient. For more advanced sites with AJAX calls etc. you would probably need something better. However the argument about non-implemented native API selectors across browsers is really not that valid any more. It will be difficult to find a user without support for querySelectorAll. Also the children/sibling selectors are much more reliable than they used to. In this video Nicholas Zakas talks abot how well these selectors were supprted even back in 2012.

Edited November 7, 201510 yr by Nillervision

The problem is Niller that while plain JS works, it takes more time to write, you often end up writing your own abstraction, walking the DOM in native is not easy unless you like recursion a lot. jQuery does a lot more than give you nicer selectors.

Try and recreate jQuerys .find method using native DOM API and get it working down to IE8. If you have to do this kind of thing many times in your app/site then you should abstract that code away - which evidently is what jQuery does, as it's a hell of a lot more verbose and difficult to follow than .find()

 

I've built my own versions of many of jQuerys methods and I can tell you that many are very verbose, and I wouldn't like to be maintaining a codebase like that. Let the jQuery team deal with it - ride on the shoulders of the giants if you would.

 

Code readability is really important - which is why I also don't use loops. I use functional array methods like .filter, .map, .reduce that abstract away the loops and make code much more readable - just like jQuery abstracts away the DOM.

Douglas Crockford described the DOM this year as the worst API in human history and any kind of abstraction of it is infinitely better, if anybody knows what they're talking about here it's Crockford.

 

These pain points increase the likelyhood of bugs being introduced, both during production and if other developers have to maintain it. It also normalizes over browser differences and bugs - yes even in modern browsers they are still there. It's tried and tested, if you write your own you have a lot of testing to do also.

 

28kb gzipped is the size of jQuery, which is nothing when you consider the average website is ~2mb. Although I always aim for <500kb. jQuery is very rarely a performance bottleneck.

 

If all you are literally doing is hiding an element, or something very simple then yes no jQuery. You also wouldn't needed if you were using something like React - although if we're talking filesize React is a lot bigger than jQuery.

 

The notion that we shouldn't depend on abstractions is very true, but that shouldn't be misinterpreted to read that we shouldn't use them. Under the right circumstances they are very helpful.

 

All a framework like React or Angular does is abstract stuff away, the same with many frameworks both front-and backend. They are very, very useful and save a lot of developer time. We owe it to our clients and employers to use our time effectively.

Edited November 7, 201510 yr by rbrtsmith

The new Wordpress.com admin is built with Node and React https://developer.wordpress.com/calypso/. You can use it on your own self hosted copy too apparently.

 

An indication of where WP might be going?! There's no way the current method of building themes is scalable long-term. It's too messy, and they obviously know that.

 

The basic paradigms of wp-admin are largely the same as they were five years ago. Working within them had become limiting. The time seemed ripe for something new, something big but if youre going to break back compat, it needs to be for a really good reason. A 20x improvement, not a 2x. Most open source projects fade away rather than make evolutionary jumps.

 

So we asked ourselves a big question. What would we build if we were starting from scratch today, knowing all weve learned over the past 13 years of building WordPress? At the beginning of last year, we decided to start experimenting and see.

http://ma.tt/2015/11/dance-to-calypso/

Today i read article about ES6 classes and couldn't understand on thing. Please, let me know what does this lines of code means?

`${this.firstName} ${this.lastName}`

["test".toUpperCase()]()

I have never seen this before!

'use strict';

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  // геттер
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  // сеттер
  set fullName(newValue) {
    [this.firstName, this.lastName] = newValue.split(' ');
  }

  // вычисляемое название метода
  ["test".toUpperCase()]() {
    alert("PASSED!");
  }

};

let user = new User("Вася", "Пупков");
alert( user.fullName ); // Вася Пупков
user.fullName = "Иван Петров";
alert( user.fullName ); // Иван Петров
user.TEST(); // PASSED!

 

Today i read article about ES6 classes and couldn't understand on thing. Please, let me know what does this lines of code means?

`${this.firstName} ${this.lastName}`

["test".toUpperCase()]()

I have never seen this before!

'use strict';

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  // геттер
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  // сеттер
  set fullName(newValue) {
    [this.firstName, this.lastName] = newValue.split(' ');
  }

  // вычисляемое название метода
  ["test".toUpperCase()]() {
    alert("PASSED!");
  }

};

let user = new User("Вася", "Пупков");
alert( user.fullName ); // Вася Пупков
user.fullName = "Иван Петров";
alert( user.fullName ); // Иван Петров
user.TEST(); // PASSED!

 

You can easily use functions to achieve the same thing. I wouldn't even bother spending time learning about classes in JS, many top JS developers consider them an anti-pattern, and I also think this is true. I would spend more time instead looking at functional programming techniques, and higher order functions.

 

This should help explain the difference between inheritance and composition. Classes like the above favour inheritance.

 

Jack, thank you! Agree with you. I learn classes only because my company use react and sometimes i see ES6 classes in our code. I think that

`${this.firstName} ${this.lastName}` and  ["test".toUpperCase()]()

can be used not only in classes. But i don't know what is it and what is it for. I see that it's destruction

[

this.firstName, this.lastName] = newValue.split(' ');

and can be used in many cases. But what two lines of code above doing?

Edited November 25, 201510 yr by fleur

`${this.firstName} ${this.lastName}`

Template Literals used for interpolation, its just a string containing values without having to use + to concatenate.

`The Year is ${5 * 4}${75 / 5}`
// => "The Year is 2015"

---

["test".toUpperCase()]()

Computed properties, the above is the same as TEST(). They're for using the value of a variable, function etc as a key / function name in an object.

 

 

---

[this.firstName, this.lastName] = newValue.split(' ');

Destructuring Assignment. newValue.split(' ') would produce an array containing values, by reflecting that array on the left hand side you're assigning those values to this.firstname and this.lastname, works with Objects too.

 

In ES5 you'd probably write:

var names = newValue.split(" ");
this.firstName = names[0];
this.lastName = names[1];

I 100% agree with Jack. I think classes in JS are a big mistake and I'm already seeing a load of tutorials teaching developers that they are the way forward sigh...

ES6 classes are just syntactial sugar over the new/constructor syntax. JavaScript does not have classes. These forms you see are just trying to shoehorn the prototypal mechanism to work a bit like classes. I don't get why developers don't just learn JavaScript and stop trying to write Java / other class based languages. Embrace the language you are writing in

The prototypal system was never broken and is a great way of linking objects to one another - every bit as powerful as classes without having to worry about object hierarchy

 

All this said it's extremely rare I actually use inheritance now, We can employ functional programming in JavaScript that allows us to compose functions together and I much prefer this way of writing programs to dealing with inheritance or delegation, you need huge data sets to get any tangible benefit from it.

Edited November 26, 201510 yr by rbrtsmith

Thank you for all answers! Wynn, thank you very much for explanation and examples! Tomorrow at office i will play again with your examples with fresh head. I didn't know about interpolation, thank you!

React console is very powerfull. I can see all info, including props, state etc. But if there is a possibility
to see in what js or xsl file selected component takes place? i want to open react console, make a click and see the name of the js or xsl file in what i need to edit component. I will be greatfull for advice how to find this, because i couldn't find the info in internet. Now i need to search component in Sublime text. It's not comfortable and sometimes takes much time.

Edited December 14, 201510 yr by fleur

what's an Xsl file?

 

React console just shows rendered components at that specific moment in time. You should name your components then they're easy to find with a

cmd + p search for files.

Thank you for advice! JSX, sorry)) i thought that in react console i can see the name of the file i should edit. I work in large app (many devs was working with it for many years and now there is a little mess)). One component can be in several files and only one file is really render. Now i open Sublime text, search by Ctrl+F by components name and try to suspect what file exactly i need. I thought that i can see right file in react console and make editing faster.

Sounds like mess. But I question- How can a component possibly be in multiple files? I'm pretty sure that is not even possible as a React component is contained within a single function.

 

Generally each component should get it's own file that is exported, you then group components into folders to categorise them.

Much like you would organise a load of PHP templates.

 

The React console is mostly for checking props and state for the current view.

Edited December 15, 201510 yr by rbrtsmith

Easy:) For instance, then programmer don't want to go deeper in site structure, he (or she) makes it's own js and css files with the same components and styles for to make correction in site. And save old files in the same folder! Like addClientsForm.js (new file exported). clientsForm.js - old file. All in the same folder.)))) Import structure is very complicated and it takes time to see the path. I try to suspect what file is working and then check in the server. Add to that old jsx files (but now we try to delete them).

I like holiday, because i can learn something new. I try to use promises for to make flickr gallery. I could collect all urls in array, i failed when try to get pics urls. I see links (on one pic only), but even this pic doesn't show on the page. I understand that i need to get objects in array, but don't know how to do it. Please, point me to the right direction, cause i am new in promise.

Thank you for all advices!

 

DEMO

 $.ajax({
   url: 'http://api.flickr.com/services/feeds/groups_pool.gne?id=807213@N20&lang=en-us&format=json&jsoncallback=?',
   dataType: 'jsonp'
 }).then(data => {
   var items = data.items;
   items.forEach(function(el) {
     var img = new Image();
     img.src = el.link;
     img.className = "pics";
     setTimeout(() => {
       document.body.appendChild(img);
     }, 1000);

   });

 });

Hi fleur

 

I had a look and played with your codepen snippet - if you change img.src = el.link; to img.src = el.media.m; you'll get the images.

Now you're using the urls of the pages where images are posted and not the actual image urls.

 

Hope that makes sense and helps

 

Edit: here's a pen - http://codepen.io/teodora-n/pen/EPZWLO

Edited January 2, 201610 yr by teodora

Teodora, thank you million times! I see now, jpg was in the next line, oh:))))

Fluer I see your using some ES2015 there, try dropping the 'var' statements for const. then you will get warned if you try to reassign to it. You want to enforce immutability where possible. In the cases where you do need to reassign then use 'let' var can be dropped entirely when using ES2015

Rbrtsmith, million thanks for advice! I changed two vars on const.
Ajax and promise is very common used in our app and in this weekend i need to learn much about it for to understand the code.
Very complicated theme.)