00:00:00

Giant Devcast

Giant Devcast: CSStyyyyle

Laura joins in to talk about how she restructured the CSS framework for the site and how it affects the way the team designs and builds anything from buttons to full pages.

Will Carle and Dan Auer talk through the behind-the-scenes work that the engineering and design teams do for Giant Bomb.

Nov. 27 2018

Cast: Will, Dan

Posted by: Dan

35 Comments

Avatar image for aera
aera

17

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

I'm so glad this is continuing! I love me some behind-the-scenes discussion, as a fellow web dev.

Avatar image for dontatme
DontAtMe

24

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Loving these!

Avatar image for sogeman
Sogeman

1039

Forum Posts

38

Wiki Points

0

Followers

Reviews: 0

User Lists: 3

I wish I could download these on my phone but it just starts playing in the site player which doesn't allow me to save the audio (Firefox android)

Avatar image for jstaunton
jstaunton

742

Forum Posts

6

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Avatar image for deactivated-5e851fc84effd
deactivated-5e851fc84effd

1714

Forum Posts

53

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

Does this podcast post anywhere on apple podcasts? Or is it time to find a new podcatcher?

Avatar image for danauer
danauer

59

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

@crazybagman: Answered along with a few questions during this episode, but you can find it here: https://itunes.apple.com/us/podcast/giant-devcast/id1441883964

Avatar image for ripelivejam
ripelivejam

13572

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

New site has issues, but glad they are listening to feedback and working on tweaking the design rather than throwing the baby out with the bathwater as a few are somewhat ridiculously suggesting to scrap the new site altogether.

Avatar image for theimmortalbum
theimmortalbum

646

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

As a developer myself.. man. I love this podcast. Never stop it!

Avatar image for redactedprofile
RedactedProfile

182

Forum Posts

5655

Wiki Points

0

Followers

Reviews: 2

User Lists: 4

Edited By RedactedProfile

Just a quicky, what version of symfony does the site run? Cutting edge 4? Modern 3? Maintained 2?

Also, a fun topic

5 composer packages you can't live without

5 NPM modules you can't live without

(For added fun, try to shoot for the slightly less obvious ones ?)

Cheers guys, from one web monkey to another

Also, I would love to have Laura on the podcast more often, it's great having the technical design implementation perspective to compliment the design theory (ux)

Avatar image for schnoo
schnoo

289

Forum Posts

209

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Edited By schnoo

@jstaunton: @sogeman: I have the same problem. A workaround is to turn your phone, because the download button works in horizontal view.

Avatar image for panicswitch
panicswitch

100

Forum Posts

2

Wiki Points

0

Followers

Reviews: 0

User Lists: 1

Edited By panicswitch

This is a cool episode for me anyway. I love me some CSS chat and it's cool to hear about restructuring the site's styles. Laura is cool, all the best. Keep up the great work.

Also SCSS > Sass for sure.

Avatar image for tragichipster
tragichipster

49

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

yeah FE! I love hearing how other FEers work.

Avatar image for tragichipster
tragichipster

49

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Edited By tragichipster

Also, this conversation is everything that I've been trying to tell my company.

Avatar image for blackadder88
blackadder88

194

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Really enjoying the new website and podcast .. can there be a way to make a night mode for the website that will reduces the audio as of reducing the highs and lows . Is there going to be official app for Android for download and podcast for offline use ..

Avatar image for david_mcm
David_McM

30

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Yes to this podcast!

Avatar image for suits
Suits

495

Forum Posts

48

Wiki Points

0

Followers

Reviews: 0

User Lists: 2

@sogeman said:

Sogeman

I wish I could download these on my phone but it just starts playing in the site player which doesn't allow me to save the audio (Firefox android)

@schnoo said:

Edited By schnoo

@jstaunton: @sogeman: I have the same problem. A workaround is to turn your phone, because the download button works in horizontal view.

Yeah that works, I figured this out last time as well. Looks like something that could use a fix however.

Keep up the good work devs!

Avatar image for thomasmolby
thomasmolby

210

Forum Posts

19

Wiki Points

0

Followers

Reviews: 1

User Lists: 1

So fun to listen get this perspective on the site :)

I have worked in web frontend for 5+ years and as I'm slowly moving into game development I am shocked to realize just how insanely annoying CSS is compared to C# or C++ programming.

A good frontender can use CSS to codify a design into a super flexible framework similar to Bootstrap, like they mention in the podcast, where it is suddenly quite easy to make a lot of website with the same components...

But I find that keeping such a system alive over time is nearly impossible...

In a programming language you can harden your systems and they can be somewhat self explanatory... Someone break discipline and the system can slap their fingers with a clarifying exception error.

But with CSS you rely 100% on your documentation, there are no schemas, no direct feedback. Look away for 2 weeks under the worst circumstances... and the carefully designed system has eroded into case specific nonsense.

... Maybe it's possible to setup an SCSS compiler to enforce conventions....

And it's also about team communication of course. Even a hardened system will degrade over time if the ideas behind the system are forgotten....

Avatar image for hassun
hassun

10300

Forum Posts

191

Wiki Points

0

Followers

Reviews: 0

User Lists: 2

Keep it up!

Avatar image for crzylikefox13
crzylikefox13

25

Forum Posts

64

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

These are a great feature! Would it be possible to go into more detail on the CMS or a video tour of it? It's constantly mentioned but it would be cool to see and hear how it was upgraded and built.

Avatar image for landhawk
landhawk

499

Forum Posts

1

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

I love the behind-the-scenes stuff, as a layman it's genuinely fascinating to see what makes the site tick.

Avatar image for ahifi
ahifi

190

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Hey! Just wanted to say 3 things:

1) Thank you for addressing the 'why we launched the beta' stuff. I was one of the people asking the question and while my experience on the site was pretty hampered by the launch (and I'd argue it was close to "game-breaking"), it's nice to hear you address this stuff. I do think some better messaging on the beta wouldn't have gone amiss but, hey, it's done now!

2) Thank you for sorting out the issues with iOS 10.3.3 on Safari! The site looks fucking awesome - way better than the old site - on my iPhone 5 now and I'm happy that I can get back to enjoying the site on my primary device!

3) This podcast is a really easy listen. As someone who hasn't created websites since Macromedia's version of Dreamweaver, I'm not exactly the target market here - but it's good to hear what's going on behind-the-scenes and it lacks the intensity of personality-driven podcasts on the site. That's EXACTLY what I want when I'm working away on something in the background.

So, yeah, good job!

Avatar image for sothx
Sothx

4

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

I love this podcast. It's so much more laid back and grounded than most of the other dev podcasts I listen to. I would like to know more about the site revolving around the approach with PHP, a whole episode about how and why? Just a legacy system? I know Will has mentioned on the couch a few times how difficult it seemed to find people who are into PHP.

Avatar image for wretchederaser_
WretchedEraser_

4

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

so happy this is Continuing! Glad to see Dan's return to podcasting :)

Avatar image for Coreus
Coreus

272

Forum Posts

682

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Sorry, but looking at the CSS it's mostly complete fail (as with most of the re-design). No site in the world needs 5k CSS rules, let alone this one.

Avatar image for eulogize_my_baked_goods
eulogize_my_baked_goods

215

Forum Posts

16

Wiki Points

0

Followers

Reviews: 3

User Lists: 0

A very good listen. I'm looking forward to the episode that covers design, as mentioned at the end of this one.

A couple of take-aways.

The new GB (and Comic Vine) appears to be being used as part of a more fundamental rethink of the underlying platform, so not just what the resulting sites are but also how the platform is managed and worked with from a development perspective going forward. It sounds like they are trying to clean up for some of the dev sins of the past and as someone who has worked on large web systems that have been badly managed by multiple different groups of developers I can understand and sympathise with the desire to do this.

The issue - given that these concerns are far from public facing - is in bringing the audience along for the ride. A core complaint of regular (or 'hardcore', as you describe us) users of GB has been with what appeared to be the seemingly unjustified rush to push the new site live so quickly, along with the loss of existing functionality that brought with it, and the addition of new features that feel half finished. I think it's fair to say that had been badly communicated but also that hopefully things like this podcast will help to address.

I like and respect QL Crew for what they are doing but it is not GB and I have no interest in using it as my go-to source. I'm a long time subscriber to this site but would not describe myself as hardcore and have no interest in engaging with a wall of filters in order to watch videos. Having said that, I'm currently finding this new site to be pretty frustrating to use, but would much rather have the ship righted than jump off completely.

It appears that this is going to be a much longer road than may have been anticipated as the new systems get hammered out and refined. Consequently communication is going to be pretty key to keeping everyone on-board while the work continues behind the scenes.

@Coreus said:

Coreus

Sorry, but looking at the CSS it's mostly complete fail (as with most of the re-design). No site in the world needs 5k CSS rules, let alone this one.

That is likely also a result of the current push toward maintainability of the code. The heavy shift toward modularity and the use of compilation will always result in less efficient style sheets out of the box. It can be debated as to how important that is however and can be addressed at a later stage with a secondary pass aimed at removing duplication/redundancy once the codebase is in a more mature state. As always these decisions are a compromise, and this is the side of the line that the devs have decided to come down on at this time.

Avatar image for deactivated-5c295850623f7
deactivated-5c295850623f7

497

Forum Posts

0

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

@eulogize_my_baked_goods said:

The heavy shift toward modularity and the use of compilation will always result in less efficient style sheets out of the box.

That's not true at all lol. Modulation with a core set of global styles creates way less more efficient code. Compiling just depends on how you're doing it, but as a general rule, it too is more efficient.

To the podcast, the talk of line heights and font sizes was maddening. The designer should have this sorted and the devs need just to code up the design.

Question for next time - How do you structure your sprints and the design -> code feedback loop?

Avatar image for christaran
ChrisTaran

2054

Forum Posts

-1

Wiki Points

0

Followers

Reviews: 1

User Lists: 9

Edited By ChrisTaran

Can you please bring back Premium as a show so I can filter only premium content! This is by FAR the biggest bummer about the new site to me; that I can't do this :(

Avatar image for onemanarmyy
Onemanarmyy

6406

Forum Posts

432

Wiki Points

0

Followers

Reviews: 2

User Lists: 0

Edited By Onemanarmyy

Question: Any chance of the ' latest on the forums ' box to reappear in the future?

Avatar image for eulogize_my_baked_goods
eulogize_my_baked_goods

215

Forum Posts

16

Wiki Points

0

Followers

Reviews: 3

User Lists: 0

That's not true at all lol. Modulation with a core set of global styles creates way less more efficient code. Compiling just depends on how you're doing it, but as a general rule, it too is more efficient.

My point being that efficiency doesn't just happen by itself - you have to design for it, if that's your goal. Ultimately compilation is just another tool.

Avatar image for fleckle
Fleckle

40

Forum Posts

2

Wiki Points

0

Followers

Reviews: 0

User Lists: 0

Thanks for finding time to do the DevCast.

Avatar image for willy105
Willy105

4959

Forum Posts

14729

Wiki Points

0

Followers

Reviews: 5

User Lists: 1

When's the next episode?