The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

return0 posted:

I'm a total webdev noob. I've recently started making a single page app using React and Redux. I want to be able to asyncronously dispatch arbitrary events to the back end from the UI, optimistically apply their state changes on the front end client model & DOM, but roll back these changes if the back end action fails.

The use case for this is like:

1. User creates a collection of Things using a UI interaction.
2. User adds Thing 1.
3. User adds Thing 2.
4. User adds Thing 3.

If for some reason the server is taking a long time to process ThingEvents, creating a ThingCollection might take a long time on the back end. I want to the user to be able to interact with the ThingCollection, adding stuff to it before the back end has completed. Likewise for adding things. Now, imagine that adding Thing 2 fails, with a 500 on the back end. I'd like to detect this and roll back adding Thing 3 and Thing 2.

To implement, I've got the actions posting to a queue, which is drained sequentially. An event is dispatched to the back end when the prior event completes, but the UI is updated immediately using redux-optimistic-ui. If the event on the back end succeeds, I commit and dispatch the next event. If it fails, I rollback the state change and then pop each event from the queue, rolling back each.

This architecture appears to work functionally, and avoids highly specific promise chaining (which is not cool for queueing unpredictable user interaction with the UI). However, I feel like I'm fighting with the frameworks a little bit, and am wondering:

Is this a sane thing to do?

Is this an idiomatic expression of the implementation?

If not, is there another better/more idiomatic way?

Also, a general question: where do people implement find the most sane place to implement domain logic in React/Redux - right now I'm finding I'm adding a lot of domain logic in actions, querying the global state to implement the logic?

Thanks!

I don't know much about redux-optimistic-ui, so I can't speak to it specifically, but for optimistic UI updates, storing the state (however much of it is affected by the action) at the moment you dispatch to the server along with a reference to the request(s), is what I do for cases where there's cascading updates (as in your case). Then when one fails, you simply dispatch an action with that snapshot that puts the state back to then and trash "future" snapshots. Another option when you have one offs (i.e. making Thing 3 is not tied to Thing 1's success) is storing an "anti-action" and dispatching that if the server fails... so you can make a 'REMOVE_LOCAL_THING' action and if the server barfs, you dispatch it and remove from store / show an error.

As to your general question: I put a good chunk of my domain logic in actions as well, as that's where the app "does stuff" (versus in the UI where the user does stuff, and the reducers where there shouldn't be any logic at all) so IMHO, actions are the place for that.

# ? Aug 5, 2016 16:11

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 18:59

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

May not work for all but I've found redux-saga to be ideal for encapsulating async/business logic in redux apps.

# ? Aug 5, 2016 16:36

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

ynohtna posted:

May not work for all but I've found redux-saga to be ideal for encapsulating async/business logic in redux apps.

redux-saga is something that I definitely want to try out at some point. redux-thunk has worked well enough that I just use it by default. Someday I'll get around to working on a personal project again....

# ? Aug 5, 2016 18:18

return0: Apr 11, 2007

ynohtna posted:

May not work for all but I've found redux-saga to be ideal for encapsulating async/business logic in redux apps.

Thanks, we took a look at redux-saga and agree it's cool for the case of expressing a well-known-up-front collection of dependent async operations that can be composed sequentially in a generator, but it doesn't seem to really fit with dependent but unpredictable events generated by the user.

We rolled a thin general queue based solution that pushes operations to a queue based on ID (to identify dependent sequences of actions) that dispatches the async action while applying the client model & view change optimistically, committing it when it completes and then executing the next action (and so on). The cool thing is we can automatically roll back the state changes to the view if the back end action fails with no extra code using redux-optimistic-ui.

It seems to work quite well. We were a bit surprised there is so little example literature for this use case as I would have thought it would be common.

return0 fucked around with this message at 13:39 on Aug 6, 2016

# ? Aug 6, 2016 13:37

PT6A: Jan 5, 2006; Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

I have been asked to make changes to a decade-old site that still uses an incomprehensible maze of nested tables and tiny little GIFs to create rounded corners on sections. I'm hoping I can convince the client to allow me to do a full re-design of the site using modern techniques, but if not, gently caress my life.

# ? Aug 8, 2016 20:03

kedo: Nov 27, 2007

PT6A posted:

tiny little GIFs to create rounded corners on sections.

Stop it. You're giving me PTSD flashbacks.

# ? Aug 9, 2016 00:17

Data Graham: Dec 28, 2009; 📈📊🍪😋

kedo posted:

Stop it. You're giving me PTSD flashbacks.

The <font> tag :ghost:

E: scuse me, the <FONT> tag

# ? Aug 9, 2016 00:22

PT6A: Jan 5, 2006; Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

Data Graham posted:

The <font> tag

E: scuse me, the <FONT> tag

Double-checked my new project, and sure as gently caress that's lingering around too.

I remember doing background-image tricks to create rounded corners before border-radius was well supported (read: when I couldn't convince clients to drop support for old versions of IE), but at least I did them with CSS (still shameful, though).

# ? Aug 9, 2016 00:30

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

So yesterday I was having a really strange issue / bug. Tried for a while to figure it out, started googling and finding similar, but not quite my problems. Kept changing search terms and finally *bingo* there was the problem in StackOverflow with an answer that solved my problem! I try to up-vote it, but can't... wtf? I look over at the answerer, and.... it was me, 4 months ago, helping somebody else out.

I hope you enjoyed my Web Design & Development story.

# ? Aug 9, 2016 15:31

kedo: Nov 27, 2007

Data Graham posted:

E: scuse me, the <FONT> tag

D:

<FONT COLOR="#333333" SIZE="+2"><span style="font-family: 'Comic Sans', sans-serif;"><h1><marquee><blink>Welcome To My Website</blink></marquee></span></FONT></h1>

# ? Aug 9, 2016 16:32

Horn: Jun 18, 2004; Penetration is the key to success; College Slice

you forgot the undercontruction.gif

# ? Aug 9, 2016 16:40

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

Lumpy posted:

So yesterday I was having a really strange issue / bug. Tried for a while to figure it out, started googling and finding similar, but not quite my problems. Kept changing search terms and finally *bingo* there was the problem in StackOverflow with an answer that solved my problem! I try to up-vote it, but can't... wtf? I look over at the answerer, and.... it was me, 4 months ago, helping somebody else out.

I hope you enjoyed my Web Design & Development story.

The circle of development.

# ? Aug 9, 2016 16:44

Data Graham: Dec 28, 2009; 📈📊🍪😋

Gmaz posted:

The circle of development.

Debugging some old code:

code:

// Do not remove this

"Eh, I must not have known what I was doing back then" *removes it*

*system breaks horribly*

code:

// Do not remove this
// Dear me from the future: NO SERIOUSLY DO NOT REMOVE THIS YOU IMBECILE; love, Data Graham

# ? Aug 9, 2016 16:48

Soylent Pudding: Jun 22, 2007; We've got people!

I'm a CS student with no web design experience. I've been volunteering with a local 501(c)(3) and at some point before I graduate I would like to roll out a new website for them. Does the thread have any recommendations on the best resources for teaching myself how to do this or advice before I commit myself to a project like this?

# ? Aug 9, 2016 19:21

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

kedo posted:

D:

<FONT COLOR="#333333" SIZE="+2"><span style="font-family: 'Comic Sans', sans-serif;"><h1><marquee><blink>Welcome To My Website</blink></marquee></span></FONT></h1>

10 demerits: 'Website' not set in it's own FONT tag.

# ? Aug 9, 2016 20:10

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

Soylent Pudding posted:

I'm a CS student with no web design experience. I've been volunteering with a local 501(c)(3) and at some point before I graduate I would like to roll out a new website for them. Does the thread have any recommendations on the best resources for teaching myself how to do this or advice before I commit myself to a project like this?

Do you mean "design" in the sense of aesthetics, graphics, readability, photoshop, css, etc. or in the sense of "I've never touched HTML/PHP/ASP" (e.g. because your degree is entirely in ASM/Objective C and compiler optimization)? Because if it's the former, you can do a lot with Wordpress and a freebie theme. The theme kind of handles basic layout issues that you can just slap a logo onto and insert images into. Or hell, use Drupal/Django/etc. if you're feeling salty, though the theme developer audience is less developed.

# ? Aug 9, 2016 21:26

Soylent Pudding: Jun 22, 2007; We've got people!

Scaramouche posted:

Do you mean "design" in the sense of aesthetics, graphics, readability, photoshop, css, etc. or in the sense of "I've never touched HTML/PHP/ASP" (e.g. because your degree is entirely in ASM/Objective C and compiler optimization)? Because if it's the former, you can do a lot with Wordpress and a freebie theme. The theme kind of handles basic layout issues that you can just slap a logo onto and insert images into. Or hell, use Drupal/Django/etc. if you're feeling salty, though the theme developer audience is less developed.

I mean design in the sense that I've never touched HTLM/PHP/ASP. The closest I've come was database class, but I worked solely on the SQL database and other team members did the PHP front end. Basically I want to start learning website development because it's going to be at least a year before I can take any classes on it. I figured building a new website here would be a good project to focus on but I'm unsure of what to look at to start learning.

# ? Aug 9, 2016 21:39

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

I'm having to move a site between hosting packages and while I've copied all the files to the new package, it's only accessible through a control panel 'preview', which loads it as the http://server/sitepreview/http/url/?hash and as a consequence the site is actually unusable because all of my links are root-relative and therefore try to load from http://server/

While I know they'll of course work when they're loading from the domain address, I have this problem also with a subsection of the site as it loads from a directory on the testing server but its own URL on the live server, and I was wondering if there's a better way to do links that's more location-agnostic than using root-relative but doesn't involve full-relative where I'd need to put directory navigation ../ into the links?

# ? Aug 10, 2016 01:32

return0: Apr 11, 2007

Ghostlight posted:

I'm having to move a site between hosting packages and while I've copied all the files to the new package, it's only accessible through a control panel 'preview', which loads it as the http://server/sitepreview/http/url/?hash and as a consequence the site is actually unusable because all of my links are root-relative and therefore try to load from http://server/

While I know they'll of course work when they're loading from the domain address, I have this problem also with a subsection of the site as it loads from a directory on the testing server but its own URL on the live server, and I was wondering if there's a better way to do links that's more location-agnostic than using root-relative but doesn't involve full-relative where I'd need to put directory navigation ../ into the links?

A base URL configuration parameter with an appropriate value per deployment?

# ? Aug 10, 2016 01:51

Maleh-Vor: Oct 26, 2003; Artificial difficulty.

At a meeting with my team, we were iterating on a design on Chrome DevTools and I wondered why Google didn't have some way to save changes made in the editor. Then I found out it does, if you set up persistence with it:
https://developers.google.com/web/tools/setup/setup-workflow?hl=en

So my doubt became: how viable would it be to just skip Sublime or Dreamweaver or whatever and just work directly in Chrome. I know for larger projects it might not be viable, but for smaller sites I'm not sure what the real drawbacks would be. I'm not terribly experienced in web development though.

Maleh-Vor fucked around with this message at 16:09 on Aug 10, 2016

# ? Aug 10, 2016 16:05

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Maleh-Vor posted:

At a meeting with my team, we were iterating on a design on Chrome DevTools and I wondered why Google didn't have some way to save changes made in the editor. Then I found out it does, if you set up persistence with it:
https://developers.google.com/web/tools/setup/setup-workflow?hl=en

So my doubt became: how viable would it be to just skip Sublime or Dreamweaver or whatever and just work directly in Chrome. I know for larger projects it might not be viable, but for smaller sites I'm not sure what the real drawbacks would be. I'm not terribly experienced in web development though.

Perfectly viable if it does what you need it to.

# ? Aug 10, 2016 17:25

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

One of the company founders just can't stop micromanaging projects, to the point of forbidding frameworks like Bootstrap or Angular. Because according to his web development worldview nothing has changed since 2010 and server-side rendering is safer and faster. As a result, I now have to port my perfectly functioning Angular2 SPA MVP to Django templates because he just doesn't "feel good about Angular" :argh:

So I need Javascript library recommendations. Something I can incorporate to still allow for fancier, SPA-like interactivity and UI updating (a al two-way data binding). Are there any other viable candidates to jQuery, or should I just bite the bullet and roll with it? Other developers and sites like http://youmightnotneedjquery.com/ have shown me that a lot of jQuery's magic is now baked into browsers, so there's a chance I could shave off some of the jQuery bloat for a framework that's more lean but (almost) just as capable.

# ? Aug 10, 2016 18:43

kedo: Nov 27, 2007

IAmKale posted:

One of the company founders just can't stop micromanaging projects, to the point of forbidding frameworks like Bootstrap or Angular. Because according to his web development worldview nothing has changed since 2010 and server-side rendering is safer and faster. As a result, I now have to port my perfectly functioning Angular2 SPA MVP to Django templates because he just doesn't "feel good about Angular"

So I need Javascript library recommendations. Something I can incorporate to still allow for fancier, SPA-like interactivity and UI updating (a al two-way data binding). Are there any other viable candidates to jQuery, or should I just bite the bullet and roll with it? Other developers and sites like http://youmightnotneedjquery.com/ have shown me that a lot of jQuery's magic is now baked into browsers, so there's a chance I could shave off some of the jQuery bloat for a framework that's more lean but (almost) just as capable.

Do people really care about "jQuery bloat" anymore? The compressed version is 86kb. If that's Too drat Much For My Users To Download, why not just use the Google APIs version which 99.9999% of people in the world already have cached? Not trying to be a jerk, I'm honestly just confused when people talk about bloat w/r/t jQuery.

Bootstrap is pretty bad though, I'm on your boss's side there.

# ? Aug 10, 2016 18:57

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

kedo posted:

Bootstrap is pretty bad though, I'm on your boss's side there.

Amen.

# ? Aug 10, 2016 18:58

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

IAmKale posted:

One of the company founders just can't stop micromanaging projects, to the point of forbidding frameworks like Bootstrap or Angular. Because according to his web development worldview nothing has changed since 2010 and server-side rendering is safer and faster. As a result, I now have to port my perfectly functioning Angular2 SPA MVP to Django templates because he just doesn't "feel good about Angular"

So I need Javascript library recommendations. Something I can incorporate to still allow for fancier, SPA-like interactivity and UI updating (a al two-way data binding). Are there any other viable candidates to jQuery, or should I just bite the bullet and roll with it? Other developers and sites like http://youmightnotneedjquery.com/ have shown me that a lot of jQuery's magic is now baked into browsers, so there's a chance I could shave off some of the jQuery bloat for a framework that's more lean but (almost) just as capable.

Maybe try Aurelia? Sure, it's NEWER than Angular, but maybe you can sell him on the fact that there is a Company that he can give Money to for official Training, and then he'll feel all warm and fuzzy?

Or change everything over to ASP.NET webforms and enjoy the SPEED and SECURITY of server rendered pages.

# ? Aug 10, 2016 19:02

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

kedo posted:

Do people really care about "jQuery bloat" anymore? The compressed version is 86kb. If that's Too drat Much For My Users To Download, why not just use the Google APIs version which 99.9999% of people in the world already have cached? Not trying to be a jerk, I'm honestly just confused when people talk about bloat w/r/t jQuery.

Alright, I did doing some research after posting. Based on the fact that conversations about this subject were last held in 2014, I'm willing to admit that you're right, there's no reason to throw the baby out with the bathwater and ignore an otherwise capable library. I think I've just become a little too obsessed lately with minimizing initial load sizes/speed and using the least amount of data possible :sweatdrop:

kedo posted:

Bootstrap is pretty bad though, I'm on your boss's side there.

I agree that Bootstrap leads to same-y looking webpages, but I really like its responsive grid system. I just felt bad that the other team's frontend dev had to roll his own grid system because the founder basically forbids just about any any CSS framework :sigh:

# ? Aug 10, 2016 19:19

IronDoge: Nov 6, 2008

I like a few core components of Bootstrap like the grid system and other responsive utilities. Luckily you can customize a package and cut out all the other crap you don't need. Saves me the hassle of rolling my own.

# ? Aug 10, 2016 19:23

ModeSix: Mar 14, 2009

I have a question regarding API endpoints and frameworks(?).

I am building an Angular app and I want ideas about what to use for the backend API. Ideally I'd like to use a MySQL database, which I know can be supported properly by several technologies.

Should I build a custom API using express?

Should I roll with something like Loopback?

Should I use ASP.net?

Or is there some other alternative that is recommended. It's basically wide open, as I'll be deploying to my own server, so I can spin up anything on the backend really.

For information about what I am doing, it's going to be a sort of web portal for teachers (myself included) to interact with students, assign homework, receive requests from students for help, etc. This is why I'd prefer MySQL because I'd like to use a relational database. I'm not completely opposed to using a php driven API, but I'd prefer not to.

Or if there is another database suggestion, please give it. I'm not going to use something like Firebase that I'll have to pay for, needs to be strictly free.

ModeSix fucked around with this message at 19:28 on Aug 10, 2016

# ? Aug 10, 2016 19:24

kedo: Nov 27, 2007

IAmKale posted:

Alright, I did doing some research after posting. Based on the fact that conversations about this subject were last held in 2014, I'm willing to admit that you're right, there's no reason to throw the baby out with the bathwater and ignore an otherwise capable library. I think I've just become a little too obsessed lately with minimizing initial load sizes/speed and using the least amount of data possible

I agree that Bootstrap leads to same-y looking webpages, but I really like its responsive grid system. I just felt bad that the other team's frontend dev had to roll his own grid system because the founder basically forbids just about any any CSS framework

imo having two good SASS mixins for media queries and flexbox is way easier to use than any existing class based grid system, and they'll do virtually everything a grid can do. Whenever I see class="col-xs-12 col-sm-10 col-sm-offset-2 col-md-6 col-lg-3 col-lg-push-3" in someone's code I die a little. The only really good reason I can think of to use that sort of grid system is if you need to easily add/remove/modify those classes after page load, but in that case I feel like I'd still rather just make a helper class for an element's default flexbox settings.

But to each their own!

# ? Aug 10, 2016 19:37

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

kedo posted:

imo having two good SASS mixins for media queries and flexbox is way easier to use than any existing class based grid system, and they'll do virtually everything a grid can do.

Well, everything might now have to be rendered on the server but they'll pry TypeScript and SCSS from my cold, dead hands. I'm going to set up TS/SASS transpilation anyway, what would you recommend for those SASS mixins you mentioned? And I think we'll still be able to keep browser support to IE 10+, so flexbox is viable for layouts as well.

# ? Aug 10, 2016 20:03

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

ModeSix posted:

I have a question regarding API endpoints and frameworks(?).

I am building an Angular app and I want ideas about what to use for the backend API. Ideally I'd like to use a MySQL database, which I know can be supported properly by several technologies.

Should I build a custom API using express?

Should I roll with something like Loopback?

Should I use ASP.net?

Or is there some other alternative that is recommended. It's basically wide open, as I'll be deploying to my own server, so I can spin up anything on the backend really.

For information about what I am doing, it's going to be a sort of web portal for teachers (myself included) to interact with students, assign homework, receive requests from students for help, etc. This is why I'd prefer MySQL because I'd like to use a relational database. I'm not completely opposed to using a php driven API, but I'd prefer not to.

Or if there is another database suggestion, please give it. I'm not going to use something like Firebase that I'll have to pay for, needs to be strictly free.

There is a free option for Firebase....

However, I would say without any more information, use what is familiar? Maybe take a look at PostgreSQL, it is free, is relational, AND has some pretty kick rear end JSON tables for NoSQL type stuff. I would say don't use PHP because it's poo poo, but if you are more familiar with JS, use Express. If you like C#, use ASP.NET.

# ? Aug 11, 2016 02:54

PT6A: Jan 5, 2006; Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

ModeSix posted:

I have a question regarding API endpoints and frameworks(?).

I am building an Angular app and I want ideas about what to use for the backend API. Ideally I'd like to use a MySQL database, which I know can be supported properly by several technologies.

Should I build a custom API using express?

Should I roll with something like Loopback?

Should I use ASP.net?

Or is there some other alternative that is recommended. It's basically wide open, as I'll be deploying to my own server, so I can spin up anything on the backend really.

For information about what I am doing, it's going to be a sort of web portal for teachers (myself included) to interact with students, assign homework, receive requests from students for help, etc. This is why I'd prefer MySQL because I'd like to use a relational database. I'm not completely opposed to using a php driven API, but I'd prefer not to.

Or if there is another database suggestion, please give it. I'm not going to use something like Firebase that I'll have to pay for, needs to be strictly free.

I'm quite fond of Django myself, and Django REST Framework is quite nice for building a REST API, if that's what you're after. You can use it with a variety of databases, including but not limited to SQL, and you can use the builtin ORM or write your own queries when necessary.

The other nice thing is it includes a fairly robust user and permission control system out of the box.

# ? Aug 11, 2016 05:36

xpander: Sep 2, 2004

I have what is probably a simple question about Ember: I've got a model with a handful of attributes, but most of them are computed server-side(things like creation/update timestamps, other generated properties, etc). I want, say, property 'email' to be sent to the server when saving the record, but not the others. Is this possible? I couldn't really find anything in the docs. I can certainly handle it sending over a larger payload with blank fields, but I'm thinking ahead to when an application scales up, and you might want to keep those payloads as small as possible.

# ? Aug 11, 2016 06:13

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

xpander posted:

I have what is probably a simple question about Ember: I've got a model with a handful of attributes, but most of them are computed server-side(things like creation/update timestamps, other generated properties, etc). I want, say, property 'email' to be sent to the server when saving the record, but not the others. Is this possible? I couldn't really find anything in the docs. I can certainly handle it sending over a larger payload with blank fields, but I'm thinking ahead to when an application scales up, and you might want to keep those payloads as small as possible.

The docs say records that exist are updated via HTTP PATCH, but idk if that's what you're looking for

https://guides.emberjs.com/v2.7.0/models/creating-updating-and-deleting-records/

# ? Aug 11, 2016 06:26

life is a joke: Mar 7, 2016

Can someone tell me if this is possible:

I have 3 columns, A B and C from left to right. I want columns B and C to always equal A's height. display: flex; with some fallbacks did this fine because it used to be that B & C always had less content. But now, B's content may possibly exceed the length of A's.

The padding on the bottom of A looks really sharp above the next section down and keeps with a staggered tile thing, and A holds the main content anyway. So to mess up that flow with a longer B would be really ugly. I was thinking of doing a overflow: scroll; for B, but there's never any overflow because it'll just keep getting longer and take A with it.

# ? Aug 11, 2016 06:53

fuf: Sep 12, 2004; haha

kedo posted:

imo having two good SASS mixins for media queries and flexbox is way easier to use than any existing class based grid system, and they'll do virtually everything a grid can do.

Can you elaborate on this a bit / post some links? I'm starting a new front end project soon and I was gonna default to bootstrap but maybe it's time I finally jumped on the SASS train.

# ? Aug 11, 2016 09:17

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

life is a joke posted:

Can someone tell me if this is possible:

I have 3 columns, A B and C from left to right. I want columns B and C to always equal A's height. display: flex; with some fallbacks did this fine because it used to be that B & C always had less content. But now, B's content may possibly exceed the length of A's.

The padding on the bottom of A looks really sharp above the next section down and keeps with a staggered tile thing, and A holds the main content anyway. So to mess up that flow with a longer B would be really ugly. I was thinking of doing a overflow: scroll; for B, but there's never any overflow because it'll just keep getting longer and take A with it.

Put a max-height on B with overflow-y: auto;

# ? Aug 11, 2016 12:37

kedo: Nov 27, 2007

IAmKale posted:

Well, everything might now have to be rendered on the server but they'll pry TypeScript and SCSS from my cold, dead hands. I'm going to set up TS/SASS transpilation anyway, what would you recommend for those SASS mixins you mentioned? And I think we'll still be able to keep browser support to IE 10+, so flexbox is viable for layouts as well.

I use this for flexbox. It's just a series of mixins for all the various flexbox properties that includes vendor prefixes. The guy even shows how you can use it to replicate a grid, though I'm not sure why you'd do so.

I use my own media query mixin that looks like this. It's nothing amazing, but it gets the job done.

fuf posted:

Can you elaborate on this a bit / post some links? I'm starting a new front end project soon and I was gonna default to bootstrap but maybe it's time I finally jumped on the SASS train.

Even if you don't use exactly this method, you should totally jump on the SASS train. Imagine you have this in Bootstrap:

code:

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      One of three columns
    </div>
    <div class="col-sm-12 col-md-4">
      One of three columns
    </div>
    <div class="col-sm-12 col-md-4">
      One of three columns
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-4">
      One of three columns
    </div>
    <div class="col-sm-12 col-md-4">
      One of three columns
    </div>
    <div class="col-sm-12 col-md-4">
      One of three columns
    </div>
  </div>
</div>

You could do this with flexbox with similar (but simpler) markup and all your layout styles in SASS:

code:

<div class="container">
  <div class="container__item">
    One of three columns
  </div>
  <div class="container__item">
    One of three columns
  </div>
  <div class="container__item">
    One of three columns
  </div>
  <div class="container__item">
    One of three columns
  </div>
  <div class="container__item">
    One of three columns
  </div>
  <div class="container__item">
    One of three columns
  </div>
</div>

CSS code:

.container {
  @include flexbox;
  @include flex-wrap(wrap);

  &__item {
    @include flex(1, 1, 100%);

    @include media-query(min,medium) {
      @include flex(1,1,33.33%);
      // If you want all your items to only ever be 33.33% wide, you'd add a max-width here.

      // If you want to support old versions of IE, you have to use floats
      // and widths which is a throwback to grids. Boo.
      .ie9 & {
        float: left;
        width: 33.33%;
      }
    }
  }
}

The result is virtually identical and I didn't need to use a big framework to do it. However now that I'm looking at Bootstrap again for the first time in awhile, it seems like they have better SASS support than they used to, and they also have an option to use flexbox.

Is this better or worse than Bootstrap? I certainly find it far easier to write and maintain.

e: Also, if you're getting started on SASS I'd recommend reading this article to learn a great way to structure your SASS files. Most people start off by dumping all of their styles into one big document just like they might with CSS, but there is a better way.

kedo fucked around with this message at 14:13 on Aug 11, 2016

# ? Aug 11, 2016 14:06

Sedro: Dec 31, 2008

xpander posted:

I have what is probably a simple question about Ember: I've got a model with a handful of attributes, but most of them are computed server-side(things like creation/update timestamps, other generated properties, etc). I want, say, property 'email' to be sent to the server when saving the record, but not the others. Is this possible? I couldn't really find anything in the docs. I can certainly handle it sending over a larger payload with blank fields, but I'm thinking ahead to when an application scales up, and you might want to keep those payloads as small as possible.

You can customize the adapter and serializer for that model. By default, the serializer will serialize all attributes and the adapter will use a PUT request when you save().

There's an active community on slack https://ember-community-slackin.herokuapp.com/

# ? Aug 11, 2016 14:59

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 18:59

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

fuf posted:

Can you elaborate on this a bit / post some links? I'm starting a new front end project soon and I was gonna default to bootstrap but maybe it's time I finally jumped on the SASS train.

https://css-tricks.com/dont-overthink-flexbox-grids/

You don't need much for mixins and so on because flexbox grids are so simple. Want three equal columns? Put three things in a wrapper. Want six equal columns? Put six things in a wrapper.

My only "grid sizing style" is: grid__column--primary { flex: 2; } which means that thing will be twice as wide as the other things. 99% of my "grid system" needs are handled by:

code:

.grid {
  padding: 1em;
  display: flex;
}
.grid__column {
  margin: 0 1em;
  padding: 1em;
  flex: 1;
}
.grid__column--primary {
  flex: 2;
}

@media (max-width: 30em) {
  .grid {
    display: block;
  }
}

# ? Aug 11, 2016 16:11

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »