That special little code!

Everything related to the visual and coding aspects of websites.
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: That special little code!

Post by Mikari »

@Robin: An alternative to the many floats is display:inline-block; it takes way less work, I totally recommend playing around with it if you're looking for some new CSS tricks.

I discovered display:flex; today! There's so much to learn about it! Has anyone else looked into it?
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: That special little code!

Post by Mikari »

From what I've seen so far, mobile has a really bad time with it. Previously my sites just looked the same, only smaller, but flex is so broken on both chrome and safari mobile... That or I'm just a noob who doesn't fully understand it yet, despite the validator saying it's fine. I hope I'll discover what I'm missing for compatibility. Maybe it's the use of % sizes that's messing with it. Anyway, I'm looking forward to experimenting and hopefully figuring it out, I've barely scratched the surface so far.
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: That special little code!

Post by dubiousdisc »

Actually, support for flexbox is very widespread! You can safely use it pretty much anywhere. :D

Edit: But it does say that a known issue is that Chrome and Safari do not accept percentage values, so that must be it!

Edit 2: Mikari, you might want to check the "known issues" tab to see if there's other compound issues that you might be slamming into. There's quite a few of them...but you can usually work around all of them, I think.
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: That special little code!

Post by Mikari »

The weirdest thing I've run into so far is that it works fine on PC/laptop Chrome (even with the %), but not on iPhone Chrome O.o;; I actually tested it with pixel values and, while it did display the correct height on mobile, it still did that weird thing where the page wouldn't scroll all the way to the end when you switched to horizontal view.

Might be the positioning confusing the device. It's odd because this is the first time I run into something that breaks stuff on mobile (usually they're the same but smaller, not ideal for mobile but they look like they're supposed to). Of course being the geek I am, I'm all up for figuring it out. I guess I'll be studying up on flex for a while. ^^
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: That special little code!

Post by Robin »

dubiousdisc wrote: Robin: Oh my god yeah, the includes. That changed everything.
What is it exactly that gives you trouble with that code? I don't really understand what's up with your example. :o Maybe I can help?
LOL, mainly it's the tediousness of having to type out all that floaty code and having to make sure it all floats correctly and sdlkjfasldkjsjf I just hate long solutions to problems that should be quick to fix. xD

Which is why this...
Mikari wrote:@Robin: An alternative to the many floats is display:inline-block; it takes way less work, I totally recommend playing around with it if you're looking for some new CSS tricks.
...is SUPER interesting! (How do you make columns with display: inline-block; though?)

ALSO:
dubiousdisc wrote: I FORGOT TO ADD. Even and odd in CSS. Now you can make stuff like tables with cells of alternating colors so easily!

AND, MOST RECENTLY, viewport units. You want something to be as tall as the browser window, wonderful and responsive? It's 100vh tall. Boom. That used to be such a hard problem to solve, and now there's a dirt easy way to do it directly in CSS!
LOLWUT @ all this. Just--brain asplode :D
Mikari wrote: I discovered display:flex; today! There's so much to learn about it! Has anyone else looked into it?
The Robincat is intrigued!
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: That special little code!

Post by dubiousdisc »

Robin: I mean that it seems...too much code? :o I don't know what it's for, but I'm getting the sense that there must be a simpler and less brain-wrecking way! I'm just scratching my head because I know that even the most complicated things I've made didn't have that much code behind...

Mikari: Dang I wish I could help you test it :(
Good luck, and FIGHT FIGHT! Rise to the challenge! XD
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: That special little code!

Post by Robin »

dubiousdisc wrote:Robin: I mean that it seems...too much code? :o I don't know what it's for, but I'm getting the sense that there must be a simpler and less brain-wrecking way! I'm just scratching my head because I know that even the most complicated things I've made didn't have that much code behind...
The float solution I typed in my original post was the only way I could figure out how to get a columnar display (without using tables) for a long time. (It's actually how I designed this page, back in 2013.) It was a hacky, inconvenient solution--I freely admit that--but all I knew was that "ZOMG FLOAT: LEFT AND RIGHT ARE BE ALL END ALL THIS IS HOW YOU MAKE DIVS DISPLAY BESIDE EACH OTHER EVERY SINGLE TIME AMEN." I didn't know that any tools and snippets existed solely to make divs behave like a table :D

(Add into that the fact that at the time I thought every designer out there except me was writing ALL their own code, never having to copy-paste ANYTHING or use snippets, etc. That made me think that because I couldn't figure out how to write ALL my own code, I was a dumb designer/developer and didn't have much talent. After coming to Amassment, I learned that using snippets and webdesign tools was not a cardinal sin after all! :D)
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: That special little code!

Post by dubiousdisc »

I SEE! Okay, that explains everything XD
Yeah, today if I were to attempt a layout like that, I'd just do it with flexbox. Though, I see why that wasn't the easiest thing to do before that existed! D:

(It came out really pretty, by the way. :D)

Omg on the writing all of the code...I'm so glad now you know that's not it, I can see how that could give you a whole lot of insecurity ;_;

As far as I'm concerned, coding is about putting your brain to figure out problems. If you've already figured out the problem in the past, you can reuse that solution, it's not like it expires. And having snippets of code that you copy and paste everywhere because you couldn't remember them by memory is a perfectly normal thing, and in fact, good practice. Hell, some days I wouldn't remember my own name, let alone code syntax! XD

You know, I get the sense that the one you encountered is just an attitude that certain assholes have to make others feel bad. Great, if you can remember every bit of code by memory, that's great and fantastic, but, in the end, I don't think that makes you a better or worse developer. Coding is problem-solving. So I think that what really matters is knowing about the existence of your tools, so you know the right questions to ask, so you know how to reach the solution. That you need to look up things about the tools is, in the end, irrelevant to the main point, which is to solve your problem!

I'm sorry you had to feel like that. :(
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: That special little code!

Post by dubiousdisc »

To be honest, I do see the concern behind the thought of putting the disable right-click. I can see how someone could be afraid of being completely ripped off. The problem is that there's an abyss between wanting the ability to right-click and wanting to steal your entire site, and you never know the ways in which the right-click might become useful for completely different things! For example, sometimes when a site shows their pictures in a lightbox type of setting, I right-click to view image so that I can zoom on it more easily.

Then there's that those scripts don't really stop someone who's hellbent on getting to your content. In fact, to be completely honest - I'm a very bad person, but whenever I encounter that, THEN I feel like I've been given a challenge, and I'm totally going to find a way to bypass that. But I didn't want to steal your content. I just wanted to look at a picture up close! :(

I do see why you'd do that out of fear without considering all these other things, though.
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: That special little code!

Post by Mikari »

I write my own code because I find it to be entertaining. I do save it and modify it later, but don't use other people's code, it takes the fun out of it for me, though this is my personal preference. I do love checking out coding tutorials that tell you how they wrote a code though. Not sure if it counts as writing my code because I originally wrote it from scratch or if it counts as a copy+paste if I'm copy+pasting something I wrote myself. XD

I remember the right click codes! I used to make a link in an html on my computer and right click that to download the page, just so I could see what it was hiding. That was a long time ago, surprised to see this is still in use.

@Robin: Flex has ways to align columns as well, though I'm still learning that. As for inline blocks, I can definitely say they're more simple than flex, but still super useful. An inline block basically wraps around the content and aligns itself next to the other blocks. Here's an example in the Link Me section. The trick to it is setting the size. Say you want 3 columns that are 200px wide each, you would put that in the css class which all the divs belong to. the divs go inside a container that is 600px width, which makes it so that only 3 fit in a vertical row.

The height will be automatic depending on the content and you can decide to align them on the top of the row, middle or bottom. I didn't stretch them to a matching size vertically, but you can do that with min-height. On the same page in the Links section it has no tables or lists, it's all done with column css and the before pseudo class. You can combine those codes and come up with a variety of different options. :D For the layout you showed us, you could use height 100% then set the space between each div via margin or spacer divs.

One of the most useful things about inline blocks is that they can sit next to each other without being made to float and unlike pure inline, they retain their shape. You really need to try this, Robin, it blew my mind with how useful it is, I'm sure you'll get tons of ideas from it's possibilities. :D From what I've seen in your past layouts, this code totally fits in and it feels a lot friendlier to edit than multiple floats.
Post Reply