Support NeoGAF

[TheSeks]

Huh, that Youtube was super simple to follow along with.

So basically you use flexbox to make a container and then put the items in and they'll wrap versus trying to do wells or set up the same thing in Bootstrap. I'm curious if I should do the entire site in Flexbox or if it can be self-contained and only called on a particular container/section.

 

[PetriP-TNT]

Huh, that Youtube was super simple to follow along with.

So basically you use flexbox to make a container and then put the items in and they'll wrap versus trying to do wells or set up the same thing in Bootstrap. I'm curious if I should do the entire site in Flexbox or if it can be self-contained and only called on a particular container/section.

(- Bootstrap 4 has flexbox mode)
- Flexboxed components can be self-contained, but as you already use flexbox you might as well use it everewhere you can/need to because of... ->

I know how to use position elements otherwise, but is Flexbox supported enough that I can use it as my main method?

It depends. If you target modern browsers (Firefox, Chrome, IE>=11, newer mobile browers) then yes. But there are some quirks, especially with IE11 which is why you should be aware of flexbugs, what causes them and how to fix them (or let others do it for you.

 

[TheSeks]

Well, I'm still using your two by two bootstrap design because it works.

Problem is, images scrolling up and eating the navbar I have. The first section is fine, but once it hits the images in your divisions it'll eat the nav bar until past them. I have no clue why.

 

[Hydrogen Bluebird]

Hope GAF can help me out on this. I'm working on a site which has several HTML5 components and unfortunately, users who browse the site using the Facebook for iOS in-app browser experience display/functionality errors. Is there a way I can make my site's shared links on facebook recognize (maybe via user agent) that when they're clicked using the FB for iOS app, the links to my site open in the default device browser instead of the FB in-app browser? Thanks.

 

[Copons]

Hope GAF can help me out on this. I'm working on a site which has several HTML5 components and unfortunately, users who browse the site using the Facebook for iOS in-app browser experience display/functionality errors. Is there a way I can make my site's shared links on facebook recognize (maybe via user agent) that when they're clicked using the FB for iOS app, the links to my site open in the default device browser instead of the FB in-app browser? Thanks.

I don't think you can force a user to make FB open the proper browser instead of its own in-app version. That's something the user has to opt-out from the FB settings.

Anyway, I'm fairly sure the in-app browser uses the same rendering engine of the OS, so on iOS the Safari one and on Android the Chrome one.
Does the site work fine on iOS Safari?

 

[WanderingWind]

God, I want to use space-around so badly. Why did god allow IE9 to exist?

 

[PetriP-TNT]

God, I want to use space-around so badly. Why did god allow IE9 to exist?

Solution: Stop supporting unsupported browsers.

As long as people are willing to go out of their way to support legacy crap, legacy crap will never go away.

 

[WanderingWind]

Solution: Stop supporting unsupported browsers.

As long as people are willing to go out of their way to support legacy crap, legacy crap will never go away.

I wish I had that sort of authority. It would be awesome.

 

[PetriP-TNT]

I wish I had that sort of authority. It would be awesome.

Hunger strike? "WanderingWind will not eat until BigCorpXY stops using IE9"

 

[WanderingWind]

Hunger strike? "WanderingWind will not eat until BigCorpXY stops using IE9"

I just want to hang out and do flexbox things with my friends.

 

[Wolf Akela]

I'm glad we only support Firefox and Chrome. Our website doesn't render well in IE.

I still encounter BS from either of them though. Like, Chrome suddenly had issues with our JS where one part just doesn't run at all. The kicker is that it happens randomly only on some PCs. A few clients consistently reported it, but others don't experience it at all. I tried to replicate the issue as much as I could on my PC, down to the OS and even hardware out of desperation but it wouldn't happen. Ended up trying it on every single PC at work till I found one where I could replicate it.

The previous and next version of Chrome have zero issue. Every single other browser and platform worked fine. We couldn't figure out how to patch it up with affecting other parts of the code just for this edge case so we told people to install Firefox. It eventually went away, but I couldn't find anything online about the issue.

 

[Somnid]

I'm glad we only support Firefox and Chrome. Our website doesn't render well in IE.

I still encounter BS from either of them though. Like, Chrome suddenly had issues with our JS where one part just doesn't run at all. The kicker is that it happens randomly only on some PCs. A few clients consistently reported it, but others don't experience it at all. I tried to replicate the issue as much as I could on my PC, down to the OS and even hardware out of desperation but it wouldn't happen. Ended up trying it on every single PC at work till I found one where I could replicate it.

The previous and next version of Chrome have zero issue. Every single other browser and platform worked fine. We couldn't figure out how to patch it up with affecting other parts of the code just for this edge case so we told people to install Firefox. It eventually went away, but I couldn't find anything online about the issue.

What was the issue? If someone described that to me I'd immediately think "race condition."

 

[Zakalwe]

http://fashion.tetrisforkicks.com/

I built a new template for future builds. I've got a few jobs lined up over the next few months, so I'm trying to build as many of my own frames as possible that I can adapt as need be.

It needs refining still, which I'd do if I applied it to a proper site. Typography, mobile level, some other media query stuff.

All critiques welcome.

 

[Cptkrush]

http://fashion.tetrisforkicks.com/

I built a new template for future builds. I've got a few jobs lined up over the next few months, so I'm trying to build as many of my own frames as possible that I can adapt as need be.

It needs refining still, which I'd do if I applied it to a proper site. Typography, mobile level, some other media query stuff.

All critiques welcome.

I really like this.

One thing I noticed, but I'm not sure if it was intentional or not: are the images supposed to shake when they shrink on hover?

 

[Zakalwe]

I really like this.

One thing I noticed, but I'm not sure if it was intentional or not: are the images supposed to shake when they shrink on hover?

Thanks mate. :3

They're really not... I'm trying to emulate it and I can't. What are you viewing it with?

Is anyone else seeing this? Might be a headache for me if so... ;_;

 

[Ikuu]

http://fashion.tetrisforkicks.com/

I built a new template for future builds. I've got a few jobs lined up over the next few months, so I'm trying to build as many of my own frames as possible that I can adapt as need be.

It needs refining still, which I'd do if I applied it to a proper site. Typography, mobile level, some other media query stuff.

All critiques welcome.

Use background-size: cover; for the header, it'll stop the header from messing up as you resize the window down.

Personally I think items should come alive when you hover on them.

I'd also change it so you have from 3 > 2 > 1 articles wide as you decrease the viewport, rather than going from 3 > 1.

 

[Cptkrush]

Thanks mate. :3

They're really not... I'm trying to emulate it and I can't. What are you viewing it with?

Is anyone else seeing this? Might be a headache for me if so... ;_;

I'm using my desktop with chrome. Are you using css transitions? Whenever I try to resize things with those they tend to shake a bit, and it's the dumbest thing. So I wonder if it's just my pc or if chrome has issues with it.

 

[Zakalwe]

Use background-size: cover; for the header, it'll stop the header from messing up as you resize the window down.

Personally I think items should come alive when you hover on them.

I'd also change it so you have from 3 > 2 > 1 articles wide as you decrease the viewport, rather than going from 3 > 1.

1. I added "cover". I forgot about that, looks much better now.

2. I agree. The fade is just a place-holder. I have my own overlays animations (also on my main site) that I'm going to add eventually.

3. I'm a bit tired, so your last comment I'm not understanding. Can you talk to me like I know nothing?

Thank you for the feedback.

I'm using my desktop with chrome. Are you using css transitions? Whenever I try to resize things with those they tend to shake a bit, and it's the dumbest thing. So I wonder if it's just my pc or if chrome has issues with it.

It's all HTML/CSS yeh. No one else has commented on the shakes, so I think it might be you... ;_;

 

[Ikuu]

As you decrease the size of the page the number of articles goes straight from 3 to 1, I'd have it go from 3 to 2 to 1, so the image size doesn't get so small.

 

[Zakalwe]

As you decrease the size of the page the number of articles goes straight from 3 to 1, I'd have it go from 3 to 2 to 1, so the image size doesn't get so small.

Gotcha.

Good thinking. I'll set up the medium width to 6/6 columns.

It's currently: Large - 4/4, Medium - 4/4, Small - 1/1.

 

[PetriP-TNT]

Recommended reading stuff: https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

 

[Somnid]

Recommended reading stuff: https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

I always wondered why literally every corporate website is blue. I guess it's just best practice.

 

[PetriP-TNT]

I always wondered why literally every corporate website is blue. I guess it's just best practice.

Blue is just a Neat Color^TM in general, as it (or shades of it) can easily represent so many different things: something calm, something energizing, something strong... Have you ever tried to find a calm red that's noticeably red, not whitish pink?

Smashing Magazine has an older article about general color theory too: https://www.smashingmagazine.com/20...rt-1-the-meaning-of-color/#blue-primary-color

 

[Somnid]

Blue is just a Neat Color^TM in general, as it (or shades of it) can easily represent so many different things: something calm, something energizing, something strong... Have you ever tried to find a calm red that's noticeably red, not whitish pink?

Smashing Magazine has an older article about general color theory too: https://www.smashingmagazine.com/20...rt-1-the-meaning-of-color/#blue-primary-color

But objectively you'd think they'd gravitate toward green. There's some weird cultural thing probably generations old that's affecting it. I actually like T-mobile's color scheme, it's clear they didn't just choose the least offensive option and it super iconic as a result.

 

[WanderingWind]

It was all a dream...

On the color scheme deal, I always end up using blue because it's the only scheme everybody agrees on. My personal site is going to be orange because fuck blue forever and ever. Color schemes fall in and out of fashion, though, so I'm just standing by for puce to take over web colors.

 

[Haly]

I'm partial to the green/blue aquatic look.

 

[Daffy Duck]

Everything is blue.

 

[Prime crotch]

I just want to say, to whoever still thinks people use ie9 and force me to support it, eff off.

Also, I'm starting to think I should have my own custom form elements library made, cause textareas and selects are fuckin worthless these days.

 

[grmlin]

I just want to say, to whoever still thinks people use ie9 and force me to support it, eff off.

Also, I'm starting to think I should have my own custom form elements library made, cause textareas and selects are fuckin worthless these days.

Wat? Native form elements are the only acceptable choice.

 

[Prime crotch]

Wat? Native form elements are the only acceptable choice.

The trouble that comes with styling them and adding some bells and whistles is such a pain.

 

[Zakalwe]

Pitchspork

-

A mock-up of a music/media site. Just a single page, but I might expand on it for practice/fun.

Screw it, I'm waiting for files for our current job so I added a few pages.

Now has a home page and a reviews page. Each album cover links to a review page. Scales down to mobile. Really fun coding this.

 

[grmlin]

The trouble that comes with styling them and adding some bells and whistles is such a pain.

There are few occasions where I accept a replacement for native inputs. Something like huge, searchable, selects. Anything else has to be native, mobile devices HATE everything else.

 

[The Albatross]

The trouble that comes with styling them and adding some bells and whistles is such a pain.

The bells and whistles aren't worth the intrinsic usability concerns by introducing your own form elements.

I think this is something that designers and design-developers often lose sight of. If your website provides something that people want, designing something to the point of breaking its expected behavior is something that will drive visitors away.

 

[Somnid]

Huh, I didn't know template strings could take a template function of sorts. It's kinda weird but there's also a pretty good use for it: https://jakearchibald.com/2016/streaming-template-literals/

 

[PetriP-TNT]

Huh, I didn't know template strings could take a template function of sorts. It's kinda weird but there's also a pretty good use for it: https://jakearchibald.com/2016/streaming-template-literals/

Template Strings are my second favorite es2015 feature (after destructuring) and tagged template strings are really need, albeit a bit hard to use effectively (mostly because the signature is kinda weird, like the article mentions)

 

[Prime crotch]

There are few occasions where I accept a replacement for native inputs. Something like huge, searchable, selects. Anything else has to be native, mobile devices HATE everything else.

All I want is for stuff like selects or textareas to behave like other elements when I say height =16px. Not have to mess with line-heights and font-size rations.

 

[Syphon Filter]

Anyone know how I can put a working form on a website that is just html and css? Some sort of premade code template or something? Also what about apis like twitter,pinterest,etc?

 

[grmlin]

Anyone know how I can put a working form on a website that is just html and css? Some sort of premade code template or something? Also what about apis like twitter,pinterest,etc?

What do you mean? A form is a form, you don't have to style it?

You'll need some backend/endpoint to post it to though.

 

[Somnid]

Anyone know how I can put a working form on a website that is just html and css? Some sort of premade code template or something? Also what about apis like twitter,pinterest,etc?

Yes. Forms can post cross-origin so you just need an endpoint (but you don't have to provide it). You can do some APIs, it depends if they support CORS or not but you will have to expose your secret key otherwise there's often drop-in iframe controls for that sort of stuff that shouldn't require code.

 

[Prime crotch]

I need to document a config.json file for an app, and I mean something parseable for other humans to read. Any good documentation generators that mine a json or a json schema file?

 

[Haly]

For npm wizards...

React15 is out. Tried to update my packages via npm. I thought it'd be as simple as

npm update react --save

But apparently it isn't? The unmet peer dependencies of react-addons-test-utils and react-dom causes every update or install to result in react@14.8.

Eventually what I did was uninstall react entirely, then reinstall it, followed by:

npm install --save react-dom@15.0.1 react-addons-test-utils@15.0.1

I tried a lot of things and basically brute forced my way past the errors but why does this happen and what's the proper way of doing this?

 

[PetriP-TNT]

For npm wizards...

React15 is out. Tried to update my packages via npm. I thought it'd be as simple as

npm update react --save

But apparently it isn't? The unmet peer dependencies of react-addons-test-utils and react-dom causes every update or install to result in react@14.8.

Eventually what I did was uninstall react entirely, then reinstall it, followed by:

npm install --save react-dom@15.0.1 react-addons-test-utils@15.0.1

I tried a lot of things and basically brute forced my way past the errors but why does this happen and what's the proper way of doing this?

That should work though.

1. Remove React and ReactDOM with NPM uninstall react react-dom --save
2. Make sure they are gone from package.json. NPM doesn't let you do upgrade semver major changes (0.14 -> 15.0.0) automatically.
3. Reinstall with npm install react react-dom --save

TestUtils isn't a peer dep for React nor ReactDOM so it's most likely some another lib that's complaining about it not being met.

 

[jokkir]

Grunt vs Gulp, which do you think is better/which one do you prefer to use? I somewhat know Gulp but there's also Grunt out there (or even other task runners out there)

 

[runningjoke]

Grunt vs Gulp, which do you think is better/which one do you prefer to use? I somewhat know Gulp but there's also Grunt out there (or even other task runners out there)

Webpack is the current hotness. Of course it depends on what you need it to do. Key selling point for webpack is that you can split up your app in different modules so you can keep the initial page load as small as possible.

If you already have a build step set up in Grunt and it works for you I don't think you need to switch

 

[Somnid]

Grunt vs Gulp, which do you think is better/which one do you prefer to use? I somewhat know Gulp but there's also Grunt out there (or even other task runners out there)

Gulp. Gulp is faster and specifies a best practice for plugins that all the major ones follow. This makes it much cleaner and understandable as it's not littered with config objects.

 

[Cptkrush]

Speaking of Gulp, I just recently started using a workflow that was more than just HTML and SASS/SCSS. Thanks to DevTips I discovered Gulp and started working Jade, Jekyll, and SASS/SCSS into my workflow. Jade is probably the best thing I've ever used for making my life easier. I also like that Jekyll is pretty much a CMS without the CMS, and being able to separate my html files into tiny, bite sized sections is rad. And I'm running everything through Atom instead of Brackets like I normally would; Atom is pretty legit, and I like that it has contextual cues that perpetuate throughout my entire project. So if I create a class in one my my jade files, it picks up on them up while I'm working on my scss files and suggests them. There are other examples of cool shit Atom has been doing, but I cannot think of them now lol

Also I have switched full time to working on my Macbook hooked into my 27" IPS, and it's a fucking dream. I figured if I was going to start working from the command line, I ought to work on the system that has the easiest time being compatible with ruby and node. My windows desktop always had compatibility issues with installing npms and gems, and having to run the command line specifically for ruby was a pain in the ass. I can't believe it took me this long to try running stuff on my Mac, but I'm glad I finally did.

So now I believe I have all the tools I need to build my portfolio site and blog, the only problem is that I have dick for portfolio items. Would you guys suggest just designing and coding a bunch of mockup sites and js apps to fluff my site? I also plan on starting a daily CodePen and a blog explaining what I did for that day and how I did it, so I want to work that into my portfolio site as well. Do companies tend to look at codepen seriously?

 

[The Albatross]

I'm part of the problem here but I've never really looked at an applicants CodePen profile when hiring them. If an applicant has a link in their resume to Github, CodePen, or whatever, I'll click through it just to look at it... Usually more so to give me something to talk about in the interview. It might be unfair for someone trying to get a foot in the door, but I place more emphasis on work history than anything else... But we're also usually interviewing people who are in the 7-10 years experience range, not people just starting out.

While I used to use Grunt more, I prefer Gulp over Grunt. I used to favor Grunt only because I took a JavaScript course at work 3 years ago by Ben Alman, the guy who created Grunt, and that got me started with task runners.

I don't really like Jade because I don't think that markup has to be abstracted and I personally run into more frustrations with indenting than I ever did with unclosed divs or something like that. Instead of using jade and essentially compiling my markup, I'd opt to use something like Emmet (popular text editor markup plugin), which gives me the shorthand for typing out markup, but without relying entirely on a compiler to create my markup for me.

 

[Cptkrush]

Thanks for the insight, even though you only hire experienced devs, I think I will take this into consideration. Starting out is hard haha.

As for Jade, I used Emmet and loved it, but I think I prefer Jade just because I was constantly losing track of closing brackets and it would slow me down immensely. I also really like how pretty it is, clean code is one of the most alluring things to me.

 

[kodecraft]

Add me to the no love for Jade opinion. HTML5 markup is just fine

 

[Daffy Duck]

On the scale of things the projects we do at work are very small and simple, they are just your normal run of the mill websites for 99% of the work.

Can someone explain to me node.js/react/angular etc, are they just things that I shouldn't worry too much about for this type of thing (obviously learning them in my own time to keep up to date with what's going on and it is always good to know things like this, and following on from this where do you go to keep up to date on what is the hottest flavour of the month?)

All these other things are a little overwhelming. I understand the question may be very broad but I'm looking for a starting point/springboard.