The Web Design & Development Megathread

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

«‹›362 »

Roadie: Jun 30, 2013

uncle blog posted:

Me again. I'm getting an error about an uneven amount of hook renders in my app. I'm trying to update my context state in an Apollo based object, when I add the useEffect call to set the state, the errors start happening. "Uncaught Invariant Violation: Rendered more hooks than during the previous render."

This seems to be the offending component:
code:
const GoalList = () => {
    const { loading, error, data } = useQuery(GOAL_LIST_QUERY, {});
    const { selectedGoal, setSelectedGoal } = useContext(
      ServiceOrderContext
    );

    if (loading ... error) ...

    useEffect(() => {
      if (data && data.things) {
        setSelectedGoal(data.things[0].Name, data.things[0].id);
      }
    }, [data]);

    return (
      <React.Fragment>
        {data.contexts.map((goal: any) => {
          return (
            <label>
              <input
                type="radio"
                name="goal.Name"
                value={goal.id}
                key={goal.id}
                checked={selectedGoal.id === goal.id}
              />
              {goal.Name}
            </label>
          );
        })}
      </React.Fragment>
    );
  };

What's in the if statement that you're eliding? You can't skip useEffect with an early return, that will break stuff.

# ? Nov 18, 2019 18:44

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 14:35

uncle blog: Nov 18, 2012

You're totally right, that was some return statements. Moving them did the trick!

# ? Nov 18, 2019 21:22

CarForumPoster: Jun 26, 2013; â¡POWERâ¡

PT6A posted:

No, they're literally talking about "a screen with several links on it." I've tried doing this before and it's absolutely been rejected as a waste of space.

I can try, but it's just so much work for no loving point, and whether or not I make money, I just feel depressed about doing work that has no point to it. It does not spark joy. Perhaps I need to raise my hourly rate.

Also: why do they want this? What problem do they believe it will solve for them or their users?

This seems like an ideal use case for Glide: (build apps from a Google Sheet)
https://www.glideapps.com/

It become basically no work at that point.

# ? Nov 19, 2019 00:44

Edgar Allan Pwned: Apr 4, 2011; Quoth the Raven "I love the power glove. It's so bad..."

went to a local thing and heard a talk on webassembly. does anyone use it? is it.. good?

# ? Nov 19, 2019 04:28

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

CarForumPoster posted:

This seems like an ideal use case for Glide: (build apps from a Google Sheet)
https://www.glideapps.com/

It become basically no work at that point.

It's already basically no work to make this a web-app using basic HTML and CSS, the issue is that they seem to want a native app with app store installation and all that poo poo. And while that's trivially doable using any number of techniques, there's no way Apple will allow that poo poo on the store. I know this because I've dealt with this sort of request before, it's a surprising persistent irrational desire.

We're going to try and sell these guys on a progressive web app, since even the guy that wanted to subcontract me agrees an actual native app is a stupid loving idea.

# ? Nov 19, 2019 04:44

uncle blog: Nov 18, 2012

Also, our datamodel consists of 3 entities. Which are named "context", "service" and "function". This is a React based app. The entities are all named something else for the end user. I'm the most junior developer on our team, and our tech lead thinks that this naming is totally fine and makes all the sense in the world. Am I insane for thinking this is stupid?

# ? Nov 19, 2019 09:15

Vincent Valentine: Feb 28, 2006; Murdertime

All of ours are called something else for the end user as well. That's generally fine and well, since end users care about naming in context with regards to usability and developers also care about naming in context with regards to functionality.

"Context" and "Service" are pretty common naming schemes for data. Ours uses them as well.

You're not insane for thinking it's a stupid idea, as consistency is something extremely important for developers and as a junior dev you probably haven't been exposed to a world where a lot of hands are touching your app. The issue stems from the fact that your team(devs) understands what those concepts are, but the product team doesn't and needs to refer to them by their end-user names because that's what they understand.

# ? Nov 19, 2019 09:26

marumaru: May 20, 2013

PT6A posted:

We're going to try and sell these guys on a progressive web app, since even the guy that wanted to subcontract me agrees an actual native app is a stupid loving idea.

uh do iphones do pwas these days

# ? Nov 19, 2019 13:41

spiritual bypass: Feb 19, 2008; Grimey Drawer

Edgar Allan Pwned posted:

went to a local thing and heard a talk on webassembly. does anyone use it? is it.. good?

basically pointless unless you have heavy computations to do (or interactive stuff) or want to obfuscate your code. Executables tend to be rather large, depending on the language you use. Rust is probably the best webass source lang right now due to the light runtime requirements.

# ? Nov 19, 2019 13:42

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

Inacio posted:

uh do iphones do pwas these days

Not 100%, but enough for this use case probably.

# ? Nov 19, 2019 15:10

kedo: Nov 27, 2007

I'm looking to automate the process of pushing/pulling database updates to and from my local dev environment/public web server, preferably (but not necessarily) using SSH. I'm using MySQL in both places and am generally looking to do the following:

1. Dump a specific database on local/server (depending on which direction)
2. Find/replace all instances of http://localhost:port with http://webserver.address in that dump
3. Import the database on the local/server (depending on which direction)

It looks like I could accomplish steps 1 and 3 with a fairly simple command, but I'm not sure how step 2 would work. Any advice, or suggested reading, or tools to look into? I'm not picky about how this is accomplished as long as I can either type in a quick terminal command, or click a button and have the whole process run without me needing to do everything by hand each time.

kedo fucked around with this message at 19:16 on Nov 20, 2019

# ? Nov 20, 2019 19:05

CarForumPoster: Jun 26, 2013; â¡POWERâ¡

kedo posted:

I'm looking to automate the process of pushing/pulling database updates to and from my local dev environment/public web server, preferably (but not necessarily) using SSH. I'm using MySQL in both places and am generally looking to do the following:

1. Dump a specific database on local/server (depending on which direction)
2. Find/replace all instances of http://localhost:port with http://webserver.address in that dump
3. Import the database on the local/server (depending on which direction)

It looks like I could accomplish steps 1 and 3 with a fairly simple command, but I'm not sure how step 2 would work. Any advice, or suggested reading, or tools to look into? I'm not picky about how this is accomplished as long as I can either type in a quick terminal command, or click a button and have the whole process run without me needing to do everything by hand each time.

Its not the answer to what you asked but would having a production RDS database and a local development database satisfy your use case? If so I did this for my first Django site: https://realpython.com/deploying-a-django-app-to-aws-elastic-beanstalk/

# ? Nov 20, 2019 19:28

kedo: Nov 27, 2007

CarForumPoster posted:

Its not the answer to what you asked but would having a production RDS database and a local development database satisfy your use case? If so I did this for my first Django site: https://realpython.com/deploying-a-django-app-to-aws-elastic-beanstalk/

It probably would, but I'd rather not shoehorn a whole 'nother database service in here if I don't have to.

# ? Nov 20, 2019 20:17

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

kedo posted:

I'm looking to automate the process of pushing/pulling database updates to and from my local dev environment/public web server, preferably (but not necessarily) using SSH. I'm using MySQL in both places and am generally looking to do the following:

1. Dump a specific database on local/server (depending on which direction)
2. Find/replace all instances of http://localhost:port with http://webserver.address in that dump
3. Import the database on the local/server (depending on which direction)

It looks like I could accomplish steps 1 and 3 with a fairly simple command, but I'm not sure how step 2 would work. Any advice, or suggested reading, or tools to look into? I'm not picky about how this is accomplished as long as I can either type in a quick terminal command, or click a button and have the whole process run without me needing to do everything by hand each time.

If it's a straight SQL dump, try

code:

sed 's/localhost:port/newserver.address/g' sql.dump > to_import.sql

for step 2. Would that work with whatever else you're using?

EDIT: Seems like you should be able to use that as the intermediate step in the stackoverflow solution you've linked, although I'm not 100% sure about the proper syntax. Maybe something like:

code:

code_to_dump_sql | sed 's/localhost:port/newserver.address/g' | code_to_update_sql

PT6A fucked around with this message at 05:29 on Nov 21, 2019

# ? Nov 21, 2019 05:24

kedo: Nov 27, 2007

PT6A posted:

If it's a straight SQL dump, try

Nice that looks like it could work, thanks!

# ? Nov 21, 2019 17:48

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

Would anyone happen to know why the example presented on this page appears differently in Firefox vs Chrome?

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feSpecularLighting

I've tried a few machines and it appears different on all of them

# ? Nov 21, 2019 23:39

Dominoes: Sep 20, 2007

Question about scaling web services/databases: How do you know when it's time to upgrade your Heroku plan? I have a webapp I've been building for scheduling. It's been in a limited-use/trial capacity for a while, where our scheduling shop used it internally, then emailed out a daily Excel export, so no more than a few connections at a time.

I'm hosting on Heroku, currently using the Hobby basic plan (The one where you pay $10/month for 10 million rows), and one hobby dyno. It's been working OK, although I'm suspicious the loading time could be improved with a better plan. I've been paying out of pocket. We're now at the point where another sub-organization's using it, and they're having all their guys register accounts so they can check the sched directly. I'm going to have our guys do the same. Probably bringing another few sub-orgs on board soon, Inshallah.

When will we start needing a better plan? What's the best way to test this? Once the page loads, it's mostly client-only, with relatively sparse DB updates. I bet the hobby plans crack for public websites quickly, but even with the expansions I listed, there probably would be no more than 10-20 people connected at a time, and I haven't run into problems other than the slow loading (Which may or may not be fixed with a more expensive plan) I should probably just figure out which pot of money at work I can get to pay for this. Am I running a security risk by not being on one of Heroku's private plans? I'm going to have to field opsec questions sooner-or-later.

Dominoes fucked around with this message at 06:42 on Nov 22, 2019

# ? Nov 22, 2019 06:30

spiritual bypass: Feb 19, 2008; Grimey Drawer

The main question with databases is how large your tables are compared to RAM. If your biggest and/or hottest partitions fit into RAM, performance should basically always be good.

Do you know which backend responses take the longest to generate? If so, instrument that handler to log some stats about where it spends its time.

# ? Nov 22, 2019 13:19

kedo: Nov 27, 2007

HappyHippo posted:

Would anyone happen to know why the example presented on this page appears differently in Firefox vs Chrome?

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feSpecularLighting

I've tried a few machines and it appears different on all of them

Firefox uses a different color space than Chrome. https://cameratico.com/guides/web-browser-color-management-guide/

# ? Nov 22, 2019 17:53

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

kedo posted:

Firefox uses a different color space than Chrome. https://cameratico.com/guides/web-browser-color-management-guide/

Hmm, googling around has lead me here, specifically the last image: http://tavmjong.free.fr/SVG/COLOR_INTERPOLATION/
In the last image, the inner square is not supposed to be visible. But I see the squares for both color interpolations when using Chrome. With firefox I see artifacts around the edge, but the square is the correct color.

I can't seem to find a way to get both browsers to produce the same (or even similar) image. I'm starting to suspect that feSpecularLighting is simply broken on Chrome.

# ? Nov 23, 2019 22:25

Dominoes: Sep 20, 2007

rt4 posted:

The main question with databases is how large your tables are compared to RAM. If your biggest and/or hottest partitions fit into RAM, performance should basically always be good.

Do you know which backend responses take the longest to generate? If so, instrument that handler to log some stats about where it spends its time.

I appreciate the info. The hobby plan has the "RAM" description ominously empty. I tried upgrading to Standard 0, and the load times are significantly faster. I'm suspicious upgrading to production Dynos won't help, since the server doesn't do much beyond the DB and auth. (But the DB queries are big). It looks likes now that I upgraded, Heroku will tell me what the bottleneck queries are. Going to see if I can get work to pay for it.

Dominoes fucked around with this message at 18:56 on Nov 24, 2019

# ? Nov 24, 2019 18:53

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Every few months I try to get srcset to actually work, and it never does despite copying code that should work and just replacing images. Help me finally get it working please!

code:

<img class="hero-image" 
			srcset="/wp-content/uploads/img-hero05m.jpg small,
			/wp-content/uploads/img-hero06.jpg big"
   			 sizes="(min-width: 1px) small,
			(min-width: 768px) big,
			100px"
			 src="/wp-content/uploads/img-hero05m.jpg" alt="Tower" />

I've tried different variations of srcset code in Chrome, Firefox, in Incognito Mode, with "Disable cache" checked, and nothing works.

# ? Dec 3, 2019 16:59

Shaman Tank Spec: Dec 26, 2003; *blep*

Dear goons please help me unfuck my horrible attempts at CSS. I'm trying to learn some CSS skills (and React on the side) but it's doing my head in.

For practise I'm trying to make a website that fetches boardgame information from my own API (it basically parses Boardgamegeek's XML API results into JSON) and then displays that information as title cards. I'm also doing filtering based on available playtime, number of players and desired / not desired mechanics.

But the thing that's tripping me up is the CSS/HTML.

This is a Photoshop mockup of what I want:

This is what I have.

It's probably a problem with my CSS, or my hierarchy, or both.

Here is the render call from my .JS class:

code:

render()
    {
        return(
            <div class="boardgame">
                <div class="header">
                    <img class="thumbnail" src={this.state.thumbnail}/>
                    <h2 class="gameHeader">{this.state.name} ({this.state.yearpublished})</h2>       
                </div>
                <div class="boardgameBody">
                <h3 className="players">Min. players: {this.state.minplayers} Max. players: {this.state.maxplayers} Best with: {this.state.suggestedplayers}</h3>
                    <h3 className="playingtime">Playing time: {this.state.playingtime}</h3>
                    {this.state.mechanics.map(mech => <Tag mechanic={mech}/>)}
                </div>
            </div>
        )

Basically what I want is the board game's cover picture placed in the upper left corner of the container (with a few pixels of breathing space), then below that (using z-spacing) the banner background, next to it the game's name and year of publication.

I'm sure this is all extremely easy to do right in .CSS but I'm basically so loving lost right now I have no idea where to even begin to unfuck this. I've tried changing the positioning of the components from relative to absolute to floating, and when I do, some stuff just disappears.

# ? Dec 5, 2019 10:09

Vincent Valentine: Feb 28, 2006; Murdertime

https://jsfiddle.net/cpthyLwe/

Quick and dirty, but this should give you an idea of what to look for.

Without seeing your CSS(and your CSS, not your JS, is almost certainly the cause here) I can't really give a better answer.

By looking at the image, there's definitely some issues with margin on the blue title bar. It's pushing the main information block down.

Next, the text within the "boardGameBody" should be contained in it's own container. That way you can set padding on the text container to push it away from the walls of the boardgamebody. That will allow you to set the text below where the image will land.

edit: I colored the information container green so you can see where it's boundaries are more easily, so it makes more sense when I say to put the text in its own container and then pad that container to get it away from the boundaries of the information container.

Vincent Valentine fucked around with this message at 12:53 on Dec 5, 2019

# ? Dec 5, 2019 12:11

Shaman Tank Spec: Dec 26, 2003; *blep*

Vincent Valentine posted:

https://jsfiddle.net/cpthyLwe/

Quick and dirty, but this should give you an idea of what to look for.

Without seeing your CSS(and your CSS, not your JS, is almost certainly the cause here) I can't really give a better answer.

Oh right, I did mean to also paste the CSS! It is messy as hell, but it is also the state from the picture. The .boardgame portion was originally
copypasted from some .CSS generator site to get the rounded edges and drop shadow on the box so it especially might have some extra junk in it.

And that example is already helpful, because it already tells me I don't need to mess with width settings everywhere and for instance the title bars will just fill up the space they have, so thanks

code:

.boardgame {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  max-width: 650px;
  max-height: 300px;
  min-height: 300px;
  width: 29.7%;
  height: auto;
  margin: 10px;
  padding: 1px;
  float: left;
  border: 3px solid rgba(8, 154, 252,0.91);
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font: normal 14px/1 "Times New Roman", Times, serif;
  color: rgba(255,255,255,1);
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: rgba(187, 220, 242,0.91);
  -webkit-box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.4) ;
  box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.4) ;
  z-index: 1;
}

.header {
  position: static;
  left: 0px;
  top: 0px;
  width: auto;
  height: auto;

}

.thumbnail {
    position: absolute;
    left: 2px;
    top: 2px;
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    border: 3px;
    z-index: 3;
}

.boardgameBody {
  position: static;
  left: 0px;
  top: 0px;
  max-height: 300px;
  min-height: 300px;
  background: rgba(187, 220, 242,0.91);
  width: auto;
  height: auto;
  z-index: 0;
}

.header {
  background: rgba(30, 178, 232, 0.91);
  max-width: 650px;
  min-height: 50px;
  height: auto;
  width: auto;
  position: relative;
  top: -1px;
  left: -1px;
  z-index: 10;
  justify-content: center;
}

.gameHeader
{
  position: relative;
  padding-left: 160px;
  max-width: 650px;
  max-height: 150px;
  height: auto;
  width: auto;
  z-index: 2;
  text-align: justify;
}

Shaman Tank Spec fucked around with this message at 14:30 on Dec 5, 2019

# ? Dec 5, 2019 14:27

Edgar Allan Pwned: Apr 4, 2011; Quoth the Raven "I love the power glove. It's so bad..."

im pretty new to css still but id say mess around with margin and padding. it seems like you have the thumbnail where you want it, so you would use margin to push the other objects like text away from it. does that make sense? one of the issues i think is with using the z-axis. its good for layering objects but you can achieve what you want without it.

if you look at the other goons example all they do is use margin/padding. im not super good with the difference, but here is the box model that i stare at all the time

https://www.w3schools.com/css/css_boxmodel.asp

# ? Dec 5, 2019 14:55

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

Edgar Allan Pwned posted:

im pretty new to css still but id say mess around with margin and padding. it seems like you have the thumbnail where you want it, so you would use margin to push the other objects like text away from it. does that make sense? one of the issues i think is with using the z-axis. its good for layering objects but you can achieve what you want without it.

if you look at the other goons example all they do is use margin/padding. im not super good with the difference, but here is the box model that i stare at all the time

https://www.w3schools.com/css/css_boxmodel.asp

Margin is the space outside your box which pushes other boxes away. Padding is the space within the box, which is pushed out by it's contents. There's several ways to display stuff in CSS, but the more traditional ones are block (which means it takes up the entire row it's in) or inline (which means it can exist in the same row as other inline items). The real difficult poo poo with CSS generally has to do with specificity, which is basically what it's meant to make easier. Once you're a few hundred lines of CSS into a project, making sure you don't hit things unintentionally or overwrite things unintentionally can start becoming a nightmare.

# ? Dec 5, 2019 16:33

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

And dear lord start with bootstrap for major layout stuff if you actually care about getting it done quickly. Save bespoke styling stuff for the fiddly details.

# ? Dec 5, 2019 16:39

marumaru: May 20, 2013

Don't start with Bootstrap if you want to actually learn CSS instead of depending on frameworks though

# ? Dec 5, 2019 16:39

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

Agreed.

# ? Dec 5, 2019 16:43

pathetic little tramp: Dec 12, 2005; by Hillary Clinton's assassins; Fallen Rib

Inacio posted:

Don't start with Bootstrap if you want to actually learn CSS instead of depending on frameworks though

Please please please. I'm working on a project now where the boss is insisting I use bootstrap for CSS, and I literally only need 50 lines of raw CSS to do the whole thing.

# ? Dec 5, 2019 17:02

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

pathetic little tramp posted:

Please please please. I'm working on a project now where the boss is insisting I use bootstrap for CSS, and I literally only need 50 lines of raw CSS to do the whole thing.

With bootstrap, you'll need at least 50 lines of CSS to make even the smallest deviation, so you can still get your coding in!

# ? Dec 5, 2019 17:08

marumaru: May 20, 2013

pathetic little tramp posted:

Please please please. I'm working on a project now where the boss is insisting I use bootstrap for CSS, and I literally only need 50 lines of raw CSS to do the whole thing.

We had someone style one input and two loving buttons with Bootstrap instead of the 6 lines of CSS it'd take. Now we load all that bloat for no reason.

# ? Dec 5, 2019 17:09

Dominoes: Sep 20, 2007

Data Graham posted:

And dear lord start with bootstrap for major layout stuff if you actually care about getting it done quickly. Save bespoke styling stuff for the fiddly details.

Not sure how I feel about this. I ended up reliant on it, and pulling it out of a recent project has been painful. Ie when you want to customize something, it gets confusing which CSS properties are coming from your code, and which from Bootstrap. If you then remove bootstrap (Which applies overall styles to various element types, not just when using Bootstrap classes), you may break other things that were reliant on BS for formatting.

Before CSS Grid came out, BS was perhaps the best way to organize a site in 2 dimensions, but now that we have Grid, I recommend skipping BS.

# ? Dec 5, 2019 18:05

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Der Shovel posted:

code:

.boardgame {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  max-width: 650px;
  max-height: 300px;
  min-height: 300px;
  width: 29.7%;
  height: auto;
  margin: 10px;
  padding: 1px;
  float: left;
  border: 3px solid rgba(8, 154, 252,0.91);
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font: normal 14px/1 "Times New Roman", Times, serif;
  color: rgba(255,255,255,1);
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  background: rgba(187, 220, 242,0.91);
  -webkit-box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.4) ;
  box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.4) ;
  z-index: 1;
}

.header {
  position: static;
  left: 0px;
  top: 0px;
  width: auto;
  height: auto;

}

.thumbnail {
    position: absolute;
    left: 2px;
    top: 2px;
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    border: 3px;
    z-index: 3;
}

.boardgameBody {
  position: static;
  left: 0px;
  top: 0px;
  max-height: 300px;
  min-height: 300px;
  background: rgba(187, 220, 242,0.91);
  width: auto;
  height: auto;
  z-index: 0;
}

.header {
  background: rgba(30, 178, 232, 0.91);
  max-width: 650px;
  min-height: 50px;
  height: auto;
  width: auto;
  position: relative;
  top: -1px;
  left: -1px;
  z-index: 10;
  justify-content: center;
}

.gameHeader
{
  position: relative;
  padding-left: 160px;
  max-width: 650px;
  max-height: 150px;
  height: auto;
  width: auto;
  z-index: 2;
  text-align: justify;
}

.boardgame has a min-height: 300px, but also a max-height:300px in addition to height:auto. so which of those do you want?
Since .thumbnail is position:absolute, it's "losing" its height, so that's why the copy is going under it... in also has that min/max/height redundancy.
You could try just setting .thumbnail to height:150px (removing the min/max), adding float:left and removing position:absolute. Then take .header and change it to height:100px;margin-bottom:50px

The Merkinman fucked around with this message at 18:22 on Dec 5, 2019

# ? Dec 5, 2019 18:08

prom candy: Dec 16, 2005; Only I may dance

Don't use bootstrap, use tailwind

edit: don't use tailwind if you don't already know CSS

prom candy fucked around with this message at 19:33 on Dec 5, 2019

# ? Dec 5, 2019 18:26

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Dominoes posted:

Before CSS Grid came out, BS was perhaps the best way to organize a site in 2 dimensions, but now that we have Grid, I recommend skipping BS.

Grid is good, and I use it where I can. I've got 2 projects where for some reason more than 10% of users are using browsers that don't support Grid.

Of course, they don't use BS either.

In general, as a developer who isn't really a designer, I appreciate frameworks like MUI, tailwind, Semantic-UI, whatever, that easily let me deliver projects with a consistent visual language. They don't let you not be a designer...you can make nightmares with any of them, but they take a lot of load off for someone like me.

# ? Dec 5, 2019 19:05

The Fool: Oct 16, 2003

I really like Semantic UI, but it hasn't been updated in years. Is there anything else that has a similar design and level of support for React?

# ? Dec 5, 2019 19:09

Jimlit: Jun 30, 2005

prom candy posted:

Don't use bootstrap, use tailwind

Had to look this up. https://tailwindcss.com/docs/border-width

I'm usually not a library snob, but recommending this as a bootstrap replacement to someone already struggling with CSS is just actively lovely.

The Fool posted:

I really like Semantic UI, but it hasn't been updated in years. Is there anything else that has a similar design and level of support for React?

React Bootstrap. Coming off a project using Semantic UI It definitely checks most of the boxes. It was missing some of the stuff I really liked about semantic but not to a point where it was a total pain.

Jimlit fucked around with this message at 19:22 on Dec 5, 2019

# ? Dec 5, 2019 19:15

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 14:35

prom candy: Dec 16, 2005; Only I may dance

Jimlit posted:

Had to look this up. https://tailwindcss.com/docs/border-width

I'm usually not a library snob, but recommending this as a bootstrap replacement to someone already struggling with CSS is just actively lovely.

Actually yeah you're right, I love Tailwind but it's not a good choice for someone who isn't already familiar with CSS. Edited my post.

# ? Dec 5, 2019 19:34

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

«‹›362 »