« first day (3462 days earlier)      last day (1472 days later) » 

8:01 PM
It's an interesting language, in a way
Not one I'd want to do professionally
 
one of the few reasons for updating with 'newer' langs
 
It's reliable though. Funny thing is it was supposed to be more readable compared to modern languages
 
it does get the job done, that's why it's left untouched, but look what happened now
 
It was also one of the reasons Y2K was a thing. As long as COBOL is gone by the year 10,000, we're good
 
people will still be using it for sure
in an emulator in an emulator in an emulator
 
8:15 PM
You can use it in Visual Studio if you want. Don't know why you would, though
 
Well I hope when 2038 comes around it'll all come tumbling down
 
Tay
my flexbox has align-content: center.... Why isnt it centering...
 
lol
 
Tay
:( what dude I just started using it
 
@Tay csstricks has a great article on flex
 
Tay
8:17 PM
Yes ik
Thats one one I used
 
Keep looking at it, it's a pretty solid cheat sheet
 
Anybody experienced with google-cloud-firestore?
 
Tay
Yeah, that center look is what I want..
But its not centering...
 
look at the width of the container
 
Tay
The width needs to be vw.
 
8:19 PM
...shouldnt it be justify content?
 
Look at that image you just sent. The items aren't centered horizontally.
 
Tay
o-o
 
@JBis spoilers
 
|| stars
 
!stars {1}
 
8:20 PM
|| stars2
 
Invalid command! Did you mean: stars, star, stats? Try help for a list of available commands..‍.‍.‍.‍.‍.‍
 
da faq is that command
|| help
 
Invalid command! Did you mean: help, halp, rules? Try help for a list of available commands..‍.‍.‍.‍.‍.‍.‍.‍
Command documentation and syntax can be found here.
 
Tay
Justify attribute* worked
 
cool. Look closer at the docs next time. That csstricks article has pretty much all the answers you need
 
Tay
8:21 PM
Dislexia, reading comments above and typing the wrong thing (or something like that)
 
It happens
 
Tay
Also, Sorry, I just didnt really see the picture correctly, I didnt know exactly whether justify or align-content would be what I needed
 
am i the only one that keeps forgetting whether its align-content, justify-items or align-items, justify-content?
 
I refer to that article every time I'm using flex
 
Tay
Anyways, before I go, I want to know, is there a way to squish all my elements together?

I mean like fill in vertical spaces.
 
8:23 PM
why commit it to memory if mdn is a quick search away
 
Tay
I want to push "paragraphine api" up
have them all go as far up as possible
 
display them in columns
 
@KevinB a google search wastes many cpu cycles
 
Tay
I considered that earlier, but wouldnt that change the flexbox design?
 
cpu cycles are free
 
8:24 PM
all cycles matter
 
it would
change is good
 
Tay
The only issue is IOS
 
and IE 9
and possibly IE11
 
@Tay You're either using rows or you're using columns
 
Tay
When it compresses all those columns into 1 location... then what...
 
8:24 PM
definitely 6 7 and 8
 
Tay
I guess Im going with columns then lol
 
Make Computing Great Again!
 
when it's too narrow for 2 columns, drop to 1
ezpz
 
Tay
how do I move the elements from the other columns into the first though without the use of Javascript 0-o
 
responsive design
 
8:26 PM
you can order them with css
#flex
 
Tay
Yeah... that works, just rendering it as a flex column... but now its back where I started..
 
Tay
it looks just like it did when I was using block elements
 
then use block elements
 
Tay
I want a mix of columns AND rows, except all the rows are eactly the same width
Block elements dont seem to cut it
 
8:28 PM
pick your poison
lol
 
Okay long story short there is no straightforward way to do what you're asking about
@Tay this
 
with rows, if the elements are variable height you're gonna get gaps.
with columns, if they're variable width, you'll get gaps
There are libraries/plugins that fix this with javascript
but you're unlikely to find a dynamic css only solution
 
Tay
Ok, Im going to "image" my idea so I can explain it better
 
If you never have to reflow these items you can try just positioning them statically
just float them
 
Tay
 
8:31 PM
that's columns
 
Tay
I want the columns to stack like that
 
any suggestions how to make the first dialog (or others) better i.imgur.com/eiGMM7q.mp4? It just looks like its missing something.
 
That's just columns
 
Tay
Yeah, it is, but when I use flex columns, they are in 1 column, they dont really... "line break vertically"
 
show us
 
8:31 PM
@JBis Needs a title
 
you mean you ended up with just one column?
 
user11867329
Which separator should I use for separating classes?
 
dialogs that are just buttons are confusing
@OakDev what
 
use |SEPARATHOR|
 
Tay
 
8:32 PM
Tay - turn on flex wrap and then reduce the container height
 
Tay
I want them to spread out to page width.
 
they'll wrap into a second column
 
user11867329
well say you got:
<section class="class1 theotherclass another-class-123453...>
 
width?
 
oh well
you can figure that out I'm sure
 
8:33 PM
.a.b.c.d
why you need a separator?
 
user11867329
@KevinB Thx
 
user11867329
I thought I needed one
 
it's just a css selector
 
||mdn css selectors
 
Tay
So, Im confused, I got answers from both of yall, what am I supposed to do
 
Why are your items taking up the full width of the column?
 
Tay
I want columns (done) and I want them to "wrap vertically" to page width and keep centered.
 
@forresthopkinsa yeah but what? "Choose or Create a Room" seems redundant
 
My answer about wrapping was assuming that you wanted multiple columns
 
user11867329
8:34 PM
no but I didn't knew you could just $(".bunch.of.selectors/classes")
 
Tay
Kevin because every block is 300px by default, it makes it look good on ios
 
@JBis "Join a room" "New room" "Existing room"
 
hhmmm, thanks
 
work with it, you'll find the right wording
 
i'm pretty sure he wants multiple columns
but because there's no reason for the container to wrap (there's enough vertical space) it isn't
 
8:36 PM
Right
Tay you won't get wrapping if there's no overflow
If you want it to wrap at a certain point, e.g. you want elements 4, 5, 6 in column 2, then flex-wrap is not the answer
flex-wrap will only wrap when it needs to
again, the csstricks article has the answers you seek
 
user11867329
@KevinB Is my understanding ok? > $(".bunch.of.selector.classes")...
 
yeah, if you want an eleement that has all those classes.
 
Did you read the MDN article

edit - I think the article maybe doesn't actually explain in enough detail
 
dont bother asking
just try it
if it works
it works
 
Tay
So if I do that
I can achieve this effect?
 
user11867329
8:39 PM
@KevinB I did and it didn't so there must be something that I did wrong, I just wanted to check that you were sure about what I asked.
 
user11867329
@forresthopkinsa yes I did, I know css
 
Tay
 
user11867329
but not JS
 
Selectors aren't a JS thing, JS just sometimes uses CSS selectors
 
flex might not be the answer you're looking for
 
Tay
8:40 PM
Yeah, it is a bit complex
 
user11867329
@forresthopkinsa I know.
 
||mdn class selectors
 
Tay
Everything needs to fit like a puzzle and wrap together to page width
 
This has the answers you seek ^
 
user11867329
8:40 PM
@forresthopkinsa No it doesn't, thanks.
 
!!mdn css columns
 
@OakDev Dude, what's the issue
it literally has an example of selecting based on multiple classes
 
user11867329
@forresthopkinsa >>Is this a valid way to call multiple classes in JS
 
Tay
@KevinB Well, take a loot at the image above I drew. How complex / difficult do you think it'd really be to make an adjusting column system like that?
 
8:41 PM
ez
it's just css and media queries
 
2 mins ago, by forresthopkinsa
Selectors aren't a JS thing, JS just sometimes uses CSS selectors
Are you trying to catch a single element with multiple classes on it?
 
Tay
Well, in more detail, like, what should I start with? flexbox? block elements?
.
 
user11867329
@forest I think so, it's a whole section and the section class contains multiple classes
 
Kevin just let him use flex, it'll do what he needs
 
i don't think it will
 
8:43 PM
maybe I'm not understanding what he's looking for then
 
but... i also rarely ever use flex
so i might be wrong
 
Tay
@OakDev

document.querySelectorAll(".class").forEach(element => { element.innerText = "blah" });
 
user11867329
There's no distinct text
 
user11867329
Also I don't understand JS properly.
 
tldr my experience with css/html is all... figure it out as i go kinda thing, i can't tell you what will work without fiddling around with it, :p
 
8:43 PM
@OakDev Okay so if you're trying to get one element, say a div that has all the stuff you need in it, and the div has the classes one and two on it
 
but i can usually figure it out pretty quick
 
then the selector .one.two will catch it
 
Tay
Ah, Ill probably figure it out, I usually do
 
user11867329
@forresthopkinsa Yes.
 
Tay
I even figured out how to make my own "3D" drawing system after hours of playing around
I guess, it just takes time
 
8:44 PM
What you're workign with isn't quite as complex as a masonry grid, so it should be doable with just simple css
i have a site that does that layout... let me see what it's doin
 
@Tay If you just want responsive columns you can use block positioning with media queries, or you can use flex. Both will work
@OakDev So, e.g. with jquery, $('.one.two') will return it
 
Tay
Well, I mean, if Im thinking of it more complex, Id have 4 columns. 4 for big screens, 2/3 for medium (pc and tablet screens) and 1 for phone screens.

And each column collects the elements in an array in order, it maps them to the columns depending on screen query
 
ew
it's using floats
nevermind
never do that
 
user11867329
@forresthopkinsa Yeah that's what Kev said, he's usually right when he answers directly and this time he even confirmed.
 
So it's a CSS selector
 
user11867329
8:46 PM
Yes.
 
I don't get what the confusion was
 
Tay
OakDev what are you trying to do
 
user11867329
There wasnt any when you jumped in
 
user11867329
lol
 
user11867329
Guys guys
 
user11867329
8:46 PM
Shh, I dont exist
 
@Tay Use media queries
 
user11867329
am a ghoss
 
user11867329
iz all fien
 
Tay
Forest is there a way to do it without JS?
 
8:47 PM
media queries are a css thing
 
Tay
Ik
 
Right, so, @Tay, you need a layout that will take all of your elements in a single container and distribute them across n columns
 
Tay
but like.. mapping the elements to the seperate flex columns depending on screen size
Yes
 
where n is determined by the width of the window
 
Tay
8:47 PM
Pretty much
 
I don't want to write your code for you but you can do this very easily
 
Tay
(give or take about 90vw / a margin of a a short distance)
Im sorry, Im just not grasping the concept
Ive never had responsive columns in 2 directions at once
 
Give me a minute
 
so, there's block elements, and there's inline block elements, yes?
 
You're good
Kevin's got it
 
Tay
8:49 PM
Um. I guess? Everything is basically inline though, except the columns
 
block elements, are like divs. they take up all available width, and adjust height to fit the content. inline elements take that a step further and adjust width to fit the width too
and they flow, like text
 
Tay
I use inline-block for most use cases
 
user11867329
@KevinB Thx workds
 
but, just like text, when they wrap they'll move all the way to the next line, leaving a gap
 
posted on April 08, 2020 by Srinivas Sista

The Dev channel has been updated to 83.0.4103.7 for Windows, Mac, and Linux platforms. A partial list of changes is available in the log. Interested in switching release channels? Find out how. If you find a new issue, please let us know by filing a bug. The community help forum is also a great place to reach out for help or learn about common issues. Srinivas Sista Google Chrome

 
8:50 PM
lets fiddle it
 
user11867329
@forresthopkinsa Hey! Sthapit
 
Tay
Alright
Ill port a small portion of my page to a fiddle, one sec
 
@OakDev hm
 
Tay
IE: Copying and pasting my css and js into a fiddle + 1 html page
K got a basic one setup: jsfiddle.net/MisterSirCode/fz5gse06/1
Excluding images
 
so basically, any solution based on inline-block is going to result in gaps
 
Tay
8:53 PM
Yes I understand.
Whitespace can be painful
 
user11867329
Damned interwebs. Works in fiddle but not in my thing.

Say I put JS inside a script tag from a HTML element. There shouldn't be an issue about selecting something out of that element, correct?
 
Tay
There are always workarounds
 
inside a script tag from an element?
 
user11867329
html element
 
user11867329
container
 
Tay
8:54 PM
Sometimes I get lazy and just make empty comments between inline elements and return through them
 
like <div><div><script/></div></div>?
 
Tay
ez fix
 
user11867329
a row
 
Wow. I just finished most of front end without a single bug from MobX.
 
user11867329
<div1>
<script $(somethingindiv2)<script><div1>
<div2>...
 
8:55 PM
That's a shining commendation
@OakDev but why
 
user11867329
wtf u want from me
 
ah
You don't normally put script tags in with the markup
 
user11867329
markup is the selected element from JS function?
 
<html>
  <head>
  	...
  </head>
  <body>
    <div>
      whatever
    </div>
  </body>
  <script/>
</html>
 
user11867329
No but
 
8:57 PM
or maybe in the head
 
user11867329
Well when I do:
<section class="some classes-01 class-02"> dasdasdasd</section>
<script>
$(call the classes from up) </script>

it works
 
there is a strong inverse correlation between how busy this room is and how much work I get done
 
user11867329
but if the classes are identical in everyway but not inside the same element, it doesnt work.
 
user11867329
@forresthopkinsa Need a dildo?
 
That'd help
 
user11867329
9:00 PM
Exactly.
 
so, to start with, flex-inline isn't going to work
 
Tay
alright
 
because that restricts the width of the container to just 1 column
aka fitting the content
 
When I am updating a specific array inside of an object or map, for some reason it deletes the other fields in that same object?? I am trying to figure out why, if I am only updating two arrays in the map, the other is a string, but that gets deleted once updated.
 
user11867329
@forresthopkinsa open a private room for 1sec?
 
user11867329
9:01 PM
If you actually would like to see the thing I'm talking about, which I doubt (cause work)
 
if you set the height of the collapse container to, say, 110px or whatver works for your width, you'll see that it places things into columns quite well
however, if you expand something, it pushes stuff from onecolumn to the other
 
Tay
Hmm, but.. What happens when I add more "portfolio entries".. basically more blocks
 
eventually overflowing off the side
 
Tay
makes sense
 
so we need a solution that doesn't rely on height
 
9:02 PM
@OakDev I'll help later
you'd be better off figuring it out in here, other people can help here too
 
to the cheatsheet
 
anyway. bbl
 
cya everyone o/
 
user11867329
@KevinB Sorry, I'm grabbing your focus.

Is it possible that I can't use the classes if they are not loaded before?

Say I <script>$(class1)</script><section class="class1">...
 
Tay
@KevinB What if I placed all the elements in a javascript array, and appended them to the colums from there
 
user11867329
9:05 PM
@JBis bi
 
user11867329
@KevinB nvm works.
 
user11867329
Here's a hypothetical candy
 
@OakDev no, the element must exist on the page for you to be able to select it
 
user11867329
Im testing because the test where it worked happened in a
 
@Tay that'd work, but then you're relying on using javascript to reflow them as you resize
 
user11867329
9:10 PM
I can't explain, one sec, lemme triple verify
 
Tay
yeah, Im just stumped on how to do it with css
 
i don't see a tool that'l do it in flex
 
user11867329
@KevinB It works and I feel like I've made a grand. Psychology professors should be proud/mad at you.
 
you essentially want three independent columns
or 4 on wider layout etc
the example i have uses absolute positioning to do it. yuck
 
Tay
Rip
The only thing I can think to do now is....
Hmm...
Well, i can create 3 categories
of things for my portfolio
like "Skills and Education" then "Languages and libraries" and then "Creations and Art"
and split them up based on that, then simply wrap or unwrap based on device scale
I mean, i would love to do the original idea, sounds fun and difficult, but almost too difficult
 
Tay
wow
thats the first CSS Ive seen with the nth-child method
 
doesn't seem to work for me
oh, derp
it has a fixed height
anyway, it works
 
Tay
alright, ill check it out
 
you'd just adjust it based on width for how many columns you need at each breakpoint
somehow
don't quite understand how he's getting it to wrap at 3 specifically or how to make it 4, or 2
 
Tay
Something to do with these?
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }
 
9:26 PM
nah
that just reorders them to follow the order in the dom
.collapseContainer::before,
.collapseContainer::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}
that does it
anyway i gtg, gl
 
Tay
wait
but what if you shrink the screen
rip
 
what i think it's doing is placing a flex element with a 100% height between certain items
and by doing so, it forces it to wrap
i think at most you can do 3 columns with that technique
::before, and ::after
so to go to 2 column, you just remove one or the other and adjust where it goes
also adjust the ordering
 
Tay
I guess?
lol idfk at this point, this got WAYY too complicated than how I wanted it to
Although I didnt expect it to trip me up either
 
but it's such a small amount of code, how can it be complicated!
it's... clever, in other words, it does the job... but in a confusing and likely to break if not careful way
 
Tay
more or less im slow and that last statement about making 1 or 2 columns didnt make a lot of sense to me
 
9:39 PM
do you know what ::before/after does
 
Tay
Relatively, I dont use them often
 
it creates a psuedo element. you can achieve the same forced breaking by actually inserting real elements into the list at the breakpoints, but then the re-ordering won't work
also, it wouldn't be dynamic
would require JS to go from 3 column to 2
 
Tay
Hmm, well, I want it to be as dynamic as possible. Do ya think I should just cave in an use the library?
 
¯\_(ツ)_/¯
 
Tay
Screw it, its just an unprofessional portfolio
 
9:43 PM
i had no idea that column layout was still considered a masonry layout
i thought only what sony is doing was considered a masonry layout
 
user11867329
@KevinB Man, I used to semi-joke about it, but now there's really a thing that has to be something that I don't know. It works on fiddle, but website it doesnt.

Can you kick me?
 
user11867329
Like, for a day
 
kicks only last like 30sec
 
user11867329
sure go
 
nahh
 
user11867329
9:44 PM
Where's the next Kevin tho
 
user11867329
@Andras
 
user11867329
I think I just remembered a password.
 
user11867329
Ok, sigh, let me try erm, une hypothese.
 
user11867329
https://jsfiddle.net/fvuk12qn/

This works? Right?
 
user11867329
Why doesn't this work : jsfiddle.net/fvuk12qn/1
 
Tay
9:59 PM
@KevinB I found a simpler masonry here: https://w3bits.com/css-masonry/

However, once I ran it, its stuck on the left side of the screen, even after centering it.
https://imgur.com/a/SyduG2Z
 
@OakDev syntax error: you have a }); at the end
 
user11867329
Yeah
 
user11867329
still doesnt add up for my thing
 
user11867329
ThaaaaAAAaaaats what I get
 
user11867329
for playing with the big boys
 
user11867329
10:03 PM
My click function from jsfiddle.net/fvuk12qn works
 
user11867329
but not on second element
 
user11867329
which is identical in any way from my POV
 
user11867329
aside the id
 
user11867329
10:41 PM
Man, I legit made everyone leave.
 
 
user11867329
11:38 PM
Right on queue^
 
11:53 PM
Do you guys think I can name a project virues, is it attractive? it has to do something with the pandemic.
 
user11867329
@Farhad I like arabic people.
 
cool
 

« first day (3462 days earlier)      last day (1472 days later) »