Web Design and Development |OT| Pixel perfect is dead, long live responsive design

Somnid said:
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.
Click to expand...

Hey, neat! Thanks for the tip, I wasn't aware of that.
 
Kalnos said:
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.
Click to expand...

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.
 
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.
 
Kalnos said:
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.
Click to expand...

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.
 
I'm now in love with javascript generators in general and redux-saga in particular.

Getting rid of all those callbacks feels so good.
 
PetriP-TNT said:
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
Click to expand...

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- said:
any thoughts on elixir and the phoenix framework? i'm thinking about trying it out for a side project.
Click to expand...

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.
 
Kalnos said:
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.
Click to expand...

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?
 
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.
 
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:
Code: 
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);
  }

}
 
Copons said:
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:
Code: 
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);
  }

}
Click to expand...

You mostly likely meant

Code: 
  doSomething() {
    document.addEventListener('click', this.logOnClick);
  }
¨
Consider something like this:

Code: 
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:

Code: 
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
 
PetriP-TNT said:
You mostly likely meant

Code: 
  doSomething() {
    document.addEventListener('click', this.logOnClick);
  }
Click to expand...

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

Consider something like this:

Code: 
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"?
Click to expand...

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

Additionally, consider this:

Code: 
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?
Click to expand...

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
Click to expand...

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.
 
Copons said:
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.
Click to expand...

It's not counter-intuitive if you need to make sure that "this" is the "this" you think it is.
 
I for myself don't overwrite the class methods but add the bindings to the callback argument.

Code: 
    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.
 
grmlin said:
I for myself don't overwrite the class methods but add the bindings to the callback argument.

Code: 
    document.getElementById("btn").addEventListener('click', this.logOnClick.bind(this));
Click to expand...

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.
Click to expand...

Do you mean something like this?

Code: 
 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.
 
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.
 
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 said:
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.
Click to expand...

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


Maaaan, sometimes I seriously miss the good ol' jQuery days. :D
 
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.

Code: 
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

Code: 
[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.
 
grmlin said:
When writing functions with fat arrows, your context, this, is preserved.
Click to expand...

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

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

Does it "simply" override the class this with the method scope one?
 
What would be the best way to make a clickable tree for a website?
Something a bit like this:
Tree-Diagram-2.png

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?
 
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.
 
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 said:
What would be the best way to make a clickable tree for a website?
Something a bit like this:
Tree-Diagram-2.png

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?
Click to expand...
Just an update to say I think I solved it by using an SVG.
 
Somnid said:
wrote: calc(100% + 2px)
less rewrote that as: calc(102%)
solution: ~"calc(100% + 2px)"

Welp, it's SASS from here on out.
Click to expand...

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


also wtf, between SCSS and PreCSS I totally don't remember what's what anymore. :'(
 
WanderingWind said:
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.
Click to expand...

True developers write their SVG manually
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 :D
 
Copons said:
True developers write their SVG manually
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 :D
Click to expand...

I uh, draw mine in Illustrator and then export them. lol
 
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.

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


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

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

Code: 
@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.
 
PetriP-TNT said:
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:

Code: 
@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.
Click to expand...

Can it?
I sort of remember having to interpolate variables to use them inside a calc.
Like:
Code: 
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.
 
Copons said:
Can it?
I sort of remember having to interpolate variables to use them inside a calc.
Like:
Code: 
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.
Click to expand...

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
 
Copons said:
Can it?
I sort of remember having to interpolate variables to use them inside a calc.
Like:
Code: 
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.
Click to expand...

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
 
grmlin said:
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
Click to expand...

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. :P
 
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.
 
Well, Elliot does not like classes and inheritance in general, I think. :D


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.
 
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.
 
runningjoke said:
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.
Click to expand...

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.
 
You must log in or register to reply here.

Similar threads

Sports betting |OT|
7
11K
Hideous Snake replied
ItalianGAF |OT| - Italia
3
1K
Azzurri replied
Food |OT| GAFeteria
2
77
17K
SLoWMoTIoN replied
Tabletop & Board Game Design |OT1| By Peoples for Meeples
2
50
7K
RelentlessRolento replied
Supergirl S3 |OT| Long May She Reign - Mondays 8/7c on The CW
4 5 6 7 8
361
47K
Grizzlyjin replied
Top Bottom