There was some murmuring in the Blogging Platforms thread for a thread for asking “dumb questions” about design.
Quotation marks because we’re all dumb sometimes, and the whole point of asking other people is to learn.
SO… this was @zebra’s question but it’s relevant to my interests: how does one properly get CSS to adjust the width of an image based on screen size for mobile?
the vw (View Width) and vh (View Height) units are great for screen based sizing in CSS.
They are used like this:
img {
width:100vw;
}
where percentages are changing the size based on a percentage of selected item’s parent, viewport units are a fractional ratio of the viewport (think: screen minus the UI elements).
So 1vw is 1/100th of the width of the viewport.
Something to keep in mind is that images should be resized and compressed before putting up on a website.
Figure out the largest dimensions you need to support and scale down your image to that size or double that size and use higher compression to support retina screens.
Right now reading all of this, I feel like I could make a perfect website in 2 minutes, but I know, I know that in a few weeks, when I’ll get started, I’ll be there, thinking I’d be unable to center this f**** “div” to save my life, shouting at this sticky footer that’s either not at the bottom or not matching the window’s heigth or not being clickable for some reason. And then, I’ll take a shower, some coffee, and will come back to this thread as calmly as I will possibly can.
^ this right here is the kind of stuff that drives me batty and makes me just give up.
the author recommends using a javascript function to update a custom CSS variable to use the actual window size in place of vh units because the latter are broken across browsers / platforms. then adding a listener for resize events. then adding debounce/throttling logic to the resize handler.
what the hecking frack. no wonder we end up piled-up frameworks like Bootstrap.
anyways, thanks for the tips - resources shared above have allowed me to ditch Tailwind and roll my own stuff and have it work better anyway.
I highly recommend Rachel Andrew and her clear explanations of the latest CSS for layouts, responsive and otherwise: https://thecssworkshop.com/
if you want a Virgil to guide you through HTML/CSS/finally setting up your own site, she is it. her tutorials are not free but are not that expensive, and IMO it is money well spent. a few of the intro ones are free to get you started.
and just generally, keep in mind that there’s always more than one way to approach a layout, so don’t feel you have to incorporate .js or whatever – you might want to, but there’s likely another way.
Totally agree, CSS is insane. It’s mostly because it’s just had stuff bolted on to it over the years instead of re-imagining it for the contemporary situation. Not to mention that the android / browser fragmentation issue is real.
I feel like its at this point where there are so many approaches to the same solution that its just confusing to know where to begin or where to point your compass. It’s not like regular programming where the same tools with different logic gets you to the same result. its more like different tools with different logic gets you to the same place, but all of the different tools are called ‘CSS’
calc() in css has been just the best thing that they’ve introduced. It should be able to compensate for the issues in that article to some degree.
In my classes (I teach this stuff at MCAD ) I’ve totally eliminated so much old css and am now just teaching the following as the beginner core skills:
Core: color, font-family/size, borders, padding, margin, width, height, etc.
Units: px, vw, vh, em, calc() (a dash of % for more advanced students). An emphasis on flexible units to eliminate the need for a lot of media query resets.
mobile: Media Queries to manipulate grid columns and rows
bonus: Css animations and transitions (so much fun power here!)
With that tool set, you can build about 90% of most things you’d want to. And likely 100% of the indistinguishably designed web that we look at most of the times these days.
Gridsome is a pretty awesome static site generator that uses GraphQL and Vue. There are obviously several similar frameworks out there for React, but as a primarily back-end leaning “full-stack” dev, I recently learned Vue and enjoy it. I recently built my blog with it.
Netlify - if you don’t know about Netlify by now, you’re really missing out. It’s an awesome site deployment and hosting tool that has one click HTTPS, easy builds, serverless functions, authentication, and more. If you feel like paying a very small amount, you can also get network level analytics.
What are some other cool or inspiring tools you’ve found out there and what have you done with them?
this is not exactly a blog question but a web programming question (not sure we have a general thread for that?)
we want to build a help form (for monome things) which sends us an email with some tags regarding the topic/subtopic. ideally the topic would dynamically change the sub-topics and also display a list of suggested helpful links.
this seems like an extremely common thing that is likely to have been previously done… perhaps as a javascript? does anyone have recommendations for something drop-in or with minor reworking?
@alanza started the thread "Stupid Questions" in Design for this kind of purpose I think? The title is maybe a little misleading but it’s been a great resource for me so far.
Typeform comes to mind as an elegant third party solution. But if you’ll be doing this without an embed, your keywords would be “forms with conditional logic” or “forms with decision tree.”
Probably a js library out there. Willl give it a look when at work tomorrow.