Where did I mess up the html
Hello
IM trying to do another FEM Challenge and just ready with the html
Live : https://roelofwobben.github.io/browser-extenstion/
But it looks to me I messed up the html somewhere because some text appears way to the bottom.
Did I mess up the html or is there something more wrong ?
@ἔρως @vince
2466 Replies
I don't see any css here?
(ignore the highlighted line)
that is correct.
That is the next step if the html is allright
I don't know what it's supposed to look like but it says you can remove the text at the bottom if you plan on imported it dynamically
it's placed at the bottom so it appears at the bottom
oke, I will take a look and as from tomorrow add the css
I think it will be a lot of css 😦
First I want to make it work with a fixed text
sounds like fun!
we see the next coming days
First I have to make the light theme work
and then the changes for the dark theme
some 13 colors in both so a lot to find out
but we get there
some day
@vince but the html look well to you ?
I don't know enough about the program to tell
I can critique once you have something more
oke
then time to write a lot of css with a lot of colors
Will costs me a few days I think
and I hope I can use that pen from Kevin as example how I can make this work
@vince how long would you do with this challenge ?
How long should it take you? Doesn't matter, you're learning and you're doing it as a hobby. Have fun with it
No idea how long it takes me
cannot look into the future how many energy I have on a day
but I think 1 week for the light and one week for the dark modus
If you set up the light mode right it should just be a matter of making the switching functionality for the dark mode
So like for example if you have a body background color:
Just use css props and you can toggle the value depending on if they're on light or dark moded
yep, that is the same "trick" as Kevin did here
https://codepen.io/kevinpowell/pen/EMdjOV
From tomorrow I will try to write the css
I hope I can make it work.
Afraid that this is more then I can chew and need a positve thing in my life not another failed thing
Don't look at it as a failure look at it as a learning experience
You're doing it for fun no need to put pressure on it
I know but I m a person who like to do things very good
And less feels like failure
it shouldn't
You can't do things very good without doing things very bad
You should see some of my old stuff from years ago
And I'm sure 5 years from now I'll be like 'why did I do it this way' when looking at my current stuff
wow i just moved on from this project few hours ago
and i just begin and alreadys stuck
@vince can you help me figure out why the filter-container is on the same height as the header
Now the header does not take the whole width and the logo is not on the right of the div
Live page : https://roelofwobben.github.io/browser-extenstion/
IM now busy with the mobile
The desktop I will do after the mobile is ready
You have it in a flex container 😄
And everything is in the
headeroke
I did it in a flex so I can use space-between between the two items which must be in the header
Then you want them on the same line?
the both icons , yep, I want them on the same line
I take a break
Now things are really messed up
@vince
updated my repo
@vince if and when you have time . can you help me with 2 things
First the header does not want to be centered
Second how do I get rid of the border on the moon icon ?
Put in some work and let me know when you're really stuck, it wouldn't be any benefit if I showed you the code right when you don't know how to do something
I dd put some work in it
And tried every "trick" I know
Have you tried googling it?
'How to remove button border css'
yep, for the border I did
What did you find? Did it work?
I tried :
and
where <color> is the color I need
chips, I see my errror
I did it on the svg not on the button
😦
Var(--color) is a custom property, that wouldn't work
Ahh classic haha
oke
now I hope I can find out why the header is not centered
think I solved it also
now a break till tomorrow
and I hope your are happy with the css so far
@vince
I dont have enough bandwidth to review the code unfortunately but if it works its good enough haha
it looks like it working
but I think I use already too much css
have u finished it
nope, I still have to do the cards thing
@bfmv this is how far I am
https://roelofwobben.github.io/browser-extenstion/
oh nice
@ἔρως @vince
Can one of your two help me figure out why the devlens icon is getting bigger when I do :
Live : https://roelofwobben.github.io/browser-extenstion/
because that's how images work
the image, by default, will be resized proportionally
oke
but I expect when I do 70% the image will be smaller not bigger
there is a bug somewhere 🤔
yep and I cannot see where
me neither
Then I hope vince sees it
on the first
.extension you have a .content-extension
the other ones don't have that <div>removing it makes everything look the same
adding to the others makes them behave like the first
the difference is the
display: flex that that .content-extension hasI know
I have to rewritten the rest.
Want to have first one ready
@ἔρως @vince can be be a good solution to make the height and width in px instead of in % ?
Or is then the image not responsive anymore ?
you can set a width or height
I know but for responsive images I think I can better use % then px ?
you can use px
oke, with px I can solve it
This look better
next : to make the remove button pretty
and add a switch
I use px all the time
beginner trap that you shouldn't use them
@vince oke
Kevins says that for margins and so you can better use em
And for fonts better em
HRU @vince
for fonts, usually, it's better to use rem
the problem with em is that it uses the font-size of the parent
that means that the font-size may end up being completely different than expected
Yea use a mix of everything really, just need to understand how the different units work
exactly
you can use rem for sizes, but you will be surprised
oke, the light theme is done
What do you experts think of it
Live version : https://roelofwobben.github.io/browser-extenstion/
@ἔρως @vince
sorry i am doing a ton of overtime recently and don't have bandwidth to really look at this 😦
oke, no problem
the channel for reviews is #showcase
I know but the challenge is not complete
you have a bug: 2 of the cards have
> showingboth solved
@ἔρως
I m more curious if the css has not to many things
it seems fine to me
Thanks
then now time for the dark theme 🙂
but not today anymore
What's the mobile design look like in the figma / image they gave you?
Spacing / font sizes / padding all look a bit off imo
you mean this one : https://github.com/RoelofWobben/browser-extenstion/blob/main/design/mobile-design-light.jpg @vince
GitHub
browser-extenstion/design/mobile-design-light.jpg at main · Roelof...
Contribute to RoelofWobben/browser-extenstion development by creating an account on GitHub.
otherwise here a image
ah okay
it's a bit different compared to the design
oops. then I have to change some things
I wanted to be as close as possible
I know a toggle switch is missing and I wanted to add them as soon as possible
if you have other things , just write here and I try to change them
The buttons and italicized text
Can you be more specific what is wrong there ?
The buttons are too large and the original design doesn't use the italicized text
oke, then I have to find out how big the buttons must be
Look at the design and then replicate that. It's probably because your padding is too large and you need more border radius on them
I know , the design does not say explicit how big things must be
So I have to eye-ball things like padding and width
Yup that's how it'll be in real work too unless your designer is really good
and this time eyeballing is diffcul t because on Windows image viewer I cannot know when the picture is on 100%
Yea its definitely harder when you only have an image to reference. If you wanna keep doing frontend mentor I think if you pay for their subscription they give you figma files which would make it easier
yep, and paying for me is not a option
Do you have venmo? I can send you the cost of a month's subscription
I do not and no-one have to pay for me
Okay no worries
Then I rather quit FE work
Why?
I rather quit then someone pay for my hobby
It's not that serious man I was just trying to do something nice 😂
oke
no problem
@vince is this better ?
Text is too close to the right and font is still italicized
Also your font size is set in px not rem
And you have a width in px remove the width
you mean the width of the remove button.
I did that because otherwise the text will be outside the button
and with the text also the button text ??
yyea the font being italicized is for the italicized text and the rest of it is about the button
Can you help me to make the button good ?
and I do not see why the text is italicized
aha, I see it
I choose the wrong font in my font-definition
If I did it right, the text should be good now
font-sizes are now in rem
Can you still help me to make the buttons right ?
I already gave you my suggestions above
If you remove the set width that should get rid of the 'text is too close to the right' issue
Then you probably just need to mess with the padding a little bit to get the size closer to the design
Those I already solved it all except the font is too close to the right
I have to think how to solve this problem :
the button takes now the whole div 😦
Try
max-width: fit-contentThat looks a lot better
now I have to decrease the font-size so it will look the same as the picture
hmm, this looks more then the picture but I find the button now very small
nope, this looks not the same
Have to think what my next step then will be
or are you now totally happy ?
@vince
Looks good enough, there's still things I would change but I don't have time to go over them
Good job
thanks
the text is different - the color is more muted on the original design
the spacing under the title is too small, compared to the design
What do you mean with muted : a lighther grey ?
yes, but on your version it is blue
blue ??
I never used blue anywhere
if I look it looks like the weight needs to be lower
this looks like blue text to me
dark blue
oke
according to the data I got it is this color:
hsl(227, 75%, 14%);
now I see it on a bigger image I can image that you say it is blue
Then i have to choose between those :
that is dark blue - #09153e
probably the 600 onr
one
oke, I will change it now
this better :
the best way to get the color is this way:
- open the image in paint
- zoom to the max, on the color you want
- use the color picker tool
- click on an area of uniform color
- click on the custom color thingy
- copy the values from there
the title and the logo were correct
just the text that wasnt
oke, then it uses two colors for the text
I can change that
the title has the dark blue the text under it has that neutral 600
oke
then I have to make a variable for heading-font-color and font-color
no, just one for the text
this better :
the color of the "remove" button is incorrect
it is the same dark blue as everything else
but you have it as the same color as the text under the title
font-weigght too
and the spacing under the tifle
title
yup and some more spacing between the button and text
id add just a tad bit more
the title is also too big
you need to reduce it by about 2px
you mean the Extensions one or the name of the extension ?
the name of the extension
if you compare with the design, the title goes a bit under the beginning of the symbol
in your version, it reaches under the line, on the first extension
Also box shadow on the card as well (and maybe a slight gray border? I can't tell from the screenshot)
This better :
It does look a lot better yea, title still too large though
and needs more font-width
weight
so, try removing 2 more pixels and revert to the previous font-weight
next try
I now remember why I left FE work
this little things costs a lot of time to get right
the remove button is still wrong
it's why a lot of people don't like it, lots of back and forth with clients lol
the color needs to be the same as the title
oke
moment
it's a huge list of tiny details.
if you miss one and you have 300 different things, you are screwed
you need to check one by one
oke, button is changed
now, the switch is missing
I know
that is the next thing I would add when this is "perfect"
I know custom switches are also a pain in the ass
not at all
you will see
can you show the result you have, and send the image of what you need to implement?
and I have to adapt the html to make it work it is on the same line as the button
is the button in a div?
at this moment, I do not think so
LIve version till now : https://roelofwobben.github.io/browser-extenstion/
im on the phone, cant see the code
my version till now :
the "extension list" and the filters are in the wrong place
one thing I see is that the text has to be wrapped earlier
the text wrapping in something you cant control that well
chips, that is somewhere lost, that the heading and buttons must be on the same line
oh, by the way, the title of the page is too big and has too much font-weight
and needs to be center aligned vertically
that alignment has to be done for the button and switch too
solved
nice
i was wrong, it needs more font-weight
and the filters are less wide
the title "Extensions" ??
and the red is wrong
yes
for the red I have these choices
try the 700
the 700
no doubt
and you had a remark about the buttons
looks correct to me
yes: they are too wide
remove the padding
the filter buttons ?
yes
looks not right to me now
Thet looking very small to me
okay, then put 4px 0px for the padding
you both happy nowa
and I can implement that switch ?
it's still too wide
😢
remove the width
now they are looking very ugly
did you use flex for that?
buttons arent supposed to do that
nope, I do not use flex
width: min-content
try that
nothing changes
also max-content changes nothing
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
something else is causing troubles, and i bet it is the flex on the parent
As far as I can see not
just move on to the switch then
.filter-options is the direct parent and that one has not display: flexwe will figure if out later
the parent of that one
filter-container has display: flex but that one I need to place the title and the buttons on the right place
and removing that one changes nothing on the buttonsthen something else is doing that
but move on to the switch
oke boss 😛
do you have any idea on how you will do it?
yes
first make a div I think I calll
card-footer
in that the button and the switch like this :
the div I can use display: flex and justify-content: space-around to put them hopefully on the right place
and then google how to make the switch like the picture
looks to me that I have to "remove" the old one
and make then a new one which looks like I want toso something like this : https://codepen.io/chalarangelo/pen/wvVKoyP
that is not a good implementation
😦
the checkbox isnt focusable
no focus means phisically debilitated people can't use tab navigation or other methods
and visually impaired will never know the input is there
That is the disadvantage of using google
You never know if the person who wrote it , knows things
listen, 99% of it will well implemented
it's just this big issue that causes it to be a "nope"
I understand
you can use it, but be aware of the issue
it's fine for what you are doing
for a real project for the public, then it isnt a good implementation
Oke
and I like to learn things well
so my feeling is now if a big implementation is not right I do not want to learn that way
there are way too many ways to skin this cat
what you can do is to use a label with a visually hidden text for visually impaired
I know
then put the checkbox inside the label
I was just looking at this one : https://alvaromontoro.com/blog/68017/creating-a-css-only-toggle-switch
Creating a CSS-Only Toggle Switch
How to create a functional and accessible switch component with HTML and CSS (without JavaScript) There are many articles online about how to create a switch using HTML and CSS only, without any JavaScript. How will this one be different? What value will it add to the existing articles? Why did I write it? :: Blog post at Alvaro Montoro's Person...
ask 10 developers to solve this and you get between 10 - 20 solutions
and they all work and they are all good
honestly, that is a really good article
and parrots some of the things i said
follow his final approach
then tweak it to fit your colors
oke, boss :p
The only thing I have to find out is the colors and maybe the dimisions
you mean this css :
yup
oke, will be tomorrow
alright
im tired today because my guts feel not right
go rest then
I will
I did some naps during the day
naps are good
Thanks for being my mentor today @ἔρως @vince
you're welcome
got a feeling I can be a good FE dev as a hobby
@ἔρως hopefully we will find out why the buttons act so wierd
it takes practice
i will take a peek in an hour or 2
and a person or persons who teach you things that you did not see
that comes from experience and practice
again both thanks
you're welcome
Nobody still a idea why my filter buttons are messed up ?
i haven't checked
im tired today
oke, then take rest
I can tommrrow try to make the switch
yeah, try to make it
with the tutorial I found, it schould not be too difficult
it won't
oke, time to take my heart drugs and back to bed
do that. tomorrow, there's more work for you
yep
bring my daugther to work , make that switch and maybe begin with the dark theme
should be pretty relaxed
yep
day after tomorrow , therapy day so a little less relaxed
GN
goodnight
@ἔρως @vince it looks to me I still need a width to make alll three buttons the same width
i don't know why it is doing that, and i am all out of ideas
me too
but I hate it that it is looking so wierd now
just set the width
oke, then time for the switch
something like this :
yeah, you can set the width a bit smaller for the first one, but that is fine
o, I always thought they need all three to be a even width
no, you can set a width for just the first one
chips, you are right
All three have a different width
I hope then I can solve this with
n-child
I can I thinkThis looks good :
it does look a lot better
not perfect, but a lot better
chips. I wanted it to be perfect 😢
the padding is too little
on all three ??
This is what is the paddig now :
maybe something like
?
So like this :
like that, but the width is incorrect
😢
which width
?
this better
I forgot to commit the lastest code
yeah, it is better
oke,
Then now take care that my daugther comes home from work
And then the switch
then the dark theme
and then a lot of js 😦
lots of js?
for what?
To make the theme switcher work
To make the filtering work
to change from active to not-active
if you use isotope, you don't have to implement the filtering
css does that
oke but still I need then to store or change things in localstorage
then I need to use js
yeah, but it isn't as much as you think
we see when we get there
but isotope looks a good way
I see that there even is animations like I have in mind
yup, and you don't have to do 3000 lines of js and css to handle that
it's okay to use things that others did, specially if they did it way better than we can do it
i know i couldn't do it without spending a buttload of time on it
🙂
it feels cheating but I see your point
Why invent what is already invented
precisely!
and no, it isnt cheating
for me it feels like cheating
My biggest mental hole I fall in is that I feel I must do everything myself and I have to do it
Failing is not a option
that's the thing: you don't
imagine writting the entire network stack from js because you dont want to use
fetch
you should use existing solutions for existing problemsI know but a voice inside of me says I have to do it myself
THat is one of the reason I get therapy now
Time for the switch thing
i know what you mean, but that will go away when you have to implement datatables
this is not only when developing but in my whole life
yeah, that is not good
I going crazy
I had three columns and suddenly it does not work anymore
and I cannot set the switch to another state
😢
probably something is overflowing
in the browser tools, add an outline of 1px to everything
the text says that flex-direction is not working with grid
is it uploaded
to the live site
can u link plz
live link : https://roelofwobben.github.io/browser-extenstion/
I think somehow the switch is too blame
Before it worked well
i think so too
I have it
the extension div was not closed properly
so the layout is allright now
but still the switch does not work
I cannot change it
your html is messed up
oh okay was just about t say that lol
sorry
any idea why I cannot change the "status" of the switch ?
No idea tbh, don't know why it isn't working
I also not
Oh it's because you have
role="switch"
you probably need custom js to get it to work with that, idk I've never worked with aria rolesWierd then
MDN Web Docs
ARIA: switch role - ARIA | MDN
The ARIA switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off."
MDN docs use a button not an input
You'll definitely need custom js
I don't think theirs even works
Like it moves the switch thing but the inputs never have the
checked stateaha
and with me , i cannot move it
I would just use this from MDN and customize it
Style it based off if
aria-checked='true' and in JS, when you click it make aria-checked either true or false depending on its previous stateoke, I used this article : https://alvaromontoro.com/blog/68017/creating-a-css-only-toggle-switch
Creating a CSS-Only Toggle Switch
How to create a functional and accessible switch component with HTML and CSS (without JavaScript) There are many articles online about how to create a switch using HTML and CSS only, without any JavaScript. How will this one be different? What value will it add to the existing articles? Why did I write it? :: Blog post at Alvaro Montoro's Person...
That trick I never saw. Use a button for a switch
Most people uses a checkbox to make it work
I do not use then the label because in the example there is no label for the switch
that is going above and beyond to make it responsive
i mean, accessible
I do not think this is a remark for me ?
no
it isnt
oke, so "must" I do it like vince says
Or later make the js to make the switch work like the person who wrote the tutorial says :
I just don't know how it would work with how he's done it - I checked the codepen and looked at the DOM and the inputs don't get a
checked attribute? Maybe I'm missing something
If the inputs don't have a checked attribute when you click them then why even use an inputLike I posted before . He lets the reader write and think of how it must work in js
but you have a point
That is why I hate custom html things
Very difficult to make it work properly
you are: the
:checked pseudo-classI thought the :checked psuedo class worked off if the input had a
checked state
Or is it independent
Because look at the DOM in that codepen, if you click the input it doesn't get a checked attr
That's why I'm like huh lolsorry im very confused now
For me one is saying go further with what I have and the other is saying go for another approach 😢
Just ignore for now lol
You can do the approach u found i just don't know how to fix it for u
it's independent
it works with the property of the element, not the attribute
still very wierd that on the codepen , it moves and on my site I cannot move that stupid thing
probably something is missing
I see, then what's really the point of using this over a button if we're just going to treat it like a button via JS?
E.g input.onClick(toggle())
it's not like we're making use of the
checked attribute to do anythingbecause it's the correct element
Is it though? Because the MDN article used a button instead
also, we are: when you submit a form, the value is stored
and he's supposed to make it save too
found it
I missed this on my css :
that is an important one
personally, i would use
transform: translateX(-100%) for gpu acceleration, but that is good too
it does the same, but is more performanti didn't know that was a thing goodd to know
oke
it is a thing
switch is working and for me it is looking well
you can leave it as-is, dont worry
so can I tomorrow work on the dark theme or must I change there something
it's fine but id still use a button here but thats me 😉
the colors and size have to be adjusted
checkbox all the way
o, I thought the size was allright @ἔρως
you cant uncheck a button
it's 4-6px too big
u cant check a checkbox either though with how it's setup rn 😭
otherwise id agree
yes you can
look at the dom in that codepen bro 😭
but it looks like a switch
This better :
@ἔρως
you dont need the checked attribute for it to be checked
then how do screenreaders know its checked
the size looks a lot closer now
🙂
the property
not the attribute
property
Then finally tomorrow make the dark theme work
idk what the difference is ill have to look it up, u mean css property?
i didnt know screen readers could read those
very maybe FE work can be a nice hobby
no, js property
try it yourself
go to the mdn page for the checkboxes, and inspect the "horns" checkbox
use the accessibility tools
on the right, it will say "checked: false"
check the "horns" checkbox
then click on another element, in the accessibility tree, then go back to the "horns" checkbox
what does it say?
it is a nice hobby, but sometimes a pita
interesting, i just dont know why it wouldnt add a
checked attribute by default if its adding the js prop??
seems kinda stupidbecause it isnt a property that live updates the attribute
when you set false, the correct way to handle the attribute is to remove it
and that doesnt make sense
that is why the
:checked pseudo-class was added: to work around the fact the attribute wasnt updating or being added/removed because of the property
name, id and class are some of the few that are updated when you set a value in the property, from js sideill have to read more into this
colors worked also
So if you both do not have any feedback it is time tomorrow for working on the dark theme 🙂
pita ?
pain in the ass
what do you have so far?
yes, expecially when you both wanted very small changes 🙂
I have now the light theme working
hey, the small changes are what takes it from "good" to "perfect"
Todo :
- dark theme
- theme switcher in js
- sorting in js
- make the switch working in js
there is a way to make the theme switching without js
I know but they cost a lot of time and sometimes frustating
i know it is
@ἔρως only with css ?
Then I think I have to rewrite a lot of css and html to make it work
no, not at all
and Kevin has a good tutorial to make it work with js
it's a big shoddy, but will work
shoddy ??
yes, shoddy
as in, not a great or ok solution
I do not know that word
oke
I was using this as a example : https://codepen.io/kevinpowell/pen/EMdjOV
something like
body:has(#dark-mode:checked) { --props }?O, i forget on my todo list
- read the json file and use that for displaying the data
so my todo is :
Todo :
1) dark theme,
make the active, focus and hover states work
2) theme switcher in js,
3) sorting in js,
4) make the switch working in js
5) read the json and make that display with js
so a long way to go before this is ready
I do not think that will work
The icon is a button not a checkbox
Hmmmmmmm wonder if it should be a checkbox 🤔 I don't know how other people implement it
fyi I would totally make it a button too, but trying to think outside the box of what I usually do lol
oke, I see that Kevin uses a button in his example
yes, but
> with a more specific selector too
that is the last step
personally, i like to either use a checkbox or a select (for 3+ themes)but still curious what @ἔρως has thought of a css solution
literally this
with tiny changes
but that is the same as Kevin does in his tutorial
but then he uses js to add and delete a class
and to store the status in localstorage
or do I misunderstood things
it's really up to you however you want to do it
you'll need js no matter what to save the preference to local storage anyway i think
@vince off topic question : Who are on your avatar ?
it's from a game called Yakuza
oke
The :focus is only for screen-readers or also for the rest of the world
you do, yeah
both
oke
because here I have to do something with the focus, active and hover states
yea those are a real PITA
I hate doing input styles 😂
So many states
not so many changes are asked for if I look at the images
Sometimes the background changes, sometimes the border
so not a lot of work
border is for focused, background is for checked
but only change the border color, not size
correct if I look very swift
usually, that is how it works
then there is hover, which changes the border and/or the background and/or the tick mark
I have to think if I do this first or first the dark theme
but first dinner and relaxing
Tomorrow a lot of therapy 😦
and rest
I already slept from 9 till 14.00 hours today 🙂
and sleeping is around 22:00 h
so I think first the states and then the dark theme
@ἔρως is there also a js library for a dark / light theme switcher
probably
i dont know any
You don't want to use one there's no point, it's easily done with regular css / js
You can do most of it with
:root:has(#dark-mode-checkbox:checked) { --props } if you use a checkbox instead of a button
So you would do something like
Then the only thing you'd need to do I believe is save the preference to localStorage w/ JSbasically
it's also nice to have a way to use the system setting, but it's fine if you dont use it
Ye which is with https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Though maybe that's why Kevin uses a class, how would you write this because you'd have to duplicate the props no?
basically, yes
I think I'd still rather keep it to css even if it's duplicated honestly
Less logic
but that's just me
actually
no
you can check a media query and use js to set the checked state of the checkbox
you can do this:
- read from local storage
- check if dark mode is set in the media query
- fallback to light mode
you can use a class, or an attribute - both work
or just set the checkbox on loading
Oke so change the button to a checkbox
Can i then use the different icons when only use css when using a checkbox?
yes
hide one and show the other
maybe use the same trick as I used to make the switch work ?
like the switch, but instead of moving left and right you show a different icon
oke
then I have to look where I use that icon exactly
In the content or in a another property
so some css to rewrite 😦
under the checkbox
??
- checkbox
- icon 1
- icon 2
o
I thought I could do this :
And then on root :
or something similar with the right classes for the checkbox
@ἔρως
and then in the css
on the right class
you can, but that is not how i would do it
How would you then do it ?
as i said: the icons after the checkbox then show/hide based on the checked state
Hmm have to think how to make that work. Right now i do not see it
same thing as the switch
but show/hide the elements afted the checkbox
basically
what does ~ mean ?
and how do I then do the unchecked state
sorry, I find your way still confusing
the unchecked state is the default
so it will be
yeah
oke, then checked can be the dark theme and unchecked the light theme
or the other way around
it's however you want
exactly
so I still learn things on css after 2 years doing fem challenges
maybe I will use this "trick" tomorrow to look if I can change the icon
before Im going to work on the dark theme
Google 'what is tilde selector in css'
done
it looks for siblings
yup, it will select the next siblings after the element
in this case,
input ~.icon will select all .icon elements after the <input>so I can do :
Sorry, I do not see where I can make the icons siblings
what's a sibling?
For me a sibling is a child of something
So it has to be inside the parent
exactly
and to be a sibling of the input, it has to?
so
yup
LIke I said inside a parent
but the selector only works in which children?
but input is a self closing one so I do not see how to use it inside it
in this example something of a class icon ?
you didn't catch on how it works
you should re-read it carefully
yes You wrote that it looks for all .icon after the input
but that is not like the definition I gave
exactly
no it isn't
so this is confusing me
It looks like I do not understand sibligs right
can you check the + selector then?
the plus is the next sibling
and the tilde is?
the tilde does the same, but for all elements after the input
can you see the difference?
oke so I can do this :
but then I have to hide one of the two
and take care that the icon is placed above the checkbox so the user do not see the checkbox
basically, yes
oke, nice puzzle for tomorrow how to do that
I m getting a head-ache again 😦
thinking too much does that to me
I feel that the heart problems I have with a too low heart rate and yesterday my guts that hurt and where not working properly
Have made me mental unstable again 😦
one question : schould then the checkbox not the same width and height as the icon ?
@vince thanks for the support
nw mostly all epic lol i just chime in to argue
you also help
yes, no ... depends on how you implement
but i would say "yes"
I was thinking that because the user clicks on the icon but in real the checkbox is changes
if the checkbox is smaller, the theme change would not work
with pure html and css
Or am I again misunderstanding things
but also from your argue with epic I learn a lot
me too lol
and if im confused I will say it
That is also one of my learning points
Take care of my boundaries
i commit mistakes too, so, not gonna say im perfect
gotta learn from that too
We here say : Nobody is perfect so im nobody
yup, and you can also decide to use a background image instead of having 2 icons there
🤣 so you're perfect?
yeaah
and that is why now I have mental problems 😢
hmm, then I have to look how I can make a difference between the dark and light icon
a lot of times FE work is the same as BE work
A lot of ways to do things 😦
exactly
it's how you feel about it
and what somepne has teach me
I think my former "work" has learned me good things about css but also some very bad things
I still doubt between Kevin ways of using a button
or your way of using a checkbox with some extra css to make things work
you can try both
im planning that
I have time
the best way to understand why we decide a way is for you to do both
Like I said already im planning to try both
Then I also learn the good and bad parts of a way
@ἔρως I think I will try your first because It only needs html and css
and that is what I have already
i think it is the easiest one too
The only thing I do not see how the icon should overlap the checkbox
but maybe I can look how some others did that
you can use a background image instead
??
a background image for checked and unchecked
oke
looks like the way I would solve it
it works
???
the background image
I was thinking I "have" to use this html
so I wonder how the img would overlap the checkbox
you can, but you don't have to
you can simply make it into a grid with everything centered
it looks to me that with the background-image I do not have to use that html
So you offer another solution
there are so many solutions
I know
The greatest frustation of developes
there are a lot of solutions to a problem and not one is a bad one
maybe I go for my own solution. that one I understand
go for it
yep, after some sleep
and if I surive all the therapy tomorrow 😦
you did a lot today
yep, maybe too much
but we see
in hopefully 45 till 60 min bedtime
you should rest early then?
That is why im.watching tv right now
tv usually doesn't have anything interesting for me
off topic but this might be the longest thread ive seen on the server haha
not even close
me and roelof had one with about 4500 messages
omg lol
it was about a wordpress plugin
sounds about right lol
lol wordpress is a mess
Chips. and my idea was if im good in FE work to look if I can learn how to make good block templates for wordpress
And later learn to be a block plugin developer so I can help volunteer organisations with no money to have a nice wordpress site
you can still do that
I know
but I have also doubt because I still cannot find good resources to learn that for free
And I cannot see if the resources are good or not.
I see that a lot of wordpress people writes things where I ask myself do they really have the xp and knowlegde about the subject
learn by example
copy the 2025 theme and just mess around
oke, that is the way I can learn to make templates from nothing in the future ?
it's a way, yes
you can see what it does, how it does it and change or mess about to try to do your own thing while you experiment
oke, I was trying to remake the layout of nice websites's I found on the net
then try it
you have nothing to lose
maybe I will after I done more FEM challenges to get more cofident in FE work
I was looking at this one : https://mindspring-light.webflow.io/
MindSpring Light – Webflow HTML website template
Welcome to the MindSpring Academy, where we nurture each student's unique strengths, helping them grow into confident, capable individuals ready to succeed in life and beyond.
I know it copyrighted but I wanted to do it jut for learning purposes
but this is going really off-topic
We were talking and discussing the FEM challenge
it sounds like a good starting point
how's the challenge going?
good , only today no time yet to change things
I hope at the end of the afternoon or begin evening I can do a little bit
and I hope I can make it work that the switch is a checkbox instead of a button
and hope that it will not costs a lot of time
have to leave
it probably will, as making a dark-mode sometimes just starts to get super buggy
we see
first make that "stupid" checkbox working somewhere today or tomorrow
🤣
it will work
I can do nothing more then my best
and that is all you should do
exactly
maybe a stupid question but where can I then see if a checkbox is checked or not when using this html
?
in js or in the devtools, when you check the properties
and where in the devtools do I find this ?
Right now in the html I do not see any difference
no, you wont see any difference there
on the panel on the right of the devtools, where you have the "styles" tab selected, look for ">>" and click it
then you will see the "properties" option there
oke, found it
I had to enable it first
and it seems to work
now the css to make the icon work
sorry
it will be easier than you imagine
I do not see how to make the sun icon visble and the moon icon not with this css
`
you hide one and show the other when checked
oke, but I do not see how
that's because you will use that to show the hidden one and hide the one that was visible
sorry, still do not understand
lets say I have this :
how on earth do I select one of the two ?
within the css I just posted
you add a class or an id
oke
but I cannot use a id within a css declaration as far as I know
You can add an ID to both images like dark-mode-image and then if input:checked ~ #dark-mode-image display block
Probably a cleaner way but that should work
oke
that is another way as I thought me was talked yesterday
Then we had about this css
the
.icon is just a "placeholder" for the real dealYea sorry forgot to put sibling selector in last message
aha, and I took it litteral because of my "stupid" autism
no it's not your fault i missed it, i would have taken it literally too
so I must then make 4 css classes.
two checked one with both images
And two unchecked with the two images
To make the right one visible or hidden
not necessarily
Honestly
I'd recommend doing something like this
You can get away with using a div instead of an image I think because it's not supposed to be accessible
Anyway I actually need to be productive at work today (they want an EOD showcase) and I'm already like 2 hours in with barely anything done so I gotta get on that 😅 I'll respond when I have time
of course @vince
thats a huge waste of html and css
just make the input have the background image
im now very confused by all the options
I quit for today
lol no epic is right don't listen to me
there's always a lot of options in the frontend
as i said, there are a ton of ways to do this
what im saying is to set the background image for the
input instead of using other elements
this way, everything uses 1 element and you dont have to worry about things like pointer events and positioningoke
So something like this :
something like:
oke
I have then to use a class because I have more inputs on the page
but I get the idea
chips not working
I have this html :
and this css :
but still no image to see 😦
I checked and the url looks right to me
you should use an id
???
As far as I know I use a id
that is all you need for this
Why on earth do I not see the images but when checked a big checkmark
also this is not working
no idea what I do wrong so no coding for me today
you have to change the
appearance to none
the ::before and ::after MUST have a content set to a string, or it won't exist at all
just add content: ""; and you are half-set
and by changing the appearance to none, it should work as you wantstill no image
you have to give it a width and height
then make sure it is on top of the input
still no luck
try to set the input to block
??
display: block on the input
Try giving the pseudo element some height, eg height:100% so that it has the same height as it's parent, by default the pseudo element will have a height of 0 as it has no content.
@Chris Bolson I did already give it a height and width
ah yes, sorry
@ἔρως if you mean this , it changes nothing
maybe the icon is too big?
try adding
background-size:cover; to ensure that it remains within the bounds of the psuedo elementthat is a good callout, as people make the worst junky svgs with 30000x30000 of size
no luck
does the image exist?
add a
background-color: red for testing
also, add position: relative to the input, and position: absolute; top: 0; bottom: 0; left: 0; right: 0;he, then I see it
so I need to change the background-color to the right one
see :
ah, crap
now work a little more on the colors but the idea is working 🙂
first dinner
oh, i see what it was and what i had in mind wasnt an issue afterall
but yeah, go have dinner
oke, sometimes FE work is really a PITA
told you
I know
expecially when you do not have a idea what is wrong
and I tried that background-color more and then nothing happens
wierd things browsers
just rest, it's alright
Oke boss 😛
And tomorrow make the dark them work ??
yup
hopefully I can make that work in 1 day or afternoon
and then a "lot' of js to write
- to store the theme
_ filtering (but hat can be done with the library you told me )
- chancing and store the active or non-active part
so this is keeping me busy for 1 week
with time, you will get faster at it
We see
yeah, we will see
@ἔρως and do you think im a good student ?
it's hard to pass on knowledge to you, and i notice you lose context easily
but besides that, yeah, i think you're a good "student"
I know that problem.
My mind has then a fixed idea of how to solve a problme
And I do have problems to see another way compkete
@ἔρως
meanwhile, i see all the ways to complete this
im not
my mind is running in circles at the way I thought I can solve it
Can yopu help me one more time with a color
?
I have this as choices :
What is the background-color of the sun-icon
I doubt between 800 and 700
i have no idea
maybe the 700, but you have to test it
I will try
maybe a stupid question
But how do I change the backgroundcolor of the header when the darkmode is enabled
for my feeling I have to combine
#theme-toggle:checked and header somehow ?
or am I on the wrong way ?i would have to see how you're doing that
I have no idea that is why I asked here
Im looking for a way I can tell that the header must be some other colors when the darkmode is enabled
you won't have to, kinda
???
The colors on the dark mode are totally other
Or do you mean use the variables somehow ?
just use the variables
then we change the variables
sorry, I still do not see it
Maybe i do
and so on ?
yup
then you just change the value of the heading variables
and the rest that I need to change on the same way
yup
Nice work for tomorrow
Now time to sleep
you should be able to finish tomorrow
We see
Some colors are difficult to see which color it is
use the trick i told you about yesterday
Oke i will
now it's resting time
Yep
Tried this :
but the background-color does not change 😦
because that is being applied to the input, and only the input and it's children have access to that due to the scope
Then I have to read how we yesyterday discussed how to solve this
we said that way I now try
it's more of a
html:has(#theme-toggle:checked)
but there are better ways to do itand of course I do not see that better way
i can see a few, but i am working now
i can think of using the checkbox just as a representation of the mode, while the real value is somewhere else
oke, I still do not see it at all
my first idea is then that the value is also stored in a css variable
or do you mean store into localstorage but then I need to use js
And my plan was first to do all the css and then do the js
you do need the local storage, but that is the next step
Then I do not see it
and I will wait till you back from work and have time to learn me your way
do you know how to use localstorage?
yep, witj js
localStorage.setItem(key, value);
There i put something in localstorage And with localStorage.getitem(key) I can get a value out of it And I know nothing more about localStorage except it lives within the browser
There i put something in localstorage And with localStorage.getitem(key) I can get a value out of it And I know nothing more about localStorage except it lives within the browser
you need to be aware that EVERYTHING into local storage is converted to a string
With the theme selector I do not have a problem.
I thought of using enabled for the dark and disabled or null for the light theme
that makes the light mode the default
yep. that would then my choice
that should be easy then
?
if it is so easy why do I then not see the step before storing it into localstorage
you just have to do something like this and set the right colors for the elements
I did use that and it works
I now can change the background-color
but I stopped finding out the rest of the colors because I thought there would be a total other plan
chips, all colors almost done
except the background-color of the icon
I quit for today the colors make me crazy
I cannot get them right
Will upload it to github
This is what I have now:
and this what it should be :
all those dark colors looks a lot the same
tomorrow maybe another try
without a conversion to rgb or hex, i have no idea what those colors are
but then again, i would do what you are doing: trial and error
why not use a color picker and just pick from the image
I try that but the colors code does not match 😦
hmm which one are you using
paint and pain shop pro
haven't used those. usually use microsoft powertoys color picker.
do you have a working codepen or repo or something. I want to see if that will be more accurate
What it schould be :
it that what you mean ?
yeah sure that works
otherwise
Here is the repo with my code and in the design is also a good picture
https://github.com/RoelofWobben/browser-extenstion
GitHub
GitHub - RoelofWobben/browser-extenstion
Contribute to RoelofWobben/browser-extenstion development by creating an account on GitHub.
@Ganesh
what i get from a quick edit
it's not perfect though
also I didn't do any changes to the linear gradiant applied to body. I'm no good with linear gradiant
The linear gradient is given and I think that one did not have to change
how does the icon which you can change from dark to light theme looks like
?
@Ganesh
looks better then I could make
may I know where which colors you use
I just dropped this by picking from powertoys color picker
oke
also do note that some of these might not be acessible. I had to tweak
--font-color for example so that it would reach 4 contrast ratiomaybe I have to change the given colors a little
I was trying to use the given colors for this challege and then you cannot make it work
Thanks for the help @Ganesh
@ἔρως that is what i hate about FEM challenges sometimes the given colors are not right
maybe they only let people pick colors from a predefined palette?
Hmm
They say this :
but also this :
so it looks to me that there is room to adapt the colors
oh, a jpeg
yeah, the colors will be wrong
ads far as I can see , with the given pallet I cannot solve this challenge
you have to zoom in a lot and MAYBE you will have an usable color
Im thinkimg of using the colors from Ganesh and callit a day
instead of trying to use the given colors
or accept that it is not looking like the picture
just use what looks the closest
That are the numbers that Ganesh has found
then it looks most close to the picture
go for it then
@Ganesh one question
What was your color for the background of the icon
which icon
The icon to change from dark to light them
so the sun one
don't think i changed that
I kept it as yours is
only changed the
--background-color css variableThanks
@ἔρως maybe im going tomorrow further.
Have to think how I name and what colors the filter buttons must have
Think I need more css variables
😢
This is really a PITA work
right now I do not find it fun anymore
it does get irritating at points
oke
could not stand that it was not working
What do you think of this try
orginal:
Did I do a good job
I only have to find out how to change the color of the svg
And I know that is also not funny
maybe go tomorrow for the easy solution and change the svg to currentColor instead of a fixed one
Otherwise I have to make a filter and that is a really PITA
Time to rest
hope I still a good student
I've been very busy at work so haven't been able to look as much, you're doing great. There's still some inconsistencies with your design and the original but if you're not having fun anymore don't bother with the small stuff it's close enough
it's close
the red is off, the color of the buttons needs changes and the checkboxes aren't colored yet
(the switch ones)
oke
So tomorrow :
- choose another red between these :
- Red 400:
hsl(3, 86%, 64%)
- Red 500: hsl(3, 71%, 56%)
- Red 700: hsl(3, 77%, 44%)another red for the dark mode
- choose another red for the dark mode
- look better at the colors of the buttons (I think you mean the filter buttons)
- color the checkboxes in dark mode
- add switches to the rest of the cards
- add hover and the other states
and then js time
wil also be fun 😢
you will see that it isn't as hard as you imagine
we see
I do not know how hard the library is that you mentioned for the filtering
the part of adding, chancing , deleting items in localstorage is I think not so hard
it's extremely easy
you just have to:
- access the file somehow
- add buttons
- minimal setup
the example code is a fully working demo
we see when I get there
first the 5 css "problems" to solve
@ἔρως @vince still in doubt if I can be a good hobby FE developer at the moment
What do you think of what I have done so far ?
If your goal is to just have fun you don't need to be good at it
If your goal is to make websites for people, I was worse when I started
You're ready to do volunteer work if you wanted to ever try it
You want to be a professional at it? Lots of practice and real world experience
i can't classify you as "good" or "bad": just junior and in need of more challenges
oke, there are more then enough FEM challenges to go
you just need to practice
do you have 1 or 2 displays, by the way?
@vince for the volunteer work I have to learn how to make wordpress block themes
But first I want to be more confident with doing it with just html, css and css
You don't even need that
At home I have 1 display.
At "work" there are places with 1 and places with 2 displays
you should get a 2nd display
if you have the space
I know but my computer cabinet is too small for 2 displays:(
I have 2 but I only really use the second one for music lol
i use both
At work I maybe can arrange for a place with 2 displays but there I go for 2 mornings in a week so some 8 hours
but then I have to ask if I can do FE work there
but first try to solve this one and then maybe look for another challenge
Like I said FEM challenges enought to practice
@vince what do you meant with " you do not need that "
you don't need html, css and js to make a theme
elementor can do a ton of stuff
i think it is paid
I meant the other way actually, you don't need wordpress if you're volunteer and they just want something really simple up but epic makes a good point too
yeah, not using wordpress is good too
I had one client for a while where the site was 2 pages in basically just html, css, and js and he'd pay me when he wanted edits done lol
hey, money is money
yep, and I want to learn to make it with only the current "page" builder
I forget the name
Gutenburg?
but also I doubt if I want to learn wordpress because the docs and the help is a mess
Or as beginner you get the answer there is a plugin or aa answer use GPT
With both ways I do not learn anything
That what I was thinking of
Just gotta use what you're comfortable with and gets the job done if you want to do volunteer / professional work (learning doesn't matter as much), otherwise if you just do your own stuff learn whatever you want and take it one step at a time
exactly
but for now GN
maybe after a few FEM challenges we can look what the right steps will be to also be good at that
GM
Do I have a good list to work on today ?
I mean this list :
- choose another red for the dark mode,
- look better at the colors of the buttons (I think you mean the filter buttons),
- color the checkboxes in dark mode,
- add switches to the rest of the cards,
- add hover and the other states
@vince @ἔρως
I m going crazy According to the picture the filter buttons and the cards should have the same background And they have But why does it then look different ?
I m going crazy According to the picture the filter buttons and the cards should have the same background And they have But why does it then look different ?
does this red look better ?
for dark mode, it's the ugly pink-ish red
well, not pink-ish, but the muted one. also, the selected filter has dark text and no border
Then I have to be :
other choices of red are not given in the readme
oke, now I think I understand what you mean with
there are 2 different red colors
the light mode and dark mode have different reds
I know
I try to find the red one for the dark mode
just extract the color
oke
it's annoying, i know
very annoying
but it is what it is
yep
but these little details are really a PITA and make me wonder if I really like FE work
But on the other hand I want to make it as close as possible
this is part of implementing any design yourself
one in figma would help a lot
I know but then I have to pay 😦
you don't need it
and again the color of the jpg of the red is not in the given colors 😢
if you can leave a comment, say there that the colors are wrong and some are missing
Im throwing my computer out of the windos
according to PSP the red color is (1,228%,168%)
but as I use it like this :
then I see a white color
228% and 168% are impossible values
just get the color in rgb
then it schould be :
the switch does look a lot closer
now the rest:
I mean this list :
- choose another red for the dark mode, (done)
- look better at the colors of the buttons (I think you mean the filter buttons),
- color the checkboxes in dark mode,
- add switches to the rest of the cards, (done)
- add hover and the other states
with the colors of the buttons , you mean the text-color of the active one and the border of the active one ?
yes, and the border of those filter buttons
oke, so in the dark mode no borders
Have to think how to do that because on the light one they have borders
no, it has a border and a background
it's hard to see, but it has a border
I take a break before I become really crazy
you should take regular breaks
yes, boss 😛
this details work costs a lot mental
i know it does
I will see when I have the energy to workk further on this
you seem to need the weekend off
for sure tomorrow . Then we celebrate my mothers birthday
And maybe Sunday to recharge from the Saturday
We see if I get some energy today
2 out of 5 ready 🙂
lets see how it goes
exactly
It will be after weekend I think
I see that with the filter buttons I have to make 2 new css variables
- filter-button-background-color
- font-color
- filter-button-border-color
To make things right
I need a lot of css variables here. With those 3 there are then 11 css variables
wonder if that is not too much and I have to combine some variables
how is it 11 variables?
I use now these variables for the dark modus
and that is I think 8 and then 3 new ones
if you are using repeated colors, you can do, for example,
--filter-button-color: var(--checkbox-point-color);oke, right now totally no energy so I see when and if im going to work further on this
dont worry about it
I do not have the engery to worrry about anything 🙂
but I wonder if my css is going the right way or could be cleaned up a lot
make it work, make it good, make it fast
that is the way
just worry about making it work
yep and that is difficult enough
why worry about anything else then?
one of my other pittfals is that I want to finisch it yesterday
I want to do things fast and perfect
so, you want pink fluffy unicorns dancing on rainbows
yeah, that is not how it works
in my head it should work that way
That is why I get a lot of therapy on my "old" age
To see where the problems are and how I can solve them or learn to live with it
i think you are expecting everything to be a walk in the park, then get frustrated with things when it takes "too long" despite being about the normal time
I know, My autism and youth has thought me very bad things to survive
But as I said I work on that and it has the highest priority for me
it should have
time to relax , Feel very bad today
go relax
in frontend the concept of perfect is not a thing lol
i get caught up in that too 'i want it to be really good / perfect' but it will never be so don't worry about it
even i, at work, wont get it perfect
Just do your best, and over time the concept of 'your best' will evolve/ change
Whenever there's a client involved there is no perfect 😂
for example, i have a design in figma of things i have to implement
but figma can't do sub-pixel rendering
it says that a text of 16px with line height of 1.2 is 19px tall, which is wrong
it is 19.2px - otherwise you get 1.1875 of line height
you arent expected to do everything pixel perfect, even when you have a design for you to check against
I know
the best any of us could do right now is to have a cold drink
I already did
Right now this challenge is costing me too much energy
SO like i said I take a long break
i have a cold drink too
almost weekend.
After weekend I will look if I go for FE work or for arduino
it's weekend for me
For me also
Hopefully within 1 hour to bed
Tommorow birtday of my mother so a lot of stimulusses
😢
just relax and forget that the code exist, and try to have a good day
I try but I have a mother who can talk 16 hours into 8 hours
so no time to think about anything
i know the pain
and hopefully I can Monday solve that stupid button problems and the other problems
don't think about it
oke, boss 😛
GN
goodnight
How was the day with no questions from me ?
still pretty hot
o, here wet and cold
13 degrees and the whole dau little rain 😦
and made yesterday a bug report on the colors : https://discord.com/channels/824970620529279006/1214860504103657493/threads/1375499496552923176
i can't see what's there
here the copied text :
lets see what they say
exactky
I think I hear nothing
you did your part
the same problem as you hvae when you try to het a review for a challege
yep, and it is now out of my hands
yup, and you just have to rest too
yep
I hope one day is enough after a visit to my parents but we will see
you can continue this on monday
we see
I have make no plans
it's a good weekend to relax at home
oke boss
GN
goodnight
@ἔρως this is the first respons I got from a moderator of the FEM discord channels
at least someone answered
but it's easy: they give you 1 red, the light and dark mode have 2 different reds
that is right
with 99,9% of the reviews you do not get any respons
yeah, you got lucky
No no, they gave you 3 reds
im never got lucky. Still waiting on feedback on my first two ones of a few months ago 😦
one of the reasons i got fed up with FE work
no respons to questions or a totally beginner tries to help you
😦
do they get lots of messages?
For help of for reviews ?
with help I see the last 2 - 3 days 3 questions
with reviews between 6 and 11 a day
that's quite a fair bit of review requests
I know
and it looks like 1 a day get a review
Still enjoying your lazy weekend ??
yup, i love lazy weekends
mee too
expecially now the heart drugs not working properly
The specialist and I are trying now for 2 weeks what the right dose it
I have now a bloodpressure and heart rate are almost under or just above the border of being a problem
But it is now steady
which makes it not worth it to get angry at the code
nope
health is the most important in life
and im not crazy about the code but on the FEM community
It looks it always your fault and they never make mistakes
that's because they don't want to double-check or are tired of people saying there's mistakes
Could be, I think the easist way it to solve it
Then it would not be al lot of people saying it again and again
my 2 cts
but new devs do get a ton of things wrong
yep
that is also why I hear not to use FEM to practice with FE work
but it is the only free recourse as far as I know
i don't know any other
so the same as with wordpress beginners are not lucky
get no good help to get good
wordpress' help is pretty eh anyways
exactly
use GPT or use a plugin is not always the right way to learn things if you want to learn to make custom thimgs
but learning things like Laravel and/or Symphony is very diffcult
chatgpt is a terrible idea if you don't know how to do it without chatgpt
Exactly
so if im going on with FE work I have to look which way im going
front-end or back-end, but need practice in the end
yep
but FE can be wordpress work, work with js framework , work with a php framework and so on
yeah, it very diverse
or maybe go for full stack js or maybe even a language like ruby
Think that c++ is not very usable as full stack
no, c++ isn't that usable for this, and very easy to make huge costly mistakes
What do you recommend ?
what do you really want to do?
making nice websites for volunteer organisations
and challenged myself to become better and better
then html, css and javascript
oke, what I do now
but first try to finisch this sometimes annoying challenge
yes, finish this challenge
and then look for another and another and another 😛
but im happy you and vince are helping me .
The FEM comminity is not always very helpfull
I keep confusing frontend mentors with frontend masters
🙂
@Ganesh I was complaing that the colors in the readme do not equal the colors of the image
And according to a mod on the FEM discord channel you and I are wrong
The colors do match
according to me they are wrong
we can all live in our own realities
I agree
for both statements
but it makes me wonder if I want to stay with a community which offers very little help
It's your choice. There are multiple communities out there at least so it won't be the end
I know
this is one of the most welcome and helpfull community I could find
Dinner time
hope it is tasty
it was tasty.
Pasta with tomatos , courgette and some garlic sauce
and some ham
@Ganesh dark theme almost done
Some details to do and that one is also perfect
see : https://roelofwobben.github.io/browser-extenstion/
@ἔρως
Border color of the filter buttons is now allright :
or schould it be more dark or bigger then 1px ?
can you send the original?
of course
here a better picture
the filter buttons are bigger
and the active one has no border
the "extensions" part needs way higher border radius
and a border
the dark/light mode checkbox needs border radius too
the "extensions list" text needs more font weight
😦
list get longer and longer
I tought the light one was already improved 😢
oops. and i missed also the box shadow. Also a PITA one
Todo list :
- the filter buttons are bigger
- and the active one has no border
- the "extensions" part needs way higher border radius
and a border
- the dark/light mode checkbox needs border radius too
- the "extensions list" text needs more font weight
- choose another red for the dark mode, (done),
- look better at the colors of the buttons (I think you mean the filter buttons),,
- color the checkboxes in dark mode,,
- add switches to the rest of the cards, (done),
- look at the box shadows of all blocks
- add hover and the other states
@ἔρως
Do you miss anything ?
doesn't look like it
happy to hear
if I see the big list I almost loose confident that I ever finisch this one
and when it's done, you will be happy about the list being gone
I know
but right now the list is getting bigger and bigger every time I ask you for a review
but I also know you do that to learn me proper FE
it's not just that
it's for you to see that, yes, things are too different
sorry what "should" I see ?
the differences
all of them
then you implement a design in css and html, you're supposed to compare both side-by-side and check the differences
except when there isn't a design and you're told to "use your best judgement
I see
old problem where I have learned to slow down and be more in the moment
but still practising to make it myself in the real world
With FEM they said this :
very vaque what is "as close as possible"
as close as you can
icodethis and scrimba are both free resources to learn FE- scrimba is interactive course platform and ICT gives you challenges where they provide the reference and you rebuild it in their code editor. After you submit your challenge you can look at other submissions and observe how other people approached the same challenge. I found it very helpful and learned a lot from my peers code
iCodeThis
Projects to improve your coding skills!
Learn to code with Scrimba
Scrimba is the fast way of learning to code! Our interactive courses and tutorials will teach you React, Vue, Angular, Web Development, Node.JS, JavaScript, HTML, CSS, and more.
Note that I code this only provides design picture and no info on colors font etc.
if it is a png, it's good enough
if it is a jpeg, you're in deep hell
I'm not sure what it is. The platform is web based ide and i didn't see a download option, besides the right click
you have to login
the icodethis has a reference to your username on that website.
im not sure if you intend us to know that information and if it is against the #📝rules - the ones about self-promotion
Def not trying to promote my profile , changed, thanks!
i was more worried about you sharing your username unintentionally than the rules, but, you're welcome
Everyone a good weekend ?
it was short
I know the feeling
I want a week with 4 days weekend and 3 days work
i woke up at 6am because it was too bright
Therefore we have curtains that make the room very dark
i need the light 😦
me too but not on 6 o clock in the morning
@ἔρως
you said this :
`
Do you mean the width or the height or both ?
both
they need to be wider and taller
oke
I hope I tommorow have the energy to work on this
Today I heared that the hearts drugs needs to be changed again
don't worry, the challenge isn't going anywhere
i know
is there a "trick" I can see how bigger the buttons must be.
Right now it feels im not getting any closer to finisch this project
yes:
- go to photopea.com
- take a screenshot and paste it
- upload the image of the challenge
- make the challenge image transparent
- align the image
- increase/decrease opacity and see what's wrong
thanks for the hint
you're welcome
When I see the list of things that need to be changed getting longer and longer I loose hope
that's normal
just focus on one thing at a time
I tried that trick with photopea but my layout is so different from the orginal I cannot see how much I have to change on the buttons and so on
then crop to the buttons, if you can
Tried also that one
then use just that, and try to make both look the same
I mean, then i also do not see it
yes, the buttons are too small but because the gap is also different it is a big mess on the screen
Too much for me to see what I exactly need to change
try to fix the gap and width
bummer, buttons need a lot bigger
yup, make the first button the same size, then move on
Height not so much , I think 2 - 4 pixels
But the width a lot 😦 Hopefully I can find out how big they need to be
here's an idea: go by huge increments of 20 or 10 pixels
then reduce to 5 pixels
looks to me the width needs to be 2 times it is now 😦
then 1 pixel
do it
This will be a lot of trying , making a screenshot and looking 😦
you can use the snipping tool for a smaller screenshot area
If I want it really the same I have to do that a lot
I think the header is also not perfect as a example
yeah, which is why you try to fix more things at once
like the grid
maybe , I see at the header that the height is not well and the icon is bigger and more nearby the border
So if I want to make it perfect, I have to change a lot of things 😦
yup
but I wonder if I have to do it
nope
you don't have to do it
just has to be as close as possible
still a vague description for someone with autism
basically, it means "if you're happy with it, that's enough"
perfection isn't required or expected
oke, and im happy as it is almost perfect.
Perfection is required by myself
When I do what you said I see 100 things that need to be changed
And that makes me feel like I said earlier
i know how it feels
Time to sleep now
And if I try to make it more perfect then I have to do it one part by 1 part
So it will takes some time before I can goto js 😦
you did a lot today
yep, but not on this challenge 🙂
and that's perfectly fine
I know
a lot to do to make this very good
I have to see when I have time and energy for it
maybe on friday, so you rest tomorrow?
have to see
I like to do every day a little
just a little
oke boss
then tomorrow look if I can get the height of the header right
you should be able to
we see
you can do it
I know but we see if I can do it in one day or that it costs me more days
if it takes more days, then it takes more days
exactly
perfection costs time
Couldn't you just add something like
padding: 6px to the button and be done with it?
Are you trying to manually set the widths and heights? don't do that if you areadjusting paddings does work
and that's what's needed
I have set a this :
I tried to adjust it but then the text is not in the middle somehow
So I add a width to the second and thirth button
@vince
Don't add a width but I know you're going to bed soon so we can talk tomorrow or whenever
Keep it simple
oke
I can delete it
I think the numbers will be something like this :
i needs a very little higher and about 2x the width it has now
The width of those buttons are determined by the text inside of it, so you shouldn't need to do anything other than put the same padding on all of the buttons and let the content dictate the width
You might need a larger font size
Idk though I don't have the design on hand
oke
I tried the padding but no luck
and it has to be
the buttons make me crazy
@vince @ἔρως
GN
live link : https://roelofwobben.github.io/browser-extenstion/
gn
You don't need to make them exact
I increased the font-size to
1.125rem, padding: 8px 16px, line-height: 1, and align-items: center in the parent container.Thanks looks very good to me
Forget the line height
You don't need it, I just like being intentional about it (when I remember lol). Go to bed though this is tomorrow / Friday thing
Yes boss😴
Why crying
?
that's not a tear, that's a drool drop from a sleepy emoji
sorry
for?
mis reading the emonicon
I just read that it means something else
@vince align-items on the button does not work because it is not a grid or flex item.
When adding it it messed up my layout
hmm, which parent does Vince mean here :
I tried several but still no luck
so please some help to figure this out ?
use inline-flex
I will try after lunch
you mean on the button ??
yes
Does not make the text centered on the buttons :
no, but makes it so you can center it with the property vince told you
I did that as far as I know :
The parent container that holds the Extension List title and buttons
Remove the widths from buttons
oh, thst
that
Then still the text in the buttons is not right:
dont give them a width
I did not
I disabled all the widths as far as I know
You haven't
You have a width on all of them using
:nth-child() selectorI disabled it :
the last one still has a width
then I have to look where that width is coming from
just inspect the button
found it
delete it
I will do
buttons looks good now
I hope when I compare them with the orginal they are good now
it's possible that there are tiny differences
css can sometimes be a real PITA
Capture the 'essence' of the design, doesn't have to be exact. So I made those buttons that big because that's what it looked like proportionally in the design to the title 'Extensions List'
You can also bend the design a bit too if you're just working on it yourself
oke
so one of my list 🙂
Todo list :
the filter buttons are bigger (done)
and the active one has no border,
the "extensions" part needs way higher border radius
and a border,
the dark/light mode checkbox needs border radius too,
the "extensions list" text needs more font weight,
choose another red for the dark mode, (done),,
look better at the colors of the buttons (I think you mean the filter buttons),,,
color the checkboxes in dark mode,,,
add switches to the rest of the cards, (done),,
look at the box shadows of all blocks,
add hover and the other states,
the list is smaller bow
now
yep
one real pita is still there . the box shadows 😦
I hope I can do that one for last
https://getcssscan.com/css-box-shadow-examples
This is my go to. I just pick one based off what would look good or close to the design for each project
If you have a figma file you can get the exact box-shadow, but even then sometimes it doesn't look good in the browser, so I end up just using something from that site
that is handy
I doubt between 2 and 6
You want something more subtle since there's going to be a lot of box shadows right next to each other (since they're going on cards), so maybe something like #36 - #39 but play around with whatever on there and see what works
im thinking then more about #36
#39 seems to big
@vince @ἔρως what do you think about the box shadow :
orginal :
looks really good!
I thought also
another problem solved 🙂
Add a very slight 1px solid gray border (gray being whatever color they gave you for light gray)
idk how it'll look but we can try it
I have three grays
which one do you think of :
I doubt between :
- button border color
- filter-button-color
try them all
oke boss 😛
will be tomorrow.. Dinner is almost ready
And I need time to rest
but you mean as border and then the shadow ?
Yea both
I don't think your font is loading correctly?
Looks like the url path is messed up
Maybe it's not though? I've just never seen it like that
Nevermind don't listen to me it's loading correctly
yep, old problem
first time it does not show up in the network tab and when you do ctrl f5 then it shows up
still I wonder if the path should be
./assets....... ?
oke, it loaded so I think the path is allrightYep path is correct 😁
happy to hear
if the todo list gets longer I become more crazy then I m now
How about we just say this one's finished, it doesn't seem like you're having fun with it anymore
You're doing this as a hobby treat it like one, not work
I know
and I want to make the last todo also work
and of course the js
and maybe later some things that are not asked but could be nice to have
as adding or editing cards
oke, changed it on the real site
@vince @ἔρως happy so far
https://roelofwobben.github.io/browser-extenstion/
i will check in a bit, playing overwatch now
NP
looks good!
@vince thanks
Todo list :
- and the active button one has no border,
- the "extensions" part needs way higher border radius and a border,
- the dark/light mode checkbox needs border radius too,
- the "extensions list" text needs more font weight,
- look better at the colors of the buttons (I think you mean the filter buttons),,,
- color the checkboxes in dark mode,,,
- add hover and the other states,
7 to go then
some are really simple
did you color the switches?
nope, still on the todo list
second last one
I only make the buttons good and add box-shadow where needed
@ἔρως
oh, that's what you meant
7 things
that's not bad at all
maybe tomorrow I can try to solve 2- 3 things
and today, you rest
Most difficult one I think is the bigger border-radius on things
yep
I hope between now and a hour to sleep
just do what i said before: go big and then adjust
What do you mean exactly with go big ??
just pick a random value that's seems about correct
which will probably be too much
for the border radius
if I think really really big it will be a fullstack one with a database
But then I think I need to use a framework and therefore it is now to early
what?
chips , I forget one thing on my todo
Make it work so it reads the json
that's the last one
could be
I think I have then to rewrite some html so that js makes the card
But we see when we get there
You could make it a variable like
var(--border-radius) and then just change it once and it applies to everythingthat's what those are for
could be a good solution
It is the professional solution
I only have to find the good value
I do now 8px and according to the feedback of one of you two that is too small
so some trying to do tomorrow to find the right value
maybe around 20px ?
GN both
goodnight
GM
What do you think of this border-radius:
for the filters?
for the header, and the cards and the moon icon I changed the border-radius
I thought the filters had a good one
@ἔρως
A quick detour :
Could this not be a wordpress theme or plugin or both in the far far future ?
the moon checkbox is missing the border radius
it could, if the license allows you to use the design for anything outside the project
chips
I have then to look where things went wrong
that checkbox (for the light/dark theme) just needs the same border radius as the header
hmm, then it looks not good to me
it schould look like this :
so I think the icon needs to be bigger or the border-radius needs to be smaller
I tried to make everything 30px bigger but then the icon looks very big
you are right, the 2nd one looks a lot better and seems closer to the design
the second is the design 🙂
so back to a border-radius of 8 - 10 pixels ?
is the border radius in a variable?
at this moment it is with a value of 20px
But I think that is too big for the icon
then do this:
border-radius: max(0px, var(--variable-name) - 4px);
the max function selects the highest value - if the variable has 20px then it will pick 16px (20 - 4) because 16 is higher than 0
if you set the variable to 4px or lower, then it will be 0px, because negative values are lower than 0px
if you need, adjust the 4px for something elsethanks
this looks well to me :
but I see something wierd
I suddenly have this :
two times the same selector does not look well to me
are those in separated places?
yep
deleted the second and adapted the :"checked one and everything works fine
but what do you think of the border-radius of the icon ?
i think it looks close enough
since we dont have dimensions, im guestimating everything
yep. the disadvantage of only having pictures instead of design files
i did notice that the spacing at the top and bottom is too big
maybe the size of it is incorrect or the text is too big
todo list gets smaller and smaller :
- and the active button one has no border,,
- the "extensions" part needs a border,,
- the "extensions list" text needs more font weight,,
- look better at the colors of the buttons (I think you mean the filter buttons),,,,
- color the checkboxes in dark mode,,,,
- add hover and the other states,
- read the json and use that
Which spacing
the spacing in the header ?
yes, but at the top and bottom
oke
something like this :
you've reverted something, because the border radius is gone
no , I did not submit something
one change was local , the other in the browser 😦
all changes are submitted
I think it needs to be bigger
the icon looks now very very big
for my oponion this looks better :
it looks much closed, but now the "extensions" text is misaligned
on the second one ?
this better :
no, it's not properly aligned
it's too at the top
oke
then i have to think how to solve it
is that a grid?
At this moment, it is a flex instead of a grid
eh, it works
inspect it
This is the css at the moment
then click next to the display: flex
click on the buttons that have something showing a line in the middle
sorry. I miss you
I have this :
you see the display flex?
it has a button
where do you see buttons that show a line in the middle
click it
I did that
and then I see this
then click on whatever buttons have a line in the middle
sorry, that button I do not see anywhere
oh, right, in firefox the button does something else
do it on chrome, if you have it
or on edge
you mean the align-items button ?
yes, or the other one
i forget the names
np
clicking the buttons and seeing things happen is easier
I already add that in the latest screenshot
alright
is this allright ?
Then I hope in the weekend i can solve the rest of the todo
now time to rest
nope, try the align-content too
Then nothing happens
I tried that also
is it live?
the site is live from the begining
https://roelofwobben.github.io/browser-extenstion/
this is without the align stuff
this is the problem
just add this to that element:
oke
I thought of :
that causes the image to take too much space
oke
I take your suggestiojn
and it looks now like this :
perfectly centered
happy to hear
another problem bites the dust
can you share the original one?
of course:
@ἔρως still a few things to solve
I think you can just pin the original design pic since so people don't have to scroll to top everytime or ask you to post it
change the grid to flex and then increase the padding
we don't have permission to pin things
Same for the site url
Oh right
Only mods can do that
@ἔρως where do I have to change it
Thought at least forms would allow the creator to pin stuff too
the grid to flex is the same place
the padding is on the header
we can ask the moderators for that permission, but i think we don't have because it applies to the entire forum: including the post list
I miss you
That is already a grid
this
@ἔρως in the github it is already flex
Ah damn that's not very convenient if it applies to whole form
padding is now 0.8 rem
Back to 1rem on the header
I will change that after a big break
Heading to bed to take a long break
you sound like you need a big nap
forums were an afterthought
like many things discord does
Main features seem like an afterthought too these days
yup
Padding of the header back to 1rem ??
try it
with padding 1 rem it looks like this:
can you compare to the original, like how i explained yesterday?
looks good to me
keep it then
oke then still to do :
- and the active button one has no border,,,
- the "extensions" part needs a border,,,
- look better at the colors of the buttons (I think you mean the filter buttons),,,,,
- color the checkboxes in dark mode,,,,,
- add hover and the other states,,
still a big list but 2 of them bite the dust today
the first one needs some fiddeling . no idea what color red is the border
but first time for dinner 🙂
dont push yourself too hard too
I know
that is for the weekend and maybe even after it
maybe monday?
can be
or saturday 2 , sunday 2 and monday 1
Monday also a appoiment with the dentist 😦
and I still hope im a good junior which learns a lot
well, i noticed something
you're so unsure of yourself you're not being able to see that something isn't exactly correct
I know. Im very unsure of myself.
There were and are moments I do not feel worthy.
pointing out that something you've done isn't "correct" is an important skill too
and not being right is fine
and the surgery of December has made me mental very vry unstable
today, i had to replicate a design and i did some things that weren't 100% perfect
and guess what? nobody cares
I know that im not always right and have to learn a lot
as long as it looks close enough when comparing your version with the design, that is absolutely fine
That is why I m happy with the therapy I get.
We have it now about that im much too strict of myself and how I can turn that around
but it needs time to change. What im done in almost 60 years is not changed in a few days
I still feel that everything has to be perfect to the design
that's the problem: it will never be
and i mean never
just a difference in dpi or screen resolution will change everything
even a different version of the fonts will change everything
I know but a voice inside me says it needs to be
I have to let see how good Im
for myself I must solve this challenge
and be already finisned it
but we are going off topic
you can consider your project finished at any time you think you're happy about it
that is the problem Im never be happy
I always see things to improve or things to add
knowing when a project is done is an important skill
oke
I m now looking for the color of the active button border
alright
Borders around the filter buttons schould also be good
they do look good
Thanks
what was already the problem here :
if you mean the cards , they already have a box-shadow so they need also a border ?
no, it was the "extensions" part
the whole thing
oke, I do not see a border on the light theme
also not on the dark theme
move along then
oke
Then for the weekend :
oke then still to do :
- look better at the colors of the buttons (I think you mean the filter buttons),,,,,
- color the checkboxes in dark mode,,,,,
- add hover and the other states,,
The first one I need to look well what was meant then
it was the filter buttons
but check if the colors are correct in dark mode
the enable/disable checkboxes have the wrong color in light mode too
Oke nice to do in the weekend
have mercy 😂 @ἔρως (jokes)
The last one looks simplex to solve for me
@vince why?
lol I was just making a joke about how they're adding more to your to do list 😂
One very little thing thst Costa a few minuten to solve
that's a relief 😄
Hru? @vince
And hru? @ἔρως
cooking in this heat
it's 31ºc in my bedroom
Bummer
You are a late eater
Im watching tv
it's 7:39pm
not that late
For dutch People it is late
not for me
sometimes i eat dinner at midnight
I have to be in bed around 22.30 - 23.00 to feel like a human the next day
Tired as always
It's 15:00 here
Here it is 21.00
here's 8pm
Three man three timezones
Beauty of internet
my timezone is easy: same as uk
oke
@ἔρως you live in France if im not mistaken
I thought that they just like me are in the Europe/Amsterdam timezone
nope, not france
portugal
almost good 😛
Time to sleep
yes, too hot here
goodnight
Here it is at the moment 18 degrees outside and 22 inside
So I hope I can sleep
31ºc in my bedroom
then I wish you good luck when you try to sleep later
GN for real
goodnight
The last remarks solving will take some longer
I still think the colors of some things are not right
double-check the colors
I will do that this weekend
do it when you wish, as long as you don't overdo yourself
that I try to do
still learning
it takes time, but don't worry
yep, time , practice and a lot of failing and trying again
just like verything you try to learn in life
yup, but we can tell you what's wrong instead of you finding it all by yourself
You can
I like the current therapy because first we see a bad behaviour and then we practice a lot with some better behaviour
And there I learn a lot from
So I still think I messed up the css stuff with the colors.
If I would do it again, I would leave the colors as It is
And use that names for things like background-color.
I think it is then easier to change
because now I see that some colors are used on multiple places
yup, and those colors can be set to variables which are used for multiple places
exactly
more code but I think in the long run easier to maintain then the mess I made
and easier to change too
do we not both say the same ??
no, easier to maintain doesn't mean easier to change
oke
for me it feels the same
i honestly can see them as almost the same thing
oke
more work to do 😦
a little, yeah
Work for tomorrow I think
Almost time for dinner
Off topic question:
What stack do you work with ?
@ἔρως
at work, i've been using php (with wordpress), html, css, js, mysql
i've used other languages before, like blade from laravel, use scss as well and use typescript as just a type checking tool
oke
i do know and use a lot more than this, but that's what i use daily for work
I have a hate/live relationship with wordpress
Sometimes I looks a fun tool to help volunteer organisation to get nice websites
I know a site where very little volunteer organisations asked for a wordpress developer to update the theme
but the help ypu get from the community is almost none for a beginner like me
if you just want to learn wordpress, now-a-days, the best is to make a block-based theme
i know
but I find no free good courses or tutorials how I can approach this if I want to build a new theme from stratch
Do I put the colors and css in the json or in the database ?
So a lot of question and no answers
but as I said earlier
First practice a lot with html css and js
yeah, i don't think there's any (paid or free) content, but i didn't try to find much
if I see how long it cost me now to make this one ready .
I think it will costs me a lot more practice to get really comfertable with just html , css and js
and I noticed for real custom sites you need a lot of custom css in wordpress
So that is why I first want to be good at it
and then in the far far future learn to write my own plugins
So I can make in wordpress what I have in mind
To come back at the FEM challenges
I also have a dream to solve all the free challenges there
you will need to finish the next project a little faster then
I hope I can
depends on how difficult the next one is
There are beginnes challenges , you can do in a afternoon
And there are ones that costs some time
as a example: this one looks very easy to me : https://www.frontendmentor.io/challenges/social-links-profile-UG32l9m6dQ
Frontend Mentor
Frontend Mentor | Social links profile coding challenge
In this small project, you'll build out your social link-sharing profile. You can even personalize it and use it to share all your social profiles!
and this one looks very hard for me :
https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9
Frontend Mentor
Frontend Mentor | Interactive comments section coding challenge
This is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!
Frontend Mentor
Frontend Mentor | E-commerce product page coding challenge
In this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!
try this one next
Which one?
the first one
Oke is a beginners one where the one im woeking now is a junior one
But that is not a problem
it's a quick win to keep your spirit up
I hope
so
I wanted to show you one challenge which is bugging me still
https://www.frontendmentor.io/challenges/room-homepage-BtdBY_ENq
the layout is simple but making it work that the image slide and the text next to it , has never be a success for me
Frontend Mentor
Frontend Mentor | Room homepage coding challenge
This small homepage challenge packs a big punch to test your layout skills. There's also a slider in there to add a JS layer for extra practice.
no idea if you an reach this page : https://www.frontendmentor.io/challenges?type=free%2Cfree-plus
but that are all free challenges
Frontend Mentor
Frontend Mentor | Challenges
Browse through the front-end coding challenges on Frontend Mentor. Find interesting projects to practice your HTML, CSS and JavaScript
@ἔρως
but I can do the social link thing after i finished this one
after that we can look again
@vince and enjoying the weekend ?
Lots of stuff to do haha
What aboht u
Still struggeling to make the colors right
so also a lot to do
I hope after this weekend , i finally can begin with the js and call it a day
yeah, do the social links first
and work on two at the same time
Is that good ?
Time to do the dishes 😦
after you finish this one
oke, that was also my idea
I think making the js work, takes not so many time
after I have to colors right 😦
it will be the easier part
we see
js cana also be a PITA sometimes
yeah, but it's easier than css to debug
we see it
I think the js for this one schould not be very hard
- reading and parsing the json to localstorage
- storing the theme into localstorange
and for filtering you have a library that can help
so maybe 1 or 2 afternoons work
Time to watch tv and hopefullu in 2 - 2 and a 1/2 hour sleeping
it should be about that
maybe tomrrow or Monday after a dentist appoinment I can try to write some js
And then later look again at those stupid dark colors
do it when you can
of course
but I had the idea to do all the css first and the js after that
But css makes me a little crazy but maybe time to set it on later and work on the js
Gn both
goodnight
Good looking out, appreciate that ✨️
GM MissFox
@vince @ἔρως today no working on this project. Since ysterday evening I do not feel very well but well enough to not call for a doctor
you're welcome
yeah, you should fix yourself then, and take a few days
I know but I also learned easy fixes do not exist
they do, but not always
for a lot of problems in life , there are no quick fixes I mean
Most problems can only be solved by hard work 😦
and in your case, resting
also a good part
and a important part
but fixing myself will costs I think some months , maybe even years
yeah, but don't overdo yourself because of a challenge
i take care of that
I look every day what I can do and cannot
i know you do
🙂
but thanks for looking after me
(I hope I use the right words)
you did use the right words, and you're welcome
maybe my dream of becoming a good hobby wordpress developer can become true, even on very "old" age
it can, but you still need to practice
a lot of practice with html, css and js
And then a lot of practice with making good block themes
And then maybe a lot of practice with making block plugins
So I will be busy till I die sometimes 😛
i think you will finish the next ones a lot faster
we see
when we get there
little step at the time bring you the most far
exactly, and each step helps
yep,
I saw a nice quote on a sporting school
You never loose, you win or you learn something
and that is the truth
was a litle playing
But what do you think of this edit button which we can use later on
The order annoys me
Or maybe it's the distance between first two being less than second teo
Feels off
order can be changed
the distance I have to look
but I will delete it. was a little playing for maybe a future idea
first I have to make the current things work properly
Yeah sure. Easier to finish the spec first
exactky
but it was a idea when everything is ready to add also a edit and a add
@Ganesh
to make it "perfect"
XD
Well it wouldn't be a bad idea imo
I thought that also
Why only a delete one
Have to think where I put a button or link for adding things
but as I said that can all be later
since you're doing a challenge, it's best to keep it within the parameters of the challenge - at least until you finish everything
personally, i don't like it because it looks like the delete button and because it is centered
oke
this are the requiremtents :
but I also have heared that to build a real portfolio it is better to make some extra miles
and add things yopu like
yes, but you should add after you're done with the base level
of course
Wish me luck with the dentist tomorrow
First a checkup and then I have to goto a dental hygienist to make my thooth very clean because of the operation
good luck
thanks
Can someone help me how to change the color of the logo ?
If it's an svg you can change it with
color, otherwise you'll have to use a different image / background imageno luck
chips I see it
It still have a fill on it with a color
shoot me out of this mess
in the browser I see a fill but when I open the svg with a text-editor it has a fill of none
Anyone still a idea ?
the fill should be
currentColor
If that doesn't work instead of using an image use the actual svg, like take the svg code and put it where the img isoke, I will try that tomorrow
or just do
<svg><use href="..."></svg>Changed the fill to currentColor but still no luck
`
`
you're loading it as an image
it won't work
😦
You'll probably need to copy the whole svg code and past it inline in html
or do what i said
both work
Oh i didn't know about use element. Neat
it's awesome
if you have the logo as a <symbol>, you can set the href to
#id and it uses that symbolI assume you can also manipulate the svg with css using it?
no, because it isn't part of the dom
yes, because chrome applies the css in the svg to the svg
So inline css works but not the external css?
yeah and no
depends on what you mean
Inline as in css that's directly applied to inside the element but i guess at that point you'd just use fill and other svg attribute.
External would be a separate style element or a link element linking to a stylesheet
well, yes, inline css works
you can have a <style> element in the svg too
but no, external css is disabled for security reasons
so, you can't do an
@import in the cssGotcha makes sense
i think you can use external fonts, in some situations, but i won't promise that
i think excalidraw uses external fonts
Humuhumu
It's still handy for duplicating the svg code right? As you said assign an ID to symbol then use the use element where you need it
yeah, and it is great when you use the same symbols multiple times
stuff like logos and icons
oke, what must be then in the href part ?
the url of the svg file
oke, so it will be :
?
yup
that should do it
chips
now the logo is gone
and giving it a height . width and color does not show it
can you send the svg?
yeah, forget the color of the logo
trust me, you don't want to go into that rabbit hole
that svg is not the worst ive seen, but it's really bad
I find svg a big rabbit hole 😦
just revert to what you had before
and ignore the logo color
I cannot
in light theme the text schould be black
And in dark theme it must be white
then you have to open the svg, find the color
#091540 and replace with currentColorThe name is in the svg?
yes, it's a path
I don't like whoever created this svg
same
this svg was created by the devil himself
and the requirement to change the text color is understandable, but horrible with this hunk of junk
by the people who made all the FEM Challenges 🙂
seriously, this svg is absolute hell
yep
I think all the FEM challenges are made by 1 - 2 people
and things are still not working
now, copy all the svg code and throw where the image is
still no luck
style="color: aquamarine
oh, you added it manually
well, it's meant to work if you did everything right
by the way, remove the xmlns attributethen I do not have a idea what I have done wrong
as far as I know I did everything exactly as you said
did you replace the fill color, as i said?
I thought I did but will be checking it again
is it updated on github?
im going crazy
in a text-editor I can see that the color is changed
but on the browser I still see the old color code
is it on github?
it is now
can you send the link?
GitHub
browser-extenstion/assets/images/logo.svg at main · RoelofWobben/b...
Contribute to RoelofWobben/browser-extenstion development by creating an account on GitHub.
url live version : https://roelofwobben.github.io/browser-extenstion/
you copied the code from the original file, without the modification
https://github.com/RoelofWobben/browser-extenstion/blob/main/index.html <-- search for "currentColor" and there's only 1 result
yep
it's supposed to be 2 results
and if you look at the logo itself , you find two results
i know
the logo you're no longer referring from the html
1/1 means you have copied the wrong version
pfff
I m sure I was putting the img version back
oke, I did that locally but then no luck
can you update the github?
done
updated to this :
that's the method that won't work
oke, so back to the svg one
yes, but copy the right version of the svg
the one i told you to replace the color
finally I can change it with color
awesome!
bring my daugther to work and then somewhere today I try to find the right colors
And hopefully the css part is then done and my versions are "perfect"
it should be close enough
i hope so
just a few more days and you should be done
I hope so
this one is sometimes very frustating
this is an intermediate challenge, right?
I thought a junior one
ive never seen this
yep a junior one (level 2)
Level 1 is newbie
the page itself
i would put this on level 3
that would be intermediate
level 4 is advanced
And level 5 is guru
i mean, do you think this is a junior challenge?
nope
me neither
not with the colors which is not very clear
that's the least of it's problems
layout wise this is not a very hard one
but the colors and use of svg make it hard
they do
and soon, js
yep
no idea if a junior can made the filtering
nope
no change at all
even i shy away from doing filtering stuff myself
it's annoying and there's so many edge-cases
then this is for sure not a junior one
it's not
I would also not know how to do that filtering with plain js
Maybe with a js framework it would be less hard
it's possible in css, but again, edge cases
yep, the edge cases costs the most time I know
Filtering?
yes, the buttons to only show active or inactive ones
or all 🙂
You mean the categories highlighting hemselves
and changing the cards
Is that in the challenge? I thought it was only the layout and design implementation
it is
and loading the data about which one is and isn't active
Wao
and storing into local storage
it's not a junior challenge
Yeah that is not lol. I thought it was only layout and role of was added the javascript stuff from his side for practice
it's a challenge that's been taking him a long time too
Humuhumu
yep but learnig and practising things costs time
expecially when the images provided are not the best
@ἔρως @vince
Is this good enough ?
my light version :
orginal :
my dark version :
orginal :
The theme toggle doesn't seem to have a lighter background in dark version
the color of the switches is still wrong
😢
@Ganesh what do you mean with
does not seem to have a ligther background ?
below is yours
oke
The best I can find it this:
but still not much difference 😦
do you mean the background not being apparant enough with this color
or do you mean the missing padding
no, I mean that I find that this color, which is the lighest gray does not make the difference as shown in the picture 😦
the background of the header seems to be supposed to be darker
yeah header and the cards are darker in design
what is the color on your toggle buttons
that seems darker
you are right
maybe swap that with cards and header color
nvm they are the same
the background color of it all needs to be darker
just seem differnent
it's the same color
maybe like this :
well excpet the toggle button background in extension card that uses the lighter one. but yeah
chips , there is no ligther color grey
why are there two colors now
???
two colors
??
but then I wonder if the header stands out against the body back ground color:
He. the colors here are otherwise then I see on my browser
send me to the mental institution. Those colors make me crazy
I meant this
the icon has grey background
then there is some padding of darker grey/blue around it
is the grey background backed into the icon? is it not transparent?
oke
no they need to be the same
remove the background that's on the icon
pfff., another fight with a svg 😢
you don't need to mess with the svg
the background of the icon is set by you in css isn't it
😦
it's because your background color for the header bar and the extension cards isn't dark enough in dark mode
you only need to change the background color variable to something dark and it'll become visible again
oke, and that also solved that two colors problem
but darker as this does not exist
I have choosen already for the darkest grey and the lighest grey given
well the given ones don't seem to match sooo, time to hack your own thing
oke
i wouldn't say "change" but "remove"
oke, but as far as I can see I never set the background-color two times
what do you mean two times
This picture you placed
well I'm not sure what is going on here
in your live version you have --background-color-icon on the input and the before pseudo element
IM also not
I only know that I think im busy with this css and colors for 2 - 3 weeks and still not good
it needs to be removed from the pseudo-element
oh yeah putting it on psuedo element is redundant
I was talking about changing/darkening the background color of cards and header bar here so the icon would become visible
oke, the pseudo element does not have the color anymore
that should be enough
and now I hope I or with your help can solve those stupid color problem
That is bugging me for a long time and tried everything I know to solve it
colors are always a pita
expecially with this one
all websites will have this level of difficulty or higher
Then I really have to think if FE is for me
That icon thing is bugging me for weeks now and I have no idea how to solve it anymore.
Tried the given colors , tried custom colors and still not right
which icon thing?
The colors of the header and that sun icon
We now talk a "long" time about it
what do you have now?
this :
I made it a few seconds ago
with the given colors
comparing to this, you need the darker version
??
So this is still not good
the dark theme checkbox is too light
oke
moment
with 700:
and with 800:
do you have a 900?
yep
then try the 900 for the navbar
with 900:
leave the rest as is
now try the oposite of that
here it is :
Header 900 icon :600
I think it is much too blue
you are right
800 on the header, 700 on the checkbox
I think this could be the one :
Header : 800 icon: 700
so now only the switch colors
I saw you using Photopea before @roelof , that's what I use... why not just use it to color pick the colors??
I tried that one but also do not get the right colors @vince
Seems right to me
the problem is that the original image is a jpeg
Yea it won't be exact but it's close enough
https://codepen.io/vince1444/pen/NPqRqpX
And you can always color pick then mess around with the color in devtools
That are the colors we have already
header : 800 icon background : 700
Im setteling for those numbers and now I hope I can find the right color for the background of the switch in dark mode
The toggle button in extension card? Seems like it's same as background of theme toggle and inactive category button
also on the dark theme
?
it looks more grey to me then the buttons
do the light theme first, then you can worry about the dark theme
o, is there the background also wrong ? 😢
all the colors are wrong
and the size too
😦
and it isnt supposed to have a border
I take a break , Right now this challenge is making me crazy 😦
yoy should
you
yes boss 🙂
Got more and more the feeling the css is never ready
but with the border are we still talking about the switches ?
@ἔρως
yes
I do not understand the Switches have a border
the switches have the same border color as the button next to it
which is wrong
there is no border there: just jpeg artifacts and padding
oke, then I must think well how to make that work
with only the colors seems also wierd to me
that is how it is
oke
so something like this :
so it looks like this :
Ship it or are there more things not good ?
the circle is the wrong color on light mode
circle ???
and the spacing is a bit too big
yes
sorry, I do not see any circle in the design ?
or do you mean the switch is not right
the circle on the switches
it's supposed to always be the same color
this better :
dinner ready
and what do you mean with :
which spacing and where ??
@ἔρως
the spacing around the switches
you mean, more right margin and more bottom margin
Sorry, I do not see it
no, it needs to be centered
??
it should be centered if im looking at the css of the parent :
something is wrong then
is the github updated?
all changes are pushed
now wait till github made a new version
yep, github is now up to date
alright, i will check it later
Thanks and take the time you need
alright, so, the sizes are all wrong
this is using em for the size, which is below optimal
i dare to say "wrong"
the input should have this:
and the circle is supposed to be 16x16px
and has 2px margin all around
oh, and remove the border on it
i found it by counting the pixels in the original screenshot
oke
I think I misunderstood you with that margin :
this is how it looks like for me
in the pseudo-element, set the margin to 2px
I did as seen in the screenshot
but then the point is on the bottom
that's the wrong place
this is the pseudo element
yes, but that's not where you've put the margin
aha, when I did it on
it looks well to me
it's not
😦
look at the left side: yours is touching the white, mine isn't
then I do not understand which pseudo element you mean
here
not here
that one doesn't have any margins
I have two
`
this needs 2px of margin
you only have 1
border-radius: 1em; <-- set this to 16pxThen I stil see this :
in FF
so still against the border
with this as css :
you're right, it is broken
it has to be
margin: 0 2pxthen it works
Still see this :
can you update the github?
i haven't done any other changes than what i've said here
done
still has the old styles
I know
but when I do the margin on this :
then I see this :
that is correct
this was wrong
but this is correct
happy to hear
this how the light version looks like now
and the dark theme?
now without the border :
dark theme :
the background color is wrong, but the shape is right
oke, one for tomorrow
something like this :
then it will 300 in the light theme and 600 in the dark theme
GN
goodnight
are the colors right ??
i think so?
it does look right to me
😀
maybe finally i can begin with the js 🙂
not yet
the cards are too light
compare both
😦
What do you think of this 700 color
too bright
also, you don't have a border
and the border on the button is too bright
800:
too light
hmm, and 900 I find too blue :
800 then
paint reads the color as #1F2535
224º, 42%, 21%
And i have these colors :
can you send the link of the challenge?
of course
Frontend Mentor
Frontend Mentor | Browser extension manager UI coding challenge
This project will be a fun way to practice working with dynamic data, filtering data, color theming, building a responsive grid, and more!
GN
the image on the website has the same color, so, there should be another color
goodnight
If you can find it in the readme then im happy
As far as i can see there is no other color
can you send the readme?
of course
very undescriptive
yep,I know
but it what I have to do with it
this way all FEM challenges work
yeah, they want you to buy the pro version
I think so
and I will not do that
8 or 12 dollar a month I find expensive for some design files
it is super expensive
So what do we do with the color of the cards or header
Let it as It is or use your color ?
use the color that is the closest
oke,
I lost where we working on
Was it the header background-color or the card background-color
both are the same
both have the same background color
oke, this is with my colors :
This is with your color:
and this is the orginal :
Then it looks to me that your color is more like the picture then my color
Agreed ?
i agree
Then that will be the color of the header and the cards in dark mode
last problem.
The color of the border of the cards
it is the same as the buttons
the "delete" button
remove
oke
then this is now the light theme :
orginal :
dark theme from me :
orginal :
looks like the cards border must have another color
Or do we say ship it
i would say "meh, close enough"
but the red of the filter is different
and the selected option has dark text, not white
The last one is easyJet to change
The first is more difficult because i do not have more sort of red
try the lighter red
Why not use the method i showed yesterday and eyeball it?
i am eyeballing it
Meant roelof
tried it but then according to epic the colors were not right
Button with red 500
and with red 400
I find them all to light
that is the right red for dark mode only
this is the right red for light mode only
oke
so I need two reds for both modes
no, one red for each mode
and it is the same red everywhere
oke, that is what I mean
Sorry
then yeah, that is what you have to do
Feels like i never finisched this 😢
you will finish it
in 2040 I think
soon
yeah yeah
Everytime I think im ready you find new things that are nor right 🙂
just joking
Red is now hooefully good :
@ἔρως @vince can you help me why the red has disappeared in the dark theme?
Use
--red_400 instead of --redor make this
var(--red_400)
I did
`
Look again brother 🙂
chips, I found it
I has to be :
Yep
It definity not my day today
We all have those days lol
I know
I hope everything is now good with the css
LIght :
dark :
??
What do you mean?
the color is wrong
it has to be darker
it's the blue 900
the buttons also are missing the border - same color as the cards
Oke will charge it ad soon as i can use the computer
Change it
The filter ones?
As far as i remember you told me that the filter buttons did not had a border
This better :
the background is the same color as the border, in the original design
sorry I do not understand the question
or remark
but the borders are all the same color :
Ship it or is there still work to do with the css
There's always work to be done with css but I'd say just ship it for now and work on the js
happy to hear
I think that will after the checkups tomorrow in hospital
Finally it happens 🎉
Tomorrow I will begin with the storing of dark or light mode in localstorage
Then the reading of the json
and then the filtering
And thne done 🙂
Or do I forget something ?
GN
goodnight
we will find tomorrow if you forgot something
I know a thing
Chancing the status from active to non-active and the other way around
and this code for storing and reading the darkmode works
another problem bites the dust 🙂
tomorrow the reading from json and displaying things
instead of doing
const enableDarkMode = () => {...}, just use a properly named function
just function enableDarkMode() {...}
when you have issues and start to debug the code, having a named function will save you hours of frustrationI see these function expressions in some courses. Full stack open does it too and it just weirds me out when there's no reason not to use a proper function declaration
also, you can throw those functions at the end of the code, so you can focus more on the logic
it just makes things so much harder to read and debug
if an error is thrown, you will just see <anonymous function> everywhere
Yeah
debugging something a few anonymous functions deep will be hell
I can't imagine nesting them.
Only time I use arrow functions is in short callbacks or someplace when I need to preserve
this like streamlining the binding of this in class components (tho the latter probably suffers the same problem of anonymous function when debugging)so this is better :
that last
if can be moved higheroke, where do you want it then ?
i would move it to under the 2
console.log callsoke
changed
and since they are real named functions, javascript will hoist the functions and everything will be fine
now, wrap it all in an anonymous function
I checked already and everything still seems to work
as it should
exactly
What do you mean with wrap it all in a anonumous function ?
all the code inside an anonymous function
and then, you call the function in the last line
Are you suggesting an iife?
like this:
this looks weird as hell, but, it prevents all your local variables from being global variables
i forgot what iife means, but i think it is this
https://developer.mozilla.org/en-US/docs/Glossary/IIFE
Here's is a link if you want to look up more about iife
Immediately invoked function expression
yup, that is the idea
and in this decade, maybe it should be
async function instead of just functionA bit curious tho. If roleOf was using modules he wouldn't need this right? He can just do a side effect import then
Does things still works ??
i think you have to export something from the module
it's supposed to
yes, I checked
now, you need to enable strict mode
inside that function we just made ??
inside the function, as the first line, you need to add this:
yes
and what does that do ??
I checked it out. You don't need to export anything for side-effect imports.
Works both in node and the browser
Prevents assigning global variables like this
This would throw an error in strict mode
oke, so two prevents for global variables 🙂
Also throws errors when assigning to non writeable properties like NaN, undefined etc. normally it doesn't throw
Along with some more things
it also throws syntax errors for some things, but i dont remember exactly what
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode <-- it's important to read this
but seriously, strict mode helps a lot
that is interesting, not gonna lie
Almost time for lunch
And then checkup for my heart in the hospital
Since the operation they are checking things reguarly
Aight. Hope lunch's good
yes, bread, bread,bread and do not forget bread 🙂
Mmm bread with bread inside more bread
a bread toast
no, 4 pieces of bread 🙂
but this js code is not good enought to send to github as ready
looks good to me
you should try to use jsdoc
so something like this for every part :
yup, on the variables, constants and functions
oke. I have to look when I do this
just back from the hospital
just relax for now then
oke boss
that is why I said tomorrow reading the json and display things is on the plan
and you are half-way there
half way of solving this challenge
or half way of writing the js ????
the js
o, I think reading and displaying things will also a big file
The filtering I do not know how big it would be
And the active thing could also be a smalll one
it is easier than you imagine
we see
like I said several times one problem at the time
The reading in and storing into localstorage is not so much code I think
But the remaking of the divs will be a big function
chips. I forget the hover and so states in css 😢
maybe I will do that one tomorrow
You can reduce boilerplate a bit by making smaller utility functions.
function createElement (type, classesArray, text) that takes element type, array of classes and the text then returns the created element with text and classes appliedI will see
I know I have to make this again :
Lots of divs
yep
One less. the extensions would be the parent one
so if im looking wel 3 div's , one img , one p , one button and one input
use the <template> tag
Does plain js have that
I thought I need to use
And so on
And so on
it's related to shadow dom
I haven't really used that but I think it's related to web components. lets you have resueable html markup or something
moment, my solution or the template solution ??
I know template only from js frameworks not from plain js
your solution is using usual dom. What epic suggested is the web component thing
oke
and can I use that web component thing with plain js ???
that is my question
it seems so
your extension card can be inside the template tag
then you can clone it using the above js
then using query selector modify their textContent
oke,
then I have to play with it
Right now I do not see the whole picture
don't use
var use let or const like Ganesh pointed outwhere did this var came from
oh his previous code
Can I do then that clone part for every card
My idea was to convert the json into objects and then do that template things I believe 10 till 12 times
yeah var bad
yes you can create howevery many clones you want
oke, Like I said earlier I will play with it the next few days
just 2 hours ago I had some checkups in the hospital and got some info I have to let that sink in
do it when you feel like it 👍
of course
That is why I try to make every day a small part
maybe I m going to take some rest the next few days
The meeting with the cardiologist has more impact then I thought it thought it would be
the
<template> tag is awesome
you throw some html in it, and then you can just clone it
whatever you put inside isn't rendered at allLike I said , Somewhere these days I will play with it
First I have to come with things the cardiologist have said yesterday
just take your time
I will
and before I can display things, I first have to read them 🙂
is this a good way to read the json and convert to js objects :
looks good to me
The only thing i have to rewrite is that the data is stored in a global variable with the second then or directly stored in localstorage
What is "better" First use a global variable and put that into localstorage or put things directly in localstorage ??
put directly into storage
and NEVER use a global variable
oke, can I then put also the display stuff in the part after the then ??
after the what?
After the then
So instead of
console.log(data)
Something like this :
yup, you can do like that
but honestly, i would use await
you first check if there is anything in the local storage
if there isnt, you load everything with fetch
but await it, so it doesn't go forward
to await, you will need to change the first line to have
async on itoke
And how do we then display the whole thing ?
First line? Are you saying to use top level awaits. Wouldn't that create global variables?
Unless this fetch code is inside a function (is it?)
For me it feels not right that first you read from the file , store it on localstorage and then again read from localstorae because you already have the data
Well can user change the data?
Later on the user can change the isActive
nothing more if we keep on what the challenge ask
Well i think it's more like only reading the data directly from fetch on the first attempt is a bit wonky consider later when it changes you'll read from local storage
If you want extension active state saved then there will also be scenario where user closes the browser then opens the page again. In that case you would check if local storage has data or not
Unless that's not a requirement
is not a requirement but I agree if the user changes the state , it would be handy that it is stored somewhere
but I was thinking if we read from localstorage or the file , how do we take care that the data is displayed when we do not use a local variable
but that is the way I would make that part work
- read if localstorage has data
- if not, read the data from the file and store it on localstorage
- and then display it like we do now
Why would local variable be a problem it's the globals that are the problem
Could also be working
But how do I take care that the data that comes from the localstorage is also used in the display function
You can just get the data from local storage at the start of the function.
let data = localStorage.getItem("extensionData)oke, and when I read the file, store it in localstorage and read localstorage again ??
Yes
feels wierd
to read then the data 2 times
You fetch data only once while all the other time you get data for rendering from local storage
So while it may seem like reading 2 times. Your only reading two times at the first render, every other change that triggers render is using local storage
Could you do something like this?
I thougth that but Epic says that I then use global variables and that is not good
You'd put it inside a function
an then I get confused
the first line is an iife
aha, the same "trick" I did yeseterday with that anymous function ??
no, but yes
Yeah that makes sense
yes, but with await inside the if
I'm not the best at JS but I'd do something like this
Why function expression
just what im used to
i mean, that would work
the name is bad, but it could work
yea maybe like retrieveData or something
you arent initting anything: you are getting data
just getExtensions or something simple
fixed
Thanks for showing
this weekend i will work further on this project
if you need, you can rest
I know
maybe I will
Sunday birthday of my father 😦
just rest this weekend
oke, boss 😛
take this oportunity and code for fun for the #code-challenges
I saw it
lets see what you come up with
we see if I have energy to make it
if no css is needed it schould not be a hard one
css isnt required, but you can post css
IM thinking of this :
first idea I have
you should discuss it in #Challenge general chat
or just try it out and see how it works
Why does this not work:
I got now a Promise
because that's what
fetch returns
and the .then and .catch return new promises
as i said: use await
or a 2nd .then after the one you have, to set the value of the extensions variableoke, and then I have to make the getExensions function async ??
or do you mean something like this :
When I do this :
`
Then still I get a promise
and the first one gives also a Promise but then rejected
stupid js
both look good to me
oke, but when I try them they both do not give me back the categorys
but a Promise
the first one is literally impossible to return a promise
Chips
I forget that the script first look at localStorage
yep the first one gives me the good data
exactly
second one gives something wierd
it gives you the correct data
however, you're throwing an array of objects into the localstorage
localstorage only accepts strings
After weekend I have to look what to change to get the right data
you need to json-encode before putting into local storage
I give it up for today
Now I see a null
you are awaiting the wrong promise
sorry im now really confused
are there more promises then ?
yes
every
.then or .catch returns a new promiseoke
So it must be like this :
no, because the
localstorage will run before the request finishesTime to sleep
This make me crazy
use the await version
it's easier to understand
you mean this one :
but that does not looks the same as your boilerplate
GN
yup, it's better
goodnight
@ἔρως @vince
Is this the good code for the reading and displaying of the cards ` if so , then I make it also a anymous function with use strict as we did with the dark mode
Is this the good code for the reading and displaying of the cards ` if so , then I make it also a anymous function with use strict as we did with the dark mode
why is there html in the middle of the js?
could be in another place
But that is the template that the display function uses
okay, but there is no element with the id
extensions
also querySelectorAll returns a nodelist
you want to use querySelector instead, which returns a nodeo, I thought it need to be the parent element
well, the element isn't there
also, you're trying to find the same element over and over and over again
yes, I have some 12 cards so I need to make the html for 12 cards
const template = document.querySelector("#extensions"); <-- this should be outside all functions, and you need to check if it exists right at the top
also use document.getElementById() for thischips
now I do not see any cards 😦
something like this:
still no cards to see :
press f12 and check the console
also, why is there still html in the javascript?
because I do not know a better place for it
inside the
<template> tag with the correct id
in the htmlpff, im going crazy
oke
I cannot do this :
back to the drawing table
Async stuff is really a very big PITA
what's in
data can be null???
sorry, I do not understand the question ?
if data is null can you use for of loop on it?
you need to check if it is not null
nope
also this error happened because data was a promise
you did not await the
getExtensionschips another problem
when I add this :
you need to await that
I see the console.erorr every time
did you await this?
how can I then use await in a if then ??
when you use
async, you awaitsorry, I miss the point
I have now this :
you await all async functions
where do I await to make the data avaible
ALL ASYNC FUNCTION
all of them
if you are inside a function that is marked as an async funtion you can use await anywhere inside it, except if there are more functions declared inside it you can't use await in those functions unless they are also async
and when you call it and you want the value from it, you have to
await
and you are trying to get the value from itoke, so displayExtensions also need to be a async function ?
no
you just need to await the
getExtensionsI did that already
As shown in the last code snippet I posted
that should be it
but as I said the display function returns now that there are no extensions found
then use a console.log before the call to that function
or use the debugger to pause before the call
This is the output I see from the display function
don't do
data === null, just do !dataepic means check the value of extensions variable
yup
you need to see what's the value you're getting from the function
oke
I try to find out how I can do that in VS Code
you can't
😦
you debug it while running
or type
//@ts-check at the very top
then vscode gives you some errorshe technically can if he uses debug url but yeah it'll just attach to the browser. better use browser debugger
but even then, how good is it?
besides, you can press f12 for amazing debugging tools
oke
it seems extensions is null
servicable for small projects like this. I used it when I was learning js but there's no reason to do it unless you prefer vscode debugger
the value is
nullWhy is it now null, Yesterday it worled all well
😢
try doing what i said
here
vscode will complain about things
basically, you will be using typescript to typecheck your code, and it should get pretty angry at your code
I did that
but no new things on the console :
what does vscode say?
this :
that's because
HTMLTagElement doesn't exist
should be HTMLTemplateElement
if i wrote that, my bad
im playing overwatchI take a break then
I see more and more errors now
good
that's very good
??
change the check to htmlelement
then on the next line check if it is an instance of htmltemplatelement
how do I do that ?
and when I change it to htmlelement I see this :
on the if, check if it is an instance of
HTMLTemplateElement
if(!template || !(template instanceof HTMLTemplateElement))???
Where is the data ?
what do you mean?
The parameter of the function is named data
and earlier we checked if that exist
i have now this and it is a big mess :
data is not an html element
you are trying to check if data is an html element
something i didn't tell you to do
oke
I hope this will us closer to the solution :
that check is in the wrong place
you're supposed to check it at the top of the function
i thought I did
you're checkin inside the
displayExtensions function
while it is good, it's unnecessary if you did it beforethis better ?
if so, still we have this error :
like here :
you have to check that the return of
cloneNode is an isntance of DocumentFragmentoke
So like this :
no, the return value of
cloneNode
for that one, you have to check it is an instance of HTMLImageElementoke, no error message
`
wierd, now no error messages in VS Code
but data is still empty
can you send the code?
of course :
I hit the shower
for (const extension of data) {
wait, no, this is correct
what's in localstorage?
localstorage isn't empty
it contains the string
'null'
delete itthis looks better
but on the page I still do not see the cards
only the template part
You're not appending anything
you have to add the clone to the document
The clone stays in memory if you don't append and never appears on dom
oke
then I have to figure out how to do that
get the element that should have the extensions, like you did with the template
then
.appendChild(clone) on itI did
now I see 12 cards but no text or image
h2 = extension.name; <-- you're assigning extension.name to h2
you need to set the textContent attribute instead
h2 no longer is an element
same for image and pfor image I have to set the textContent.
I want to fill in the src tag
then set the
src propertyI did :
but still no image
now src= "undefined"
oke, got it working
but forget the switch
what was the issue?
icon schould be logo
but it seems to work
I now only see a lot of possible null error message where I know it cannot be null
yes, it is possible to be null
by the way, id's are required to be unique, and you have non-unique ids
I know
How can I solve this
At all things a check if they are not nullls
and yes, I know
That is why editing things is not imppssible
I have to think well how to solve this
yes
as you should
and another one :
you have to tell it it is an input html element
you do it by checking if it is an instance of it
oke
this seems to solve it :
yeah, kinda ...
you're trusting on the untrustable
😦
you have to check that it is an instance of an html input element
this is better ??
yes
oke, and everything seems to work fine
two to go
One the filtering
Two the chancing of the status and store the change on localStorage
but that will be next week
Tomorrow a birthday and the day after is recover from it
Parents are nice but make you also very tired mentally
you should rest
that is my plan
and many thanks for your patience today
was difficult sometimes but we made it
you're welcome
glad to hear
still a lot to learn
i know, but you will get there
we're also doing it the right way, not the easy way
yep
but, it can be a lot better
it can always a lot better
but I do not have a clue how I can do it better
one thing you don't do is to check what you get from localstorage
you mean I can make a check for example null input here
yes
and you can actually say what the function returns
and that can be used to typecheck the entire code
and this way, you wouldn't have used
icon by mistakeo, I thought you can do that only with typescript not plain js
typechecking things
you can, with jsdoc
and since you have
//@ts-check, typescript is used to do typechecking on the code
you can even add a .d.ts file with the type definitions🙂
Maybe convert the whole js to ts ? 😛
nah, you need node for that
and compile it and do all sorts of magic
was joking
I hate magic
That was one of the reason I quit ruby and Ruby On Rials
to much magic
so change the code to this :
not exactly, but it's a start
😦
and with jsdoc you mean something like this :
Extension <-- this doesn't exist
you have to define the typeoke
like this :
yup
oops, and another type error 😦
and this is why you add type checking
and solved
and still evrything works well
so much better than untyped code
still needs some touches
Did the same with darkmode.js and see there a type error I cannot solve
any hint ?
which line?
localstorage only accepts strings
null isn't a stringoke, so I have to make it "null"
and update the if then ?
or just an empty string
or remove the key
oke, I removed it
and everything is alright with the types
but you want some touches on the read function
^ you shouldn't do this
you're forcing typescript to believe you
oke, so the same "trick" as the rest
yes, check that it is what you want it to be
and you have to check that it is an instance of an input
basically that
Oke
And which touches do you want on the redding functions
i think that that's it
then I will send the new code to github
and next week I hope I can solve the last two
- filtering
- removing things and store the change in localstorage
have a nice weekend
and maybe give the items een numeric or uuid index so I can also easily change things
and maybe even make the removing simpler
but have to think how to make such index
and fix the repeated id
???
you have a repeated id
where ?
If I look at localStorage no card have a id
the switch has
oke
have also to think about that
you probably don't need the id
I do right now
I use it here :
you don't need the id
you can use a css selector
Maybe this one then :
yup, you can find it by the type and role
otherwise it will be a problem with the toggle if I only use
input type="checkbox" im talking about the id
so this is good :
no, the selector is invalid
this better ;
almost there
the selector is still invalid
sorry, at the moment I do not see the right syntax
that's fine, just relax
Cannot relax when I cannot solve this stupid problem
bummer
when I do this
then the checkbox is not found
and this is working
hopefully it is a good solution
it is good enough, yes
i would also select a checkbox, but that is fine
could not make that work 😢
does it work now?
As far as i can see it works
The site i mean works
then that is good
I mean I could not figure out how to make that call with the checkbox added to it
what do you mean?
I did this :
and then you said :
yeah
and I try to say that selecting the checbox together with the role
I cannot make that work without making errors
That is why I did it this way
yes you can, you did it for the css
it's nothing you haven't done before
I tried and every time I see errors
Wait is it this :
?
and input
but yes
im happy
This is also working
for now GN . Tomorrow a day that will make me very tired
that's exactly what i meant
hope you see why what you had before was wrong
goodnight
yep I missed the [] around the first part
yup, it is easy to miss but very important
back from the birtday of my father
and I wonder one thing since yesterday
Can it easily be done that all the items get or a numeric id or a uidd
I think when that is working writing the remove part will be more easy
yeah, that's something extremely trivial
oke, I do not see it at the moment
you will see
maybe make a loop between the read and display function here :
?
and can I then the best use a numeric one or a more complex one ?
nope
it's way simpler
The most simple way is to change the json.
But in real lif you cannot do that
So this does not seem to be a solution
otherwise totaly no idea
nope. that's not an option
exactly
but I do not see a better option when looking and looking at the code
so if I may have a hint ?
it's when you are cloning and setting the display values
right in that function
hmm have to think about where and how then
it's way easier than you think
could be , I be stuck at that loop idea
I think I cannot do something like this
because clone is a template not a record
no, but you are clone
???
do you mean close or is this a hint I do not understand at the moment
it's a hint you don't understand at the moment
but why do you need the unique id?
because then with the remove I can filter on that id so the " record" is removed from localstorage
And it will be easier to make code for example editing content
If I filter on for example the title I never can get it changed
you have to give the id to the card then
exactly
but I do not see how I make that id ?
how do you think it is supposed to be done?
normally at a database You made a field and the database does the magic
But we do not have a database here 😦
So im stuck how I can make that work
the json file is the data you would get from a database
oke
but I cannot change that because it it's was coming from a api I also cannot change it as far as I know
you don't need to
Sorry, I do not see it and get the feeling im running around in circles right npw
you are
😢
The json file doesn't have ids?
It's not optimal but when you're reading the local storage can't you just give the objects an ID based off the array index?
or use the array index as part of the id
Personally i would just give each object inside the json an ID field and do it that way
i would just use the index for an id on the card
No use following strictly the challenge it's not like u get anything for it
i still would do the way i said
Can probably just write a function that uses crypto.randomuuid and then modifies the fetched json to have ID for all objects before saving in local storage. But probably overkill for this
very overkill
Yeahhh
and I still do not see it how I can get a id on the card
you set the id on the card element
How?
That is the question I askked the whole day
is one way of doing it
you can add a data attribute too...
you can add it to the json as well
1- get the card element
2- make an id
3- set the id to the card
this is the better option
So something like :
? or
?
? or
?
something like the top one
😢
Giving up for today
Frustated because I still do not know how to add a simple id to the card
last attempt :
the
<extension> tag doesn't existthen I gave it up
Totally no idea then
Query selector selects like how css would
Do you think
'extension' selects the class extension or something else?
How do you select classes in csschips , I see it
I mean :
`
that's almost there
but id's shouldn't be numbers
if you want it to be a number, use
data-id insteadid schould be a UIDD ?
Then i have to search how to make that
no, it doesn't need to be an uuid
What is then a better altrnative then a number ?
in your case: a number
oke
then we go for the code I made and then with a data-id
just use
data-id instead of id
or use a prefix, like ext_oke
So this code is good to ship it
no, it isn't
you have a bug
id starts at data.length
that means it will start at 11 or something, instead of 0
if that doesn't matter, then it's goodI saw that
I think it is the problem that there are already data in the localstorage
and I can only delete them if im on the page
So right now I do not see a solution for this problem
uh, what do you mean?
I could say that the id begins at zero
But does it then work when I for example want to add a new card
right now it looks how many cards there are already
yes, it does
oke, so it needs to be zero
no
i pointed as a bug because it could be unintentional
oke, so again back to the drawing table
what do you mean?
That I have to think how to solve this bug
just set it to 0 or do nothing
now im confused , I just proposed it and then you said it was wrong
no, i said you had a bug
i didn't say it was wrong
i also said it doesn't matter much
is this written w/ ai?
nope
I never use ai
my idea is that if you use ai you do not learn anything so that is why I do not use it
@ἔρως I was pointing at this discussion
I think there we misunderstood each other
I'm surprised you know some of the syntax, like I didn't know of
for... of or ternaries until understanding js a bit betterI see that on languages as c++ and then I tried if it working in js
it is a new syntax, added a few years ago
And ternaries I know a while but I do not use them a lot because I find it less readable then a normal if then
im not totally new to developing with js
and developing software / websites
I only forget a lot because it is more then 1 year ago that I use css and js
For a year Im more busy with c++ and the arduino
and some old "mentors" have learned me the wrong way to do things
😢
@ἔρως oke, so setting it to 0 works
Then next on my list make the filtering work
and then the movement
do you want to implement the filtering by yourself?
or you want to use the library i sent you, a while ago?
I m thinking to use the library you send me a while ago
Why invent the wheel again
check the instructions and follow them
make sure your files have the attribute
defer
and the external file should be the first oneoke
So I have to add defer to these :
like this :
yes
done
then follow the documentation for the library
Was alsready my plan
Can I use this one with the GPR : <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></scrip
very likely, but im not a lawyer
oke
I asked because with google fontts , you said that is against that law
websites have been fined for using google fonts, but not unpkg.com
oke
Tomorrow maybe time to study those pages
and I hope the js to write can also be done in a seperate file
it can't
i mean, it can, but i wouldn't try it
oke, so all the code must be in the html file ?? 😢
no
the code has to run for elements that don't exist yet
oke, so before the two js files we have now
but wierd that the code search then for element that do not exist
but oke, if it works , it is fine with me
you create the elements in js, so, the code has to run after the elements are created
oke, that is more logical
have to think how I can do that
a lot the former "mentors" have not learned me
you can have it in the same file or you can have it in a separated file with mutation observers
and honestly? put in the same file
I mean take care that the file is run after the read file is done
just put it all in the same file
oke, that will be a big one
and the code for the filtering and the layout will be the last then ?
and saving if the extension is or isn't active
yep, that must also be after the reading but also after the filtering ?
I thought it could be after the reading but before the filtering stuff
and is one big file at a moment maintable ?
you can try to make it into multiple files, but it will be more complex
but you can try it
oke
Till now things are working fine with multiple files
and till now things are working fine
but if it's needed to make the filtering work to put everything in one file , I will do it
if you want to do it with multiple files, go for it
I think with multiple files , I know better when what happens
then in one very big files
that's up to you
Then i think i go for multiple files
But for now gn
goodnight
are these mutation observers then really needed to take care that the filtering thing is executed as last ?
probably will be
you can try to make it work without
we see
should be easier than expected
oke,
This looks to filter:
but the layout is now a big big mes
you dont need jquery
and there should be an option to tell it that it is a grid layout
I hope I m on the right track
but the fitering still happens after loading the page instead of pushing a button and the layout is stil a mess
I find the docs very confusing because they talk about jquery and plain js
this is my html
`
<div class="filter-container">
<h1>Extensions List</h1>
<div class="filter-options">
<button class="active">All</button>
<button class="Isactive" data-filter="active">Active</button>
<button>Inactive</button>
</div>
</div>
`Why are there vars here instead of let and const
The examples on the book uses this code as a example
@Ganesh
Book? Sorry is this an npm package?
Isotope Filtering
Filter & sort magical layouts
that was written at a time when
let and const didn't existHot tip
Ben Myers
Style with Stateful, Semantic Selectors
See how building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free.
8 years last publish
Anytime I see a .active class
🥲😅
The last npm package I used around this age was passport js
Or passport local i guess. Passport js keeps updating readme
oke, @ἔρως has said this is a good library to make the filtering work
so that is why I try to use it
Humuhumu
i've used it semi-recently, and it worked fine
it does work - the website is working, right?
but maybe it's time for a new library
i don't know new ones
Yeah as long as there aren't any vlunrabilities it's fine web keeps support for old shit anyway. The age is just a surprise
yeah, it is the only one i know
and I cannot work but I get lost in the docs because they put jquery code next to plain js code
yeah, it was made for jquery
😢
it works without
oke, but I cannot make it work so it works only when I pres a button
and not when I load the site
I have this in my filter.js
and this in my html
i think it is time to skip this and do it with css
css for filtering ??
I thought I need js for it and maybe css for the animations
you can with css or with js
Probably means assigning, removing classes. The classes can have display none style
if im not mistaken, the filter buttons are just radio inputs
change the value, hide the others in css
no no, the filter buttons are buttons
you can set a card from active to not active with a switch which is really a radio button
Isn't switch a check box?
it is
Radio can't be toggled off iirc
no, but can change
Also I had to think for a moment but we're you hinting at using the checked psuedo class with siblings selector ?
yup, with
:has() to detect the checked radio button
but it can be used with a class toooke, then again and again back to the drawing table to find out how this works
Will be at first tomorrow
Now to tired to find that out
there are many ways of doing this
yep, the disadvantage of development.
There are also multiple ways of doing things
yup
which way do you want to do it?
that's a big plus
so many times one way didn't work for my use case so I could use another way
If it can be done with css i go for this
Gn
goodnight
Does anyone then have a example or tutorial how I can make that filtering work with only css ?
Chris Bier
CodePen
CSS-Only List Filtering
Filter a list with only CSS. I came up with this idea and finally was able to find time to give it a shot. It can use improvement. Due to the use of t...
found this on google
checkbox based but radio should be similiar
my hastily put together radio version
oke
I see how it works
I think I can adapt this to my needs
@Ganesh thanks
Does this mean that if the status is changed , I also have to update the data-type every time
?
no
in your case, you hide based on if the switch is checked or not, the one on each extension
yes, that is the first part :
but the seond part should be then this :
but there I cannot know if it the switch is checked or not
You mean you can't know if switch is checked inside the extension div?
Use the has pseudo class
no
I do not see how I can make this work for my site
It looks like to me that I forget to add something when I do :
looks now to me that it selects all the cards
Not the cards where the switch is checked
because the syntax is incorrect
😢
and I do not see the right syntax
the same as you did in js, a few days ago
you've made the same exact mistake there
oke
Then it would be :
But that one does not respons on a button click
close, but not there yet
😢
Can you use attribute selectors by themselves?
I've never tried it without an element
yes
it's the same as
*[id]
for example
if you dont specify a tag, * is always assumed
that is why :root or just :where(p) workssorry, I do not see what I have done wrong and how I can make it work with a button click
You use [] for attributes. In the code above you are putting something other than an attribute inside them brackets
Gotcha gotcha
chips , now I see it :
the tag cant be inside the attributr selector
also, extensions is a class, not a tag
changed
but still I do not see how to make that work after a button click
Still think I need js for that
well, if you change the buttons to labels with radio inputs inside, not really
hmm, it is then not possibe that two buttons have both a checked status ?
what do you mean?
sorry, im mistaken
you mean that every radio button looks like the button
and then only 1 can be checked
That will be writing a lot of css to make this work
probably not
you might have to throw away some js
or implement the filtering in js
some css so that the radio button looks like a button
some css for the all filtering
some css for the active filtering
some css for the not active filtering
You likely don't need to style the radio input itself to look like a button
You can hide the radio input and instead style it's label
Tho maybe that has some accessibility repercussions i don't know about
it shouldnt
but it shouldnt need much css work
it schould n't
As I see it , it costs some css to make the radip button looks like a button
it shouldnt be any trouble
we see
but not today anymore
you should rest
yep
tomorrow 2 things to do
Groceries and someone going look at our water pipes
it seems there is some sort of blockage somewhere in the kitchen
and then I have to look how many energy is left
you can continue next week, it's fine
we see
Still I wonder if this cannot be done with keeping it a button
with js, yes
oke, when I have some energy I will try to rebuild the buttons as radio things
take your time with it
I will do
This challenge has costed me a lot of time so a few days longer do not matter 🙂
Is this a good start :
without the <br>, it is
but the inputs need a name
i mean, a value
Doesn't he have both name and value attributes?
Or do you mean something else
oh god
i just noticed: the id and value are swapped
also, it's a good idea to use a prefix for the ids
???
How must the html code then look like ?
can you paste here the html for the not active status?
im on my phone
I think you mean this ;
like this:
oke
So this one :
`
?
now you do the same i did
is that bad ?
what do you mean?
I wonder if I do the same as you did is bad or not ?
no, it isnt
oke,
So the active one has to change the same way ?
would be ideal thst you do it for all
yep
this better ?
it's better, but i've separated the value with
- instead of _ to make it obviousoke
changed
then tomorrow rewrite some css to make it look like a button
it will be easier than you think
We see
I hope I can just re-use the css I have used for the button
you can, just need to change the selectors
I mean this one :
`
you change the button to label
and hide the radio thing with
and how do I get the checked one then /
something close to that, but not quite
oh, for the input
this is perfect
sorry
sorry for what ?
So this is the good one :
?
schould it not be
apperenace: none like we did earlier ?
Oke
This css seems to work :
appearence change show it looks like
display changes how it is displayed
The only thing I need to figure out is how to make this one as checked
in this case, hidding is probably better
so this one will be red when first looking at the site
Checked attribute
.filter-options input[type="radio"]:checked + label <-- like this
no, that doesn't work, it has to be the pseudo-class
the attribute isn't updated when you set it from js or when you change the valueI'm not following. You mean if I put checked attribute on one of the radio inputs in a radio group. Clicking other radio inputs won't remove the checked attribute from that input?
are you talking about css, js or html?
Html. Role of was asking how can he mark the
all radio input as initially selected wasn't he?ah, yes, just the
checked attribute on the first oneAlso I just noticed it's roelof dammit
Cool, great
Everything works now well
With this as html :
And this as css :
Epic can you elaborate on this
You mean depending on the device/browser it can look different?
no, you tell it to render like a checkbox, a button or other controls
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
Isn't that considered a misfeature
Mdn mentions that it isn't that right behaviour
Or wait it says elements shown as widget was misfeature.
So widget (radio) shown as another widget (button) isn't?
yes, it is
the way it is written is confusing as hell, not gonna lie
but it is a misfeature
What is the use for these values then?
Are they just there for compatibility
🤔
good question
i just use
noneSo why is hiding the radio input in this case better instead of appearance none?
because you don't want it to show
that's it
Oh! I thought it would work since roleof said it looks right. Haven't used appearance myself so didn't consider how it does things
try it: the link lets you mess with a button
I will later. Currently on mobile right now
that's fine
it's possible to make it work with
apearence: none but a display: none is more appropriateAs far as i know display removes the radio thing so the css would bot work
it would
you can check and uncheck hidden inputs
Would display none break tabbing onto the input. I forgot if labels were focusable by default if input gets hidden
Exactly and you cannot check and uncheck a removed inputs
You can with a click on the label associated with that input
I'm just not sure if keyboard navigation still works
Another thing to try later
yes
it will remove the input
you can add a tabindex to it and it becomes focusable
Gotcha
not that it works, but it is focusable
Welp. Visually hide the input then with width, height etc set to 0? Instead of display or visibility properties
or make it take the entire space of the label
You mean position label above it so it covers and hides the input?
yup
and the input stays visible and is focusable
Nice
but would probably be a good idea to put each inside a <div>
But is my solution good or not?
so far, looks like it
Thanks
i am too tired to think about the code
Goto bed now @ἔρως
Gn
So I can filter the active one with
?
close, very close
tweede poging
`
not quite there
oops, things are going the wrong way
first, for the "all" status you just need to do ... nothing
and for the others, the code is pretty close
it won't work, but it's close
close, but not yet
I will sleep about it
you will need to use
:hasRight now I looks more a guessing game
and you're doing the same mistake you always do:
-
extensions is a class, not a tag, but you have a tag in the code
- checked is a pseudo-class, but you're using it as a tag
- .where is being used as a class, but it is a pseudo-class
- ::checked isn't a valid pseudo-element
just basic css errors
it is a trial and error game
and now really time for me to sleep
GN
not everything is fixed, but that's for tomorrow then
goodnight
oke, Fell out of bed today with the hot weather
What is still wrong at my code ?
Input inside attribute selector
aha, old error
then it would be :
still not working
When I try it nothing changes on the site 😢
remember i said something about
:has()?yep
so where has to become has ?
still no luck
Still nothing changes 😢
that's for multiple reasons, but the biggest one is that
#status-active isn't above .extensionyou mean in the html or in the css ?
in the css it is
#status-active is on line 205
And extension on line 217 in the css
and in the html
Status is on line 51 and extension on line 61
So I do not understand what you mean
3600 message thread still going?
yep
last bits that are the hardest
in the html
what's the common parent element for the inputs and the
.extension cards?main
that means that the radio buttons are on a different parent, right?
yes, the radio buttons have a parent of
filter-options and that has a parent of filter-container
the switch has a parent of 'status and that has a parent of extension which has a parent of extensions
and then both have then a parent main`so, in the main element, you need to check if it has the radio button checked
then, you need to select the
.extensions that have a checked or unchecked switch, based on the radio button you matched beforeoke
There I have to think about
you will have to use
:has()so something like :
close, but no
:has is the correct syntax, but still wouldn't be correct as you can't nest :has()
?
remember this:
-
. <-- class
- : <-- pseudo-class
- :: <-- pseudo-element
you're checking for main inside main😢
I have to think well then how to make the second part work
I try to see that Im looking for the calss extension in the main
yes, but you have an id in the
:has as well, for some reasonchips that needs to be a class
but then still you said im looking for a main inside main
can I delete then the second main ?
you have to
oke
Then it would be :
?
it's very close, but no
😢
you're checking if every single element has an element with the classes
extension input and the attribute [type="checkbox"] and if that parent element isn't checkedlooks like the second has is not needed
it is, it's just in the wrong place
time for a late lunch
very very very very close
😢
actually
you did it
just add a
display: none and you're done
oh, wait, you have a syntax error
remove the ) before the :notstill something wrong
when I press the button , I do not see any cards at all
found it
It has to be this :
yep
filering is working
one js problem to go
change the status and store it on localstorage
chips, I have given the card a id but not put the id on the localstorage
So still I cannot filter things on localstorage
when the switch changes, you have to store the new status on localstorage
yes, seems a good way to make things persitent
And im looking at this code to change
but I do not see where and how I can add a id
Think I need to sleep about this
No, right now I see no possiblity to add a id to my records in localstorage
you can't change that to do what you need
I was already afraid of that
Then i have to see where i can do that
Maybe a function for that
you will need a new function, yes
Something like this ?
what's that function?
I try to iterate throught the array and add a id to the record and then store it on localstorage 😦
that doesn't make sense to be in a new function
also, it's a bug: you're saving the data to local storage
??
You said earlier I need to use a new function for making the id works
no, i said you need a new function to save the state
that is correct that I save the dat to the localstorage
I use only the json file as there is no info in localstorage
that's a bug, in that function
How so saving the state
You mean for saving if a card is active or not
I was talking about adding a id to the data so that removing would be more easy
I forget that the active or not schould also be stored or changed in localstorage
but for that it would be handy if a entry in localstorage has a id , i think
so still im trying to find out how I can add the id to localstorage
where schould i then put the code to store on localstorage
in the readExtensions function ?
you save it in a different function
Sorry i miss what you mean
you save the state in a different function
oke, I did that now in the ReadExtensions function
This was the old situation : https://github.com/RoelofWobben/browser-extenstion/blob/main/reading_data.js#L45
GitHub
browser-extenstion/reading_data.js at main · RoelofWobben/browser-...
Contribute to RoelofWobben/browser-extenstion development by creating an account on GitHub.
Sorry.
But if I cannot make the id work then I also cannot make the changes to localstorage
So I have to set this project on hold
what isn't working?
No idea how to make it work to add a id to the records in localstorage.
And where to put the code to store in localstorage
if I had to do it I would make your give id function only add id to the records then return the modified records.
saveExtensions could be it's own function that takes records as argument and saves them in local storage
I can't be totally sure of what epic was saying above but he was probably pointing out that you should not save to local storeage when the function is for giving ids to the object. It is making the function do multiple things
oke, so if I understand you right , you mean like this :
out of my head and not tested
@Ganesh
I would name them saveExtensions etc as to be consistent but yes something like that
@ἔρως are you happy with the new code ??
there can be another solution but it depends on if you actually need to store extensions with id in local storage, or you only need id for tracking in the dom
as far as I know I need to store the id on localstorage to know which records I have to change when the status is chancing or which record to remove from localstorage
that should be what I would go with then
You mean my last code?
the
saveRecords function has a syntax errorI see it. I need a extra ) at the end , just before the ;
@ἔρως am I now on the right track ??
Why not try it and see if it works?
of course I can but Epic says I have to put the saving on a new function and I wonder if IM now at a point he tries to teach me
when I try the code and changes some bugs, it seems to work
All records in Localstorage have now a field called id with a value
code looks like this:
`
I only have to find out what type records is now
https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type
this is the type of a record
oke
TS itself says this :
how about you call it "extensions"?
use descriptive names
@ἔρως so I can make the code to change the status or remove records/cards ?
yeah
oke, name is changed
next week the last few pieces and then finally done
I think both are not very difficult but we will see
no, they're not, but a bit annoying since you're dealing with localstorage
yep
I think it would be
- reading from localstorage
- changed what I want
- store the data back in localstorage
so I think I do both in the same new file
that's basically it
I wonder .
Can I make a file where I put the write and read functions and use it on other files
yeah, you can
there's no reason for it but you can
I had that idea because on two seperate files I use now the read and write thing
Or I must place the status change one and the remove function on the read_data.js
but then I have to look how I can take care that only when you press a button or change a switch this function is executed
or is the change status as simple as :
and the press button like this :
it's this
oke,
then I think I have this working without any problem
And I understand why you want the read and store to be seperate functions
I can now re-use them on both cases that I have to make
you can make it return the data that's in storage, after you try to write to it
yes, I can
But why schould i read after a write?
to make sure your local copy of everything is the same as what is in the local storage
and it that not when I store the local copy everytime in localstorage then ?
it's always a good idea to read it back
in my opinion
Wierd problem
I have this code :
and this in my html :
why on earth do I get a message that no switch is found
where is that code?
the js code in the reading_data.js file
The input on the html file
github.com/RoelofWobben/browser-extenstion/blob/main/index.html#L66
why is it in a different file?
??
GitHub
browser-extenstion/index.html at main · RoelofWobben/browser-exten...
Contribute to RoelofWobben/browser-extenstion development by creating an account on GitHub.
and why on seperate files.
We had that discussion earlier and I do it to keep track of what does what
because it doesnt exist when the code runs
you will have to listen to the change event on the
.extensions element, and then try to find the parent .extension to do what you need to do
or, do it in the same file, and you wont need to worry about thispfff and I thought this was was a easy one
it is, if it is in the same file
or if you import using modules.
but the making of the divs and now making a evenlisterer is on the same file
here is the code for making the divs : https://github.com/RoelofWobben/browser-extenstion/blob/main/reading_data.js#L92
GitHub
browser-extenstion/reading_data.js at main · RoelofWobben/browser-...
Contribute to RoelofWobben/browser-extenstion development by creating an account on GitHub.
and here the evenlistener : https://github.com/RoelofWobben/browser-extenstion/blob/main/reading_data.js#L164
GitHub
browser-extenstion/reading_data.js at main · RoelofWobben/browser-...
Contribute to RoelofWobben/browser-extenstion development by creating an account on GitHub.
what's wrong with that?
nothing if I may believe you
but still the switch is not found
it isnt found because it doesnt exist
try adding a
debugger statement before the returnoke and how do I make it exists then
looks like I can onky make this eventhandler if the rest is ready
do as i said:
- option 1 - same file
- option 2 - add the change handler to
.extensions and find the parent .extension inside the event handler
- option 3 - add mutation observers to add the event to every single switch as they are added to the document
ive sorted from easiest and most sensible to harder and more annoyingThanks, I will look what I can do
oke DId another try but get stuck again
I have this html :
and I use this js to fetch the button press :
But how do I find the parent of the button that has been pressed which hold the extension class ?
when the button is clicked, you can do something like this:
the
extension constant will be the parent .extension element
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
obviously, do proper type checking and all thatthen I see this error :
because you are doing
e.closest
e is the event, not an element
you need e.targetno no
This is the code so far:
on extensions ts is still not happy
what does it say?
where?
can you send a screenshot with the error?
inside the
if, a few lines above, you forgot a returnthanks
Another one :
you are mixing up types
This better :
almost
you have some bugs there
you are checking if extensions is an array - it will never be
Chips I hate bugs IRL
you are assigning the filtered extensions_array to extensions
but then you are passing the extensions variable to saveRecords
I take a break.
This one is still confusing to solve
and what is then the good type here :
Extensions[]
dank je
Thanks
Then I have to think how to change that line
you dont
why would you need?
because you said this :
that's the
extensions variable, not extensions_array
i said that so you use the correct variableoke
this better :
does it work?
it deletes the card from localstorage
but it is stil seen at the website , I was hoping the page would change
so there is somewhere a bug 😦
do you remove the element?
no, im filtering it out so filteredExtensions contains all cards except the one I want to remove
And that part works well
The only thing that does not work is that the page does not refresh to show the filtered ones except all
@ἔρως @vince any idea how to solve this ?
you have to remove the element from the dom
oke, have to think how to do that
alright
is this a good way to remove the card :
then one thing to do.
Make almost the same code for storing the value of the switch
and then finally done 🙂
no, you have to remove the parent
wait, you have to remove from the parent
you have a bug
😦
where ?
When i test it , it seems to work as expected
you are looping the buttons to add the event listeners
but you are looping from 0 to 11
when you delete one, there wont be 12 buttons
so, you will try to do things with indexes that dont exist
chips, yeah
I know , I hardcoded 11 to make sure things were working
yup, and that is bad
just use a forEach
I have to look what variable I have to use
A foreach could I work also, I think I have to rewrite some indexes then
you wont have to do a ton of work
i know
first a late dinner for Dutch '"rules"
Just back from my daugthers sport
alright
Can someone help me why localstorage is not updated for the switch
that code doesn't do anything, unless you run the function
I know that I run in from here :
is
displayExtensions async?that function is not async
this is the whole file :
add a
debugger statement after the query selectoroke, there are 9 switches found and that is correct as far as I can see
what does the debugger says?
this :
aha,
Found a error message :
I see the problem :
as soon as I delete some cards the id is not the same anymore then the data-id 😦
this function is causing this :
This works fine when reading a new file but fails when we read from localstorage where cards has already a id
or this line in display
that function shouldn't exist, and the code should be part of reading from the json file
Oke, I made it so I could add a data-id to a card
you're setting the id to a number
wait, no, that's the id of the data from the json file
Yep
And i set it to the data-id
Schould i not see that data-id to the id of the card
i didn't say that
^ this is what i said
I know
then why the question?
Because then I cannot see how to add the id to the items in localstorage
if I deleted that code and the call to it
you add it when reading the data from the json file
oke, then I have to think how I do that
exactly as i said
but I do not see where .
I have used that function , you told me to delete in the read function who looks like this ;
before you run
saveRecords
put the code there??
Then it will be the same as I had
yes, like how it was meant to be
Sorry, now in very very confused
first you said that the code needs to be deleted
and now you are saying that it needs to be pulled back ?
i said the function shouldnt exist and the code should be in that place
oke
then I misunderstood you
but then still the problem that the id can be different I think
that wont matter
Oke we see
Wirh the old code the switch code would not work because the data id was not the same as the id on localstorage
I still don't know why we couldn't just add the IDs to the json
that is what i said, but from the code aide
aide
side
read the json, loop, add id, move along
it should work now, since you deleted the function
Can you let me see what you mean?
since this function doesn't exist anymore, and the code is where it should be, there's no problem with the ids
Which code are we talking about?
IM still try to figure out what to put there exactly
the code there
What is then wrong with calling a function that does the same ?
it's a bug
because you are calling the function where you shouldnt
you are not supposed to re-do the ids
oke, so no id in the display function
that is not what i said
i said to do not re-calculate the ids
I think epic is saying to put the code for giving id inline in the try block
because we only give the id to the extensions data when we fetch them. We don't need a function as we will not be reusing this piece of code anywhere else
the extensions saved to local storage already have id property on them so we won't need to reassign ids
exactly
oke, but I use also a id to give the cards a id
Or must I gave it then the id of the item ?
@roelof by doing it this way, you can just read from localStorage and each extension in the
extensions Array will have it's id associated with it
Unless I read that code wrongI know
I don't understand this then
In my displayExtensions i now have this;
schould I also change the id part to use the id that I assign during the read
You wouldn't need that since you can iterate over
extensions[] and use the id provided
Yesoke, now finally things are clear to me
I don't know how you have your code setup though
You just have one
card -- where do you iterate over the html cards to assign the ids to them
const cards = document.querySelectorAll('.card')? Or are you using template like Epic suggested (I think?)I hope then that the id of localstorage will be the same as the card data-id
Now they can be different when you delete cards
and that messed up the switch Change function
I'm not really sure what the best approach to match the id of the localStorage to the cards
GitHub
browser-extenstion/reading_data.js at main · RoelofWobben/browser-...
Contribute to RoelofWobben/browser-extenstion development by creating an account on GitHub.
Oh okay cool
I never used templates
I was going to suggest something like
Maybe you can do something similar with templates? Not really sure, maybe Epic or Ganesh have better ideas
Thanks, that is what I already thought
I can change my code to reflect that and look if things are now working fine
you can do exactly the same, you just need to find the element
that is all
@ἔρως @vince thanks
Evrything seems to work
I cannot find anything wrong
So ship it ?
ship it
https://roelofwobben.github.io/browser-extenstion/
@ἔρως oke, I thought it was needed you look at the site and/or the code
if it works, it works
sometimes, it's more important to get it to work than to write the cleanest pristinest code
oke, then I will submit it and see if I get feedback
i would hold off
i am too tired to check it today
oke
but I already submitted it on FEM
sorry
don't be sorry
are you sure there was nothing missing?
im farily sure
then it's done
- theme can be changed
you can remove items
you can change the status of a card
but if you see some points to improve someday , just say it
i will save it for another time
im too tired
I will take a break and do the next one on Monday
https://www.frontendmentor.io/challenges/social-links-profile-UG32l9m6dQ
Frontend Mentor
Frontend Mentor | Social links profile coding challenge
In this small project, you'll build out your social link-sharing profile. You can even personalize it and use it to share all your social profiles!
I know I already say someday
you should be able to do it in a lot less time
yep, I hope 1 a 2 mornings
and when I finisch that one , I will look with you or @vince what will be the challenge after that
there are I think some 60 free challenges and I have done now 3 , so choice enough
Am i still a good junior or am I downgrade to amateur 😛
GN
you picked a challenge that was too much for you, because it was presented as a lower difficulty than it was
i can't judge your performance based on that
we see how the rest goes
it's a much simpler challenge
I know
holy fuck , 4k comments
yep, was a very diffcult challenge 🙂
Is there a way I can close this one ??
just edit the post and add the "solved" tag
GM , just im time