Support NeoGAF

[PetriP-TNT]

I use their undocumented public API: https://www.instagram.com/{user}/media/. Each url you get has a few parameters in it and if you mess around you'll find it's for crop, size, translation and sharpness.

Hey, neat! Thanks for the tip, I wasn't aware of that.

 

[Zakalwe]

From another developers standpoint regarding your site...

• I want to be taken to "home" directly when I go to your site, I don't want to have to click a link.
• The animations are interesting but they don't really add anything for me and I feel that they're just tedious.
• There's like a 300px margin between the header and blog posts for seemingly no reason?
• I personally find the gray header title color you're using a bit hard to read. I'm also a fan of semantic markup and not using divs for headers, etc.
• The triangle title name for the page is cute but I think it would be annoying if I didn't remember what the tab was.
• The links on your contact page look like buttons with the border they have but are actually divs that reveal a link when hovering over them, why not just make them a link?
• On the project page you only have four projects so why not just show them in reverse chronological order and give me a brief description/image of them? I don't want to have to click through.

I want sites to be simple and to perform their intended function quickly and I think animation is one of the quicker ways to muddy that goal.

Thanks, all very helpful.

I updated the site.

1. Removed the first stage of the entrance animation.
2. Removed the gap.
3. I re-designed the links. Now the boxes themselves are the links, the drop down is a preview image.
4. Added a description to the page and labels to the portfolio items.
5. Re-designed the blog page, removed the slide-down menu from the About page.
6. Added three new buttons to the index page. The first takes you to the blog, the second to the middle section of the index page, the third to third section of the index page.
7. Added links to return to the top at various points.

I still have some work to do on the mobile level.

Let me know what you think if you can, I'd like to know if the changes improve things for you.

 

[Kalnos]

It's a really big improvement Zakalwe. Maybe keep the text in the nav highlighted or underlined to remind me what page I'm on? I still think the gaps between content are a bit too large.

I do like the animations on the main page for "Development Blog", "Design Work", and "Design Code" because I don't have to wait for them and they look pretty sweet.

 

[Zakalwe]

It's a really big improvement Zakalwe. Maybe keep the text in the nav highlighted or underlined to remind me what page I'm on? I still think the gaps between content are a bit too large.

I do like the animations on the main page for "Development Blog", "Design Work", and "Design Code" because I don't have to wait for them and they look pretty sweet.

Thank Kalnos, your feedback was exactly what I needed.

I'm still playing with the spacing, I like the large gaps though as I don't like things to be too bunched, but I'll try a few layouts.

I'll add a page marker to the nav too.

I just added a new coloured part to the main header, and changed the shutter buttons to match. Gives the site a different feel as it scales down.

EDIT: I've done a lot of work today, I think I'm nearly finished. Added markers for current page, link from the footer to the top of the site, etc... Aside from a few visual niggles the only big jobs I have are finishing the tablet and mobile levels for the Design Work section and enhancing the general UI for the mobile level.

If anyone can think of anything else it would be appreciated.

 

[grmlin]

I'm now in love with javascript generators in general and redux-saga in particular.

Getting rid of all those callbacks feels so good.

 

[The Albatross]

How to do stuff in terminal on Windows:

1. Install cmder
https://github.com/cmderdev/cmder

2. Enjoy life because your life is now excellent

I have to use both a PC and Linux/OS X at work, and I use Cmder for the PC. It's definitely my preferred terminal environment on Windows, but it still generally stinks compared to a native terminal. I use it basically for simple unix commands and running vagrant because you just run into too many issues.

 

[-COOLIO-]

any thoughts on elixir and the phoenix framework? i'm thinking about trying it out for a side project.

 

[Kalnos]

any thoughts on elixir and the phoenix framework? i'm thinking about trying it out for a side project.

I have been using it for a while. Elixir itself is pretty awesome once you get used to functional programming and the ideas that come with it (immutable data, etc). The Erlang OTP framework is awesome and allows you to do some really complex and powerful stuff with processes and supervisors that are a pain in other languages. It's awesome to be able to run a concurrent background task and have it restart itself on failure or setup a supervisor so that if one process fails then you restart certain other processes, etc. It's also nice that it's super easy to call Erlang code if you need it since it uses the BEAM VM.

Phoenix itself is pretty good but be prepared to figure some things out on your own or ask the Slack channel if you venture too far outside of the defaults (Postgresql, Brunch).

TLDR: I really like it but just realize that it may be missing libraries because it's young and that you won't be able to find a wealth of tutorials on every little subject. It does feel productive though since it makes just enough choices for you to not feel like a hassle.

 

[-COOLIO-]

I have been using it for a while. Elixir itself is pretty awesome once you get used to functional programming and the ideas that come with it (immutable data, etc). The Erlang OTP framework is awesome and allows you to do some really complex and powerful stuff with processes and supervisors that are a pain in other languages. It's awesome to be able to run a concurrent background task and have it restart itself on failure or setup a supervisor so that if one process fails then you restart certain other processes, etc. It's also nice that it's super easy to call Erlang code if you need it since it uses the BEAM VM.

Phoenix itself is pretty good but be prepared to figure some things out on your own or ask the Slack channel if you venture too far outside of the defaults (Postgresql, Brunch).

TLDR: I really like it but just realize that it may be missing libraries because it's young and that you won't be able to find a wealth of tutorials on every little subject. It does feel productive though since it makes just enough choices for you to not feel like a hassle.

awesome, it sounds great so far, and thanks for the impressions. do you feel like it has a long term future or is it too soon to tell?

 

[Kalnos]

The creator of Elixir and his company seem pretty devoted to it and he seems to have a good working relationship with the creator of Phoenix (they seem active on each other's repositories). I think Phoenix is picking up a lot of people from ruby/rails but I'm personally from Go/Node.

I would seriously ask the guys on the Elixir/Phoenix Slack channels if you have other questions, they're really friendly and helpful.

 

[Copons]

Yo, I've got one of those doubts of mine of the 7.45AM.

If I have a class method doing things with the class this, and I call the method as a callback of, say, an event listener, to use the class this inside the method, do I need to bind it in the constructor (or wherever)?

I mean this:

class Stuff {

  constructor(foo) {
    this.foo = foo;

    // Do I need this or is there a proper way?
    this.logOnClick = this.logOnClick.bind(this);
  }

  doSomething() {
    document.addEventListener('click', this.logOnClick);
  }

  logOnClick() {
    // Is this this the class this or the event this or something else entirely?
    console.log(this.foo);
  }

}

 

[PetriP-TNT]

Yo, I've got one of those doubts of mine of the 7.45AM.

If I have a class method doing things with the class this, and I call the method as a callback of, say, an event listener, to use the class this inside the method, do I need to bind it in the constructor (or wherever)?

I mean this:

class Stuff {

  constructor(foo) {
    this.foo = foo;

    // Do I need this or is there a proper way?
    this.logOnClick = this.logOnClick.bind(this);
  }

  doSomething() {
    document.addEventListener('click', logOnClick);
  }

  logOnClick() {
    // Is this this the class this or the event this or something else entirely?
    console.log(this.foo);
  }

}

You mostly likely meant

  doSomething() {
    document.addEventListener('click', this.logOnClick);
  }

¨
Consider something like this:

function logOnClick() {
	console.log("omg");
}

class Stuff {
  constructor(foo) {
    this.foo = foo;

    // Do I need this or is there a proper way?
    this.logOnClick = this.logOnClick.bind(this);
    document.getElementById("btn").addEventListener('click', logOnClick);
  }

  logOnClick() {
    console.log(this.foo);
  }
}

When you click the button, do you expect to get "omg" or the value of "this.foo"?

Additionally, consider this:

class Stuff {

  constructor(foo) {
    this.foo = foo;

    // Do I need this or is there a proper way?
    this.logOnClick = this.logOnClick.bind({foo: "hello world"});
   
    document.getElementById("btn").addEventListener('click', this.logOnClick);
  }

  logOnClick() {
    console.log(this.foo);
  }
}

What's the output now?

Just linking to MDN is a bit lazy but it might help as the answer to your question of "do I need to bind it" is "it depends":

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

 

[Copons]

You mostly likely meant

  doSomething() {
    document.addEventListener('click', this.logOnClick);
  }

Yes, I meant that.
Of course I forgot to write a this in a this related question.

Consider something like this:

function logOnClick() {
	console.log("omg");
}

class Stuff {
  constructor(foo) {
    this.foo = foo;

    // Do I need this or is there a proper way?
    this.logOnClick = this.logOnClick.bind(this);
    document.getElementById("btn").addEventListener('click', logOnClick);
  }

  logOnClick() {
    console.log(this.foo);
  }
}

When you click the button, do you expect to get "omg" or the value of "this.foo"?

Well since you omitted the this, I'll get "omg".

Additionally, consider this:

class Stuff {

  constructor(foo) {
    this.foo = foo;

    // Do I need this or is there a proper way?
    this.logOnClick = this.logOnClick.bind({foo: "hello world"});
   
    document.getElementById("btn").addEventListener('click', this.logOnClick);
  }

  logOnClick() {
    console.log(this.foo);
  }
}

What's the output now?

And in this case I'll get "hello world".

Just linking to MDN is a bit lazy but it might help as the answer to your question of "do I need to bind it" is "it depends":

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

But yes, I mean, my point was kinda this:
isn't it counter-intuitive to have to bind the class this to a class method?

Hence my doubt that I was doing something wrong or convoluted or needless.

 

[PetriP-TNT]

But yes, I mean, my point was kinda this:
isn't it counter-intuitive to have to bind the class this to a class method?

Hence my doubt that I was doing something wrong or convoluted or needless.

It's not counter-intuitive if you need to make sure that "this" is the "this" you think it is.

 

[Copons]

It's not counter-intuitive if you need to make sure that "this" is the "this" you think it is.

Ok, I was writing a sort of long answer, but at some point I realized you're right.

Spoiler

Still convoluted tho!

 

[grmlin]

I for myself don't overwrite the class methods but add the bindings to the callback argument.

    document.getElementById("btn").addEventListener('click', this.logOnClick.bind(this));

One of the things I miss in ES6 from Coffeescript, the possibility to use fat arrows on class method definitions.

 

[Copons]

I for myself don't overwrite the class methods but add the bindings to the callback argument.

    document.getElementById("btn").addEventListener('click', this.logOnClick.bind(this));

Oh, that is nice, I'll make definitely use of it!

One of the things I miss in ES6 from Coffeescript, the possibility to use fat arrows on class method definitions.

Do you mean something like this?

 method = () => {}

I've found it in some tutorial (maybe a recent version of SurviveJS?), but I couldn't understand what it means, nor I could get eslint to accept that and not overwhelm my editor with fatal errors.

 

[grmlin]

You can use fat arrows in ES6, of course. But not in class definitions.

It's a proposal for ES7 though. You could add the babel-plugin to your workflow already, but it's experimental at the moment.

 

[PetriP-TNT]

Do note that in "document.getElementById("btn").addEventListener('click', this.logOnClick.bind(this));" again "this" can be something else than you expect it to be Most likely won't though.

 

[grmlin]

Do note that in "document.getElementById("btn").addEventListener('click', this.logOnClick.bind(this));" again "this" can be something else than you expect it to be Most likely won't though.

Yeah, you should of course always know about your this

 

[Copons]

You can use fat arrows in ES6, of course. But not in class definitions.

It's a proposal for ES7 though. You could add the babel-plugin to your workflow already, but it's experimental at the moment.

Yes, but I still don't know what the heck does that mean, nor why would I need it.

Spoiler

Maaaan, sometimes I seriously miss the good ol' jQuery days.

 

[grmlin]

When writing functions with fat arrows, your context, this, is preserved.

The babeljs guide to es6 is always a good starting point to read about es6 features.

https://babeljs.io/docs/learn-es2015/#arrows-and-lexical-this


The => does two things.

1. your this will be the same inside the function. So a jquery event handler for example will not overwrite it.

class Foo {
  constructor() {
    const that = this;
    ...

    $el.on('click', function (event) {
      this === that; // false
    });

    $el.on('click', (event) => {
      this === that; // true
    });
  }
}

2. Furthermore you can omit the block at all and write one-liners. (this is great for functional programming). The result of the expression you write after the => will be the function's return value

[1,2,3].reduce((previousValue, currentValue)=>previousValue+currentValue) // returns 6

BTW: you can play around with fat arrows in some browsers, eg the Chrome developer tools.

 

[Copons]

When writing functions with fat arrows, your context, this, is preserved.

Yeah, no, I meant: what does the fat arrow function do when assigned to a class method.

class Stuff {
  method = () => {
    // do something
  }
}

Does it "simply" override the class this with the method scope one?

 

[grmlin]

Oh, sorry


It preserves this for a class method. Babel simply puts the function into the constructor, so it will not be part of the prototype. I don't like that to be honest, as I expect it to be in there.

https://babeljs.io/repl/#?evaluate=...ent) => { console.log('clicked'); } }

 

[Copons]

Oh, sorry


It preserves this for a class method. Babel simply puts the function into the constructor, so it will not be part of the prototype. I don't like that to be honest, as I expect it to be in there.

https://babeljs.io/repl/#?evaluate=...ent) => { console.log('clicked'); } }

OH!
So, it's EXACTLY what I wanted!!

Totally gotta get it to run on my eslint configuration!

 

[PetriP-TNT]

OH!
So, it's EXACTLY what I wanted!!

Totally gotta get it to run on my eslint configuration!

You'll need Babel-ESLint https://github.com/babel/babel-eslint

 

[Yeoman]

What would be the best way to make a clickable tree for a website?
Something a bit like this:

With each box as a clickable link. I've done something similar to this in the past with just HTML and CSS but it would mess up on different screen sizes. Is HTML 5's Canvas an option to look into?

 

[Somnid]

One day I hope we get auto-binding classes (I believe a proposals for it was dropped for some reason). Still trying to figure out the best way to transition my style to classes mostly because I've never had need of them as the factory-module pattern is more powerful.

 

[PetriP-TNT]

One day I hope we get auto-binding classes (I believe a proposals for it was dropped for some reason).

There are autobinding decorators available like in https://www.npmjs.com/package/core-decorators or https://github.com/andreypopp/autobind-decorator

 

[Somnid]

There are autobinding decorators available like in https://www.npmjs.com/package/core-decorators or https://github.com/andreypopp/autobind-decorator

Yeah I thought about that too, very excited for decorators. I try to keep my stuff at a level that avoids transpilers though.

 

[grmlin]

This reminds me that I have to look into decorators next...

 

[Copons]

You'll need Babel-ESLint https://github.com/babel/babel-eslint

Yeah, goddamn me, I just realized what I was doing wrong: I installed babel-eslint but I never set it as the parser in .eslintrc, so Atom kept using the vanilla eslint, always firing an error on the fat arrow methods.

Spoiler

also it took me a good amount of reloads to finally get Atom to recognize the new parser setting...

 

[Haly]

Atom desperately needs a "force reload" button. Sometimes it'll take ages before noticing my lint rules changed or that I have it enabled at all.

 

[Yeoman]

What would be the best way to make a clickable tree for a website?
Something a bit like this:

With each box as a clickable link. I've done something similar to this in the past with just HTML and CSS but it would mess up on different screen sizes. Is HTML 5's Canvas an option to look into?

Just an update to say I think I solved it by using an SVG.

 

[Somnid]

wrote: calc(100% + 2px)
less rewrote that as: calc(102%)
solution: ~"calc(100% + 2px)"

Welp, it's SASS from here on out.

 

[Copons]

wrote: calc(100% + 2px)
less rewrote that as: calc(102%)
solution: ~"calc(100% + 2px)"

Welp, it's SASS from here on out.

What!
Isn't that vanilla CSS? Why would LESS convert it? :O

Spoiler

also wtf, between SCSS and PreCSS I totally don't remember what's what anymore. :'(

 

[WanderingWind]

Just an update to say I think I solved it by using an SVG.

Yes. I am a super fan of using SVGs now. Make sure to run any SVG you plan on using through this bad boy: https://jakearchibald.github.io/svgomg/

It spits out a much easier to grog final product that makes it easier to see what and where to style.

 

[Copons]

Yes. I am a super fan of using SVGs now. Make sure to run any SVG you plan on using through this bad boy: https://jakearchibald.github.io/svgomg/

It spits out a much easier to grog final product that makes it easier to see what and where to style.

True developers write their SVG manually

Spoiler

and in sheer panic copy off google the motherfucking formula to calculate the length of a quadratic bezier path because back in university they would have rather spent 16h a day playing WoW than attending to math classes

 

[WanderingWind]

True developers write their SVG manually

Spoiler

and in sheer panic copy off google the motherfucking formula to calculate the length of a quadratic bezier path because back in university they would have rather spent 16h a day playing WoW than attending to math classes

I uh, draw mine in Illustrator and then export them. lol

 

[PetriP-TNT]

PRO-TIP for Illustrator users: if you have CC subscription make sure you update it: the 19.2. update introduced vastly improved exporting options, including SVG-exporter that actually creates somewhat optimized SVG images for the web.

What!
Isn't that vanilla CSS? Why would LESS convert it? :O

Spoiler

also wtf, between SCSS and PreCSS I totally don't remember what's what anymore. :'(

Yes, but LESS calculates things automatically so you can do things like:

@foo: 12px;
@bar: 15px;
max-width: @foo - @bar;

calc() is a special case that is badly handled by LESS because you want to keep the actual values instead of doing the calculation yourself, so you need to escape it to treat it as it is. SCSS can handle this though out of the box.

 

[Copons]

PRO-TIP for Illustrator users: if you have CC subscription make sure you update it: the 19.2. update introduced vastly improved exporting options, including SVG-exporter that actually creates somewhat optimized SVG images for the web.



Yes, but LESS calculates things automatically so you can do things like:

@foo: 12rem;
@bar: 15px;
max-width: @foo - @bar;

calc() is a special case that is badly handled by LESS because you want to keep the actual values instead of doing the calculation yourself, so you need to escape it to treat it as it is. SCSS can handle this though out of the box.

Can it?
I sort of remember having to interpolate variables to use them inside a calc.
Like:

width: calc(100% - #{$somevariable});

I could totally be wrong though, my entire brain is totally busy trying to understand (again, and again and againa dnadainaganinagndagain) the hate ES6 classes get in the JS community.

 

[grmlin]

Can it?
I sort of remember having to interpolate variables to use them inside a calc.
Like:

width: calc(100% - #{$somevariable});

I could totally be wrong though, my entire brain is totally busy trying to understand (again, and again and againa dnadainaganinagndagain) the hate ES6 classes get in the JS community.

Yes, you have to escape vars in calc with scss.




I for myself use ES6 classes very rarely, Javascript is perfect in creating objects without it, and I prefer using mixins and the like over classes and inheritance. I still don't know why I should use classes in React for example, I simply don't see a benefit at all, beside that fact that I use fancy classes.

I think the biggest problem for most people is the way they work. They look like good old classes but do the same as always in the background. And if you have no clue what the prototype in js does, why there is a this that suddenly means something else if you don't bind it correctly, people will be lost.


Eric Elliot wrote some articles on that topic, eg https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3#.5kwcvjsi6

 

[PetriP-TNT]

Can it?
I sort of remember having to interpolate variables to use them inside a calc.
Like:

width: calc(100% - #{$somevariable});

I could totally be wrong though, my entire brain is totally busy trying to understand (again, and again and againa dnadainaganinagndagain) the hate ES6 classes get in the JS community.

Yeah I was a bit unclear there: you need interpolation if you want to use variables with calc, but just doing calc(100px - 10px) works as expected on SASS but requires escaping in LESS

 

[Yeoman]

Yeah I've been drawing the SVG using Sketch and then simply exporting it. I'm not doing anything too complex so the code is relatively basic.

 

[Copons]

I for myself use ES6 classes very rarely, Javascript is perfect in creating objects without it, and I prefer using mixins and the like over classes and inheritance. I still don't know why I should use classes in React for example, I simply don't see a benefit at all, beside that fact that I use fancy classes.

I think the biggest problem for most people is the way they work. They look like good old classes but do the same as always in the background. And if you have no clue what the prototype in js does, why there is a this that suddenly means something else if you don't bind it correctly, people will be lost.


Eric Elliot wrote some articles on that topic, eg https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3#.5kwcvjsi6

I have already read a bunch of Eric Elliot (arguably the most vocal defensor of prototypes) and yet his reasoning fail to convince me.

Yes, classes in JS do not work the same as in classical languages.
So what?
Writing "class" is so much simple and clear than having to write Object.create, Object.assign, prototype and whatnot.

And yes, them being functions instead of objects is quite weird. But still!
Classes allow for a much cleaner code and do exactly the same as prototypes.

And well, the this behavior in JS is always a surprise, classes or not.

 

[Somnid]

I'm also in the "don't need classes" boat. The real problem I think is now that "class like" things exist there seems to be pushing to make classes less sugar and more of their own thing. Some of the upcoming work for strong mode and typed Javascript looks like it's going to severely limit other methods of object creation.

 

[grmlin]

Well, Elliot does not like classes and inheritance in general, I think.


I use classes, too. It's sometimes very handy to have something like a class and throw it around in your code. All I wanted to say is, that I think the people are afraid that the "real nature" of JS is obfuscated by the class syntax and no one will know how to properly use it.

 

[smuf]

Digital Ocean's name servers are down, I've been getting calls from angry customers all afternoon. Good times.

 

[runningjoke]

I want my server to pass a few settings to my redux app, stuff like csrf tokens and api uris, stuff that isn't going to change while using the app. Is the (initial) state a good place to put it? It's convenient for my components, just link it to the parts of the state they need, but having a reducer that does nothing seems wrong.

 

[grmlin]

I want my server to pass a few settings to my redux app, stuff like csrf tokens and api uris, stuff that isn't going to change while using the app. Is the (initial) state a good place to put it? It's convenient for my components, just link it to the parts of the state they need, but having a reducer that does nothing seems wrong.

I use a server-generated config and store it in a config class/object when the app starts. For me there is no reason to use redux for that, as it will never change.

It's pretty rare a component needs to know about these things, most of the settings are for ajax calls and the like.