Support NeoGAF

[Somnid]

Yeah, but somehow I thought that Promise.catch() was simply the Promise.reject()'s callback, not the actual catch of an implicit throw-catch block wrapping everything.

This way, what would be the best practice to keep the catched error to show in the console? Should I just do something like this?

// ...
.catch(response => {
  console.error(response.message);
});

(and, well, I guess also change the "message" property name, to stop overriding Error.message with the actual description of the response)

Pretty much. Note that it'll handle all exceptions/rejections for the chain so you might get different data shapes. Otherwise handle exceptions where they happen.

 

[The Albatross]

Latest version of MigrateDB Pro was just released today: https://deliciousbrains.com/wp-migrate-db-pro-1-6-released/

Probably my most critical plugin as a WordPress developer. Makes deploying from local -> stage -> prod a breeze, and I can't imagine the hoops I had to jump through before using it. I've got a 20% referral coupon if anybody is interested. Full discloser, this is through their affiliate program, but I do genuinely love the plugin and use it on every WordPress site I develop for clients.

 

[phillipgessert]

Is it possible, with Emmet (or similar) to apply sequential ID numbers to a list that already exists? Basically, this:

ul>li.item$*5

…but instead of expanding into a brand-new list, it applies to a list that's already been made.

I'm working with an ebook that has around 1000 misnumbered footnotes, so the links leading to and from them are broken unless I can find a way to attach id="fn1" (…id="fn1000") to each one. Ebooks (basically) don't support JS, so sadly that is not an option. Hoping there's a method I can use that will keep human error to a minimum, since I'm bound to make mistakes if I do it manually.

Edit: if anyone comes across this later, I am fairly certain I'll be solving this with a Sublime plugin called Text Pastry.

 

[Copons]

Pretty much. Note that it'll handle all exceptions/rejections for the chain so you might get different data shapes. Otherwise handle exceptions where they happen.

Eh, I noticed the behaviour not because of an unhandled exception but for a typo in a query selector.
So there was this jarring moment where the app was stuck, I was staring the console waiting for the error, but the error was instead in a fading-out popup, that already disappeared.



EDIT:
also, as my game is almost completed (there's a very annoying and hard to debug issue, and, well, I should code the endgame scene sooner or later...), I've decided to start looking to convert it to React/Redux, so to finally learn this whole thing.
And whoa, after reading a bit about Redux with everything I've learned in the last several months, holy shit, I've basically violated every single possible best practice!
It'll be hard as hell, but it's definitely a much needed challenge for someone like me, who kinda sorta hate the fact that every single tutorial out there is a fucking Todo app.

 

[Lister]

Eh, I noticed the behaviour not because of an unhandled exception but for a typo in a query selector.
So there was this jarring moment where the app was stuck, I was staring the console waiting for the error, but the error was instead in a fading-out popup, that already disappeared.



EDIT:
also, as my game is almost completed (there's a very annoying and hard to debug issue, and, well, I should code the endgame scene sooner or later...), I've decided to start looking to convert it to React/Redux, so to finally learn this whole thing.
And whoa, after reading a bit about Redux with everything I've learned in the last several months, holy shit, I've basically violated every single possible best practice!
It'll be hard as hell, but it's definitely a much needed challenge for someone like me, who kinda sorta hate the fact that every single tutorial out there is a fucking Todo app.

Barely fmailiar with Redux, but managing state in that way sound sinteresting. I wonder if/how it would work with angular.

 

[Copons]

Barely fmailiar with Redux, but managing state in that way sound sinteresting. I wonder if/how it would work with angular.

Put it all in the $rootScope -> ??? -> PROFIT!

 

[Lister]

Put it all in the $rootScope -> ??? -> PROFIT!

::dies::

 

[Copons]

Speaking of Redux, while I'm planning how to apply it in my app, I'm having a couple of doubts that maybe some of you could answer (also: I've yet to read half of Redux docs, so a RTFM answer would be quite appropriate ).


Now, wouldn't a state become really, really huge in complex apps (or apps with a lot of "moving parts")?
And wouldn't this be a problem if I share the state between client and server, with all the passing back and forth of the entire state every single time even the tiniest thing changes?

Also, in my case, how should I handle a multiplayer game, where the state is (I think?) shared between all clients, but each client just needs to know about just a fraction of it (ie. the state contains the list of all games running, but each client just need to know about its own game)?

This said, my thought was of splitting the state in more manageable parts.
One way could be to split it "logically", like, there's no need to clutter the state handling the app lobby, with the one handling the app games (not actually true, but let's say it's like this for the sake of the example).
Another way could be that the server sends to the client(s) only a fraction of the entire state (ie. just what actually changed).

Fact is, both these ways make me feel I'm not adhering to Redux principles.

 

[Haly]

I'm not a redux expert by any means but wouldn't you send the actions over the network rather than the state tree?

The only time when you'd need to send a whole state tree is when a client connects for the first time and, I guess, occasionally when you want to sync everyone up.

 

[PetriP-TNT]

I'm not a redux expert by any means but wouldn't you send the actions over the network rather than the state tree?

The only time when you'd need to send a whole state tree is when a client connects for the first time and, I guess, occasionally when you want to sync everyone up.

You are correct.

Also the "really really" huge state is an non issue until some extremely major cases due to the reducer composition pattern Redux has.

 

[Copons]

I'm not a redux expert by any means but wouldn't you send the actions over the network rather than the state tree?

The only time when you'd need to send a whole state tree is when a client connects for the first time and, I guess, occasionally when you want to sync everyone up.

You are correct.

Also the "really really" huge state is an non issue until some extremely major cases due to the reducer composition pattern Redux has.

It makes sense, but this way, won't I end up writing the same (or, well, quite similar) Redux logic twice?

Spoiler

inb4 you tell me to learn about isomorphic Redux

 

[Haly]

Your client stores would look like a subset of your server stores, yes, if that's what you mean. I don't think that's avoidable. Every network game is like this.

I guess you could send out state trees if your state trees are very small, or your game runs based on discrete intervals (rather than a continuous stream), so you would only ever need to send out the tree in response to an action. I think this falls into the realm of server-side rendering? It's conceivable if you want to keep your clients really dumb but it's not practical for every kind of game.

 

[Copons]

Your client stores would look like a subset of your server stores, yes, if that's what you mean. I don't think that's avoidable. Every network game is like this.

I guess you could send out state trees if your state trees are very small, or your game runs based on discrete intervals (rather than a continuous stream), so you would only ever need to send out the tree in response to an action. I think this falls into the realm of server-side rendering? It's conceivable if you want to keep your clients really dumb but it's not practical for every kind of game.

Well, the idea is to replicate a turn based board game (Ticket to Ride), so there is no need for a continuous stream, but rather, sending back and forth just the small parts of the state that changed after each player action (ie. draw a card, use a card, change turn, etc.).

When I started developing this project I wasn't paying any attention at the server side (mostly because this is my very first project involving Express and Socket.io), so I wrote most of the logic client-side, only to realize later that a big part of it wouldn't make any sense at all in a multiplayer game (ie. the deck has to be the same for everybody).

It was a big chore to move stuff from client to server, but hey, even if it got very messy, it works surprisingly fine and right now I'm just rushing toward completing it so that I can rewrite everything in React/Redux.

 

[jokkir]

Found this while looking at BEM methodology stuff

lol

 

[PetriP-TNT]

WebExtensions is now stable on Firefox 48, sweet:

https://blog.mozilla.org/addons/2016/04/29/webextensions-in-firefox-48/

Also Steam updated to Chromium 49 which is kinda interesting.

 

[Copons]

Wowee, implementing Redux server-side was super easy and fun, but holy shit doing it client-side, while at the same time learning React, with the utter lack of tutorials involving class Components (the only way I found to make HMR work... don't know why, but I spent way too much time playing with the build system), it's actually quite hard.

React -> Redux -> React-Redux -> Redux-Thunk -> ??? -> CRYING

 

[PetriP-TNT]

Wowee, implementing Redux server-side was super easy and fun, but holy shit doing it client-side, while at the same time learning React, with the utter lack of tutorials involving class Components (the only way I found to make HMR work... don't know why, but I spent way too much time playing with the build system), it's actually quite hard.

Redux and class components (that extend React.Component) work exactly the same way as stateless components do (though Redux reduces the need of having non-top level stateful components) but I kinda agree that jumping on to Redux without knowing React inside out will be painful. You might want to take a step back and leave Redux alone for a while, but then again you have already dove in so it might not be worth it that point.

Have you watched the Redux video series by @gaeron at Egghead (https://egghead.io/series/getting-started-with-redux)? It's a beginner tutorial of sorts, but it does dive in deep to the concepts of Redux in a way that you actually implement methods of Redux yourself and eventually refactor everything to as stateless components as possible (smart containers, dumb components).

 

[Copons]

Redux and class components (that extend React.Component) work exactly the same way as stateless components do (though Redux reduces the need of having non-top level stateful components) but I kinda agree that jumping on to Redux without knowing React inside out will be painful. You might want to take a step back and leave Redux alone for a while, but then again you have already dove in so it might not be worth it that point.

Have you watched the Redux video series by @gaeron at Egghead (https://egghead.io/series/getting-started-with-redux)? It's a beginner tutorial of sorts, but it does dive in deep to the concepts of Redux in a way that you actually implement methods of Redux yourself and eventually refactor everything to as stateless components as possible (smart containers, dumb components).

I've watched roughly half of it (I dropped out as soon as he starts talking about my personal nemesis: the dreaded todo tutorial ), but it seems that (part of) the Redux docs are basically a written version of that course, todo included.

Unfortunately the second half is the one where he talks about React, but using functions instead of classes (which I prefer mostly because I couldn't get function components to hot reload), and as I know basically nothing about React, it's just too confusing to follow and convert from one notation to another.

So eh, I guess I'm bound to step back and actually learn proper React before going back to React-Redux.


EDIT
just wanted to say that, thanks to the free weekend, I decided to get back into Abramov's video tutorial and, well, I'm like 3/4 in, and it's feeling great.

Don't know why, but now even stateless functional components hot reload (not all of them, though: there's this functional component inside a class one that just fully refresh the page... but oh well...).

And, I'm learning so much about React per se, especially thanks to eslint-plugin-react's recommended settings, that forces me to constantly look up the React docs to understand what's wrong, why it's wrong and how to fix it.

Can't wait to get to the final part, where he's gonna explain React-Redux!

 

[WanderingWind]

Quick question. Is there any actual difference between "onclick" and "onClick"?

 

[runningjoke]

Quick question. Is there any actual difference between "onclick" and "onClick"?

In pure JS onClick will not work:

document.getElementById('foo').onClick = (e) => console.log(e); // nothing happens

document.getElementById('foo').onclick = (e) => console.log(e); // logs the event

if you use camelCase in your HTML tag your browser will lower the case and it'll work.

 

[WanderingWind]

In pure JS onClick will not work:

document.getElementById('foo').onClick = (e) => console.log(e); // nothing happens

document.getElementById('foo').onclick = (e) => console.log(e); // logs the event

if you use camelCase in your HTML tag your browser will lower the case and it'll work.

Ah, thanks. That explains it. Appreciate it.

 

[Lister]

What are you guys using to automate integration testing across a large variety of browsers and mobile devices?

Been having a hard time finding solutions outside of something like browserstack, and some portions of our apps need to work accross a huge swath of stuff.

 

[imBask]

we're in the final stretch of QA for this huge website, for which the PM told us it was one of our "latest browser supported" contract

apparently it's not

IE9 and IE10, flexbox, angular, etc.

/dying

 

[Somnid]

we're in the final stretch of QA for this huge website, for which the PM told us it was one of our "latest browser supported" contract

apparently it's not

IE9 and IE10, flexbox, angular, etc.

/dying

This is often good because when they realize it's going to delay the product and cost a lot of money they are actually forced to check whether it's truly important or not and often they'll drop it under pressure. If not, IE9 lolololololol.

 

[imBask]

This is often good because when they realize it's going to delay the product and cost a lot of money they are actually forced to check whether it's truly important or not and often they'll drop it under pressure. If not, IE9 lolololololol.

Well not really, it's technically OUR mistake because the PM gave US the wrong information. The contract states IE9 and 10

that PM also left the company a week ago

 

[Lister]

Well not really, it's technically OUR mistake because the PM gave US the wrong information. The contract states IE9 and 10

that PM also left the company a week ago

Ouch.

 

[The Albatross]

Well not really, it's technically OUR mistake because the PM gave US the wrong information. The contract states IE9 and 10

that PM also left the company a week ago

Damn...

That PM might have to fall on their sword and request whether IE9 and 10 were real requirements for a specific business case, or whether they just suggested those as "recent versions of IE."

IE10 has such low browser usage numbers... Less than both IE9 and IE8 individually. IE10 has somewhere around less than 1.5% of internet traffic. And if you isolate that to a key market, like the US and Europe, it's even lower. While IE9 has higher browser usage than IE10, an effective PM can argue the IE10 point of view and "say how IE10 has less than 1.5% of the total browser share, so did you mean 'IE Latest' in your requirements or is there a specific need for IE10 and IE9?"

 

[imBask]

update : we've talked to them and we're going to update the contract to the modern standard, as long as we put a notice on older device

Bullet status : dodged

 

[SuperEpicMan]

I am currently having a little trouble creating something a client has asked for. They basically have an about us page which is responsive and will be full screen. It will also have a background image similar to this:

They want me to put images of people in the frames which is easy enough. But they want each face to be a link to bring up a modal telling you more about that person. They also want to be able to hover over a picture and for it to have a semitransparent overlay with "View Profile" on it. I am really struggling to work out how to achieve this, as I have tried placing hidden divs over the image, but due to it not being a fixed size, the div positioning is screwed up when the window is resized.

Does anyone who if this idea is even possible. I kinda think it must be but I can't even find a good example of it being done elsewhere.

 

[runningjoke]

I'd suggest using a background image that's just a texture, and put the pictures on top of that. Maybe try border-image for the picture frames. That way you can move/scale/animate them on any screen.

 

[SuperEpicMan]

I'd suggest using a background image that's just a texture, and put the pictures on top of that. Maybe try border-image for the picture frames. That way you can move/scale/animate them on any screen.

I have suggested that, but they are pretty stubborn on what they want. They said they have seen more complex and interactive things on websites before and they don't understand why this can't be achieved.

 

[Afro]

Really quick HTML noob question!

I made a template (.jpg) in Photoshop for my eBay listings. It's about 1000x3000 px. Will this image scale to fit the buyers' screen no matter what res they're using or do I need to add some type of "scale 100%" code?

Right now I'm just using:

<img src="http://abload.de/img/blah.jpg"/>

This is all I need to use? Thanks, I appreciate it greatly!

 

[Somnid]

I am currently having a little trouble creating something a client has asked for. They basically have an about us page which is responsive and will be full screen. It will also have a background image similar to this:

They want me to put images of people in the frames which is easy enough. But they want each face to be a link to bring up a modal telling you more about that person. They also want to be able to hover over a picture and for it to have a semitransparent overlay with "View Profile" on it. I am really struggling to work out how to achieve this, as I have tried placing hidden divs over the image, but due to it not being a fixed size, the div positioning is screwed up when the window is resized.

Does anyone who if this idea is even possible. I kinda think it must be but I can't even find a good example of it being done elsewhere.

So a 100% x 100% div with background size cover and absolutely positioned divs by percent.

 

[SuperEpicMan]

So a 100% x 100% div with background size cover and absolutely positioned divs by percent.

That squishes the pictures through. I was thinking of making the background size: cover with position in the centre.

 

[imBask]

That squishes the pictures through. I was thinking of making the background size: cover with position in the centre.

but then you'd have to mess around with your links to follow the size of your background and that won't be easy

anything is possible but this might imply using some weird javascript to resize your links and reposition everything constantly when resizing

 

[SuperEpicMan]

I have also found this:

https://github.com/davidjbradshaw/image-map-resizer

But I cannot get it to work :/ Nor does the example look 100% accurate.

 

[Lister]

I have suggested that, but they are pretty stubborn on what they want. They said they have seen more complex and interactive things on websites before and they don't understand why this can't be achieved.

I would do the whole thing in js in order to make sure I'm moving the overlays exactly where they need to go.

Make the image a background of a div with absolute positioning that is the sie and width of the viewport. Figure out the ratio of the positions and widths of each frame relative to the base size of the image, and bind a funciton to the window resize event that recalculates the position and size based on these ratios, then places the overlay divs in their correct positions and resizes appropriately.

 

[imBask]

I have suggested that, but they are pretty stubborn on what they want. They said they have seen more complex and interactive things on websites before and they don't understand why this can't be achieved.

that's when you explain to them in a language they can understand : money. Tell them it's a really complicated thing that'll take you days and it's an extra

 

[Somnid]

That squishes the pictures through. I was thinking of making the background size: cover with position in the centre.

Squishes how? If everything is measured in percents and the outer image scales correctly so will all the inner pieces. You can also use 4 sided positioning and not calculate widths.

 

[D4Danger]

I am currently having a little trouble creating something a client has asked for. They basically have an about us page which is responsive and will be full screen. It will also have a background image similar to this:

http://i.stack.imgur.com/v2CPD.jpg[IMG]

They want me to put images of people in the frames which is easy enough. But they want each face to be a link to bring up a modal telling you more about that person. They also want to be able to hover over a picture and for it to have a semitransparent overlay with "View Profile" on it. I am really struggling to work out how to achieve this, as I have tried placing hidden divs over the image, but due to it not being a fixed size, the div positioning is screwed up when the window is resized.

Does anyone who if this idea is even possible. I kinda think it must be but I can't even find a good example of it being done elsewhere.[/QUOTE]

use svg

 

[SuperEpicMan]

Squishes how? If everything is measured in percents and the outer image scales correctly so will all the inner pieces. You can also use 4 sided positioning and not calculate widths.

When I put it as 100% 100% it makes the whole picture fit into the window no matter what size it is, so it distorts it.

 

[Somnid]

When I put it as 100% 100% it makes the whole picture fit into the window no matter what size it is, so it distorts it.

Maybe this can get you started: https://jsfiddle.net/p2f379xb/

 

[imBask]

I keep forgetting about vw and vh, it's so useful

 

[SuperEpicMan]

I have tried the vw and vh technique and it has gotten it closer, but is still goes out of synch when I resize horizontally and vertically (opposed to diagonally which looks good).

 

[Somnid]

I have tried the vw and vh technique and it has gotten it closer, but is still goes out of synch when I resize horizontally and vertically (opposed to diagonally which looks good).

You can only fix it in one direction (that is one dimension will be 100% the other will vary based on the ratio of the fixed dimension). If the aspect ratio of the screen does not match the image you either need to letterbox or crop to maintain the aspect ratio.

 

[SuperEpicMan]

Is it possible to determine how much the image is scaled when I use "background-size: cover" and how much of the image is hidden as overflow. I am thinking if I can this out, I could maybe use JS to adjust the div size and positioning.

 

[WanderingWind]

use svg

I'm curious as to why everybody else is glossing over this answer. I'm not an expert, but this is how I'd do it. Then all the coding you'd have to worry about is sticking a CSS hover state over the pictures in the SVG code for the "view profile" and implementing a basic JS lightbox/modal. I've used something very similar for maps of areas with dozens of selectable counties.

That being said, I'm assuming y'all know more than me and there is some reason this isn't being used.

 

[SuperEpicMan]

I'm curious as to why everybody else is glossing over this answer. I'm not an expert, but this is how I'd do it. Then all the coding you'd have to worry about is sticking a CSS hover state over the pictures in the SVG code for the "view profile" and implementing a basic JS lightbox/modal. I've used something very similar for maps of areas with dozens of selectable counties.

That being said, I'm assuming y'all know more than me and there is some reason this isn't being used.

I haven't really used SVG before, do you mean I would need an SVG version of the background image?

 

[WanderingWind]

I haven't really used SVG before, do you mean I would need an SVG version of the background image?

Yeah, pretty much. You'd want to make the SVG in Illustrator or similar program. It'd have the picture frames with the staff photos already inside them. So, it'd look visually how it would look on the site. When you export it out as an SVG, you'd want to run it through an SVG simplifier (minifier?) like this.. Once that's done, you just style and use your lightbox/modal solution of choice. Using an SVG guarantees uniform performance across all devices and sizes, it's responsive and it's super simple.

I say this all as an amateur guy, but again, it's a solution I've used for a relatively similar project. Except mine was a map of the Pacific region with some prefectures of Japan interactive. But it's the same exact concept, if I'm understanding you correctly.

 

[SuperEpicMan]

I thought SVG images are kinda like outlines and you then fill it with a colour etc, would it be possible to make one with a regular image? Also how do I align my divs with them?