Page 1 of 2
newtab
Posted: Thu Sep 06, 2018 1:20 pm
by GekkoP
https://github.com/manuel-uberti/newtab
Programming is too heavy a word for this little thingy, but I am so used to Opera's Speed Dial I wanted something similar for Chrome.
I wanted something HTML+CSS only, without JavaScript but with some fanciness like button pressed effect, etc.
Really silly, really simple, but it spares me another browser extension.
Re: newtab
Posted: Fri Sep 07, 2018 9:54 am
by wuxmedia
pretty, and very useful.
I used to be happy with the chrome auto managed homepage, but it's a recently been a bit crap and I visit soo many random sites on the job it gets full of random sites I don't want to ever visit again
also html+css - My Man! forked and new tabbed.
Re: newtab
Posted: Fri Sep 07, 2018 10:06 am
by GekkoP
Give us a star, man, just do it! ;-)
Re: newtab
Posted: Fri Sep 07, 2018 11:26 am
by wuxmedia
oh sure -done, needed to make sure I could work out how to fork it (took long enough, then forked it to the wrong repo under my work user *sighs*)
is that, a Dr Who haynes manual on your github avatar? for the tardis maybe? nice.
eurgh there is always something - I like my new tab to have the bookmarks bar on - but have it hidden on normal browsing. Which the custom new tab ext doesn't cater for, So i just migrated the most used bookmarks onto this page as that is what it is for.
probably best if my repo isn't public with all the shady urls I have on it now :D
Re: newtab
Posted: Fri Sep 07, 2018 11:35 am
by GekkoP
^ :) thanks
The shirt comes straight from
https://www.thewhoshop.com/
Dalek picture, by the way.
Been there a while ago with the missus, Dr Who geeks as we are, and bought a souvenir.
Re: newtab
Posted: Fri Sep 07, 2018 12:15 pm
by wuxmedia
ahh cool,
I splashed out on a herbie hancock 'head hunters' t-shirt (of the ablum cover and back on the back)
- hey I made this page responsive by the way, not sure if you give a shit, seemed slightly easier to maintain I can just add buttons and the page decides how many can fit on etc, one 'button-area' div :D
Re: newtab
Posted: Fri Sep 07, 2018 12:18 pm
by GekkoP
^ Nice touch, I'll check it out.
Re: newtab
Posted: Fri Sep 07, 2018 12:20 pm
by wuxmedia
ahem once I figure out how to push the code back :D
Re: newtab
Posted: Fri Sep 07, 2018 12:32 pm
by GekkoP
^ Just seen it. Thanks, I did the same, much easier to add stuff now.
Re: newtab
Posted: Fri Sep 07, 2018 12:34 pm
by wuxmedia
yeah cool, great minds and all that - I added a yellow box too as that is the company colour. I know - sign me up as a web dev :D
Re: newtab
Posted: Fri Sep 07, 2018 12:39 pm
by wuxmedia
im not sure that it is the best flexible grid arrangement in the world. gets kinda gappy, mostly only ever full screen width anyway.
Re: newtab
Posted: Fri Sep 07, 2018 1:05 pm
by GekkoP
To be honest, I've never played with flex before. I just wanted a grid of buttons, every line the same size, taking care of the gaps itself.
I'm open to a better CSS, of course. :)
Re: newtab
Posted: Fri Sep 07, 2018 2:28 pm
by wuxmedia
neither had i - i know the principles of responsive though and it pretty much is.
hmmm, try this:
Code: Select all
.button-area {
justify-content: center;
and equal margins for the boxes:
then the amount of boxes is decided by the width of the box I think..
yeah that looks quite nice- thanks for pointing to the flex attribute - i had not seen it before, should make things a bit easier should i wish to redesign my site.
Re: newtab
Posted: Fri Sep 07, 2018 2:45 pm
by GekkoP
Fantastic, thanks for the tips. I pushed a new version on GitHub, and this is really pleasing.
Re: newtab
Posted: Fri Sep 07, 2018 4:25 pm
by ivanovnegro
Now that looks nice guys. Though I usually only use the keyboard to get to another page or bookmark. But at least it looks fancier than Chrome's default tab page.
Re: newtab
Posted: Fri Sep 07, 2018 7:35 pm
by GekkoP
^ Mostly, I do the same. I am particularly fond of
DuckDuckGo bangs to move around.
But for the regular websites, and the lazy dude, I like the one-click option.
Re: newtab
Posted: Sat Sep 08, 2018 9:16 pm
by wuxmedia
Glad I could help, seems I'm more of a find something and alter it (read try all the thing and see what it does) rather than a read the docs understand the thing and make it 'from scratch' person :)
OMFG Does this actually fucking work? - It was more pseudo bash than an actual CSS thing :D Well, great "I know CSS"
Re: newtab
Posted: Sun Sep 09, 2018 1:16 pm
by franksinistra
Could use some media queries on its font size
like:
Code: Select all
/* assuming you set your default minimum font-size to 12px, works nicely on mobile browser as well */
@media screen and (min-width: 540px) {
* {
font-size: calc(12px + 8 * ((100vw - 540px) / 1080)) !important;
}
}
and you can delete all those font-size you set up manually on each of your button class.
I think you'll benefit more using sass / scss rather than plain css, or you could set your color class to be different from your button class i.e.
Code: Select all
:root {
--green: #some_hex;
--blue: #some_hex;
}
.green {
background: var(--green);
}
That newtab page would also benefitted more from using justify-content: center stuff, since flex-start would leave some right part of your browser width unoccupied. If you instead want to use flex-start, you could use flex-grow to make sure each element inside your container will occupy all space.
Just my 2p. :)
Re: newtab
Posted: Sun Sep 09, 2018 1:43 pm
by franksinistra
Also, dang i forgot about space-around flexbox prop.
Re: newtab
Posted: Sun Sep 09, 2018 3:09 pm
by GekkoP
^ Just wow, implemented every suggestion. Thank you.