newtab

Programming (no configs, no support)
Forum rules
Only original work ;)
User avatar
GekkoP
Emacs Sancho Panza
Posts: 5877
Joined: Tue Sep 03, 2013 7:05 am

newtab

Unread post by GekkoP » Thu Sep 06, 2018 1:20 pm

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.

User avatar
wuxmedia
Grasshopper
Posts: 6445
Joined: Wed Oct 17, 2012 11:32 am
Location: Back in Blighty
Contact:

Re: newtab

Unread post by wuxmedia » Fri Sep 07, 2018 9:54 am

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.
"Seek, and Ye shall find"
"Github | Chooons | Site"

User avatar
GekkoP
Emacs Sancho Panza
Posts: 5877
Joined: Tue Sep 03, 2013 7:05 am

Re: newtab

Unread post by GekkoP » Fri Sep 07, 2018 10:06 am

Give us a star, man, just do it! ;-)

User avatar
wuxmedia
Grasshopper
Posts: 6445
Joined: Wed Oct 17, 2012 11:32 am
Location: Back in Blighty
Contact:

Re: newtab

Unread post by wuxmedia » Fri Sep 07, 2018 11:26 am

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
"Seek, and Ye shall find"
"Github | Chooons | Site"

User avatar
GekkoP
Emacs Sancho Panza
Posts: 5877
Joined: Tue Sep 03, 2013 7:05 am

Re: newtab

Unread post by GekkoP » Fri Sep 07, 2018 11:35 am

^ :) 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.

User avatar
wuxmedia
Grasshopper
Posts: 6445
Joined: Wed Oct 17, 2012 11:32 am
Location: Back in Blighty
Contact:

Re: newtab

Unread post by wuxmedia » Fri Sep 07, 2018 12:15 pm

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
"Seek, and Ye shall find"
"Github | Chooons | Site"

User avatar
GekkoP
Emacs Sancho Panza
Posts: 5877
Joined: Tue Sep 03, 2013 7:05 am

Re: newtab

Unread post by GekkoP » Fri Sep 07, 2018 12:18 pm

^ Nice touch, I'll check it out.

User avatar
wuxmedia
Grasshopper
Posts: 6445
Joined: Wed Oct 17, 2012 11:32 am
Location: Back in Blighty
Contact:

Re: newtab

Unread post by wuxmedia » Fri Sep 07, 2018 12:20 pm

ahem once I figure out how to push the code back :D
"Seek, and Ye shall find"
"Github | Chooons | Site"

User avatar
GekkoP
Emacs Sancho Panza
Posts: 5877
Joined: Tue Sep 03, 2013 7:05 am

Re: newtab

Unread post by GekkoP » Fri Sep 07, 2018 12:32 pm

^ Just seen it. Thanks, I did the same, much easier to add stuff now.

User avatar
wuxmedia
Grasshopper
Posts: 6445
Joined: Wed Oct 17, 2012 11:32 am
Location: Back in Blighty
Contact:

Re: newtab

Unread post by wuxmedia » Fri Sep 07, 2018 12:34 pm

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
"Seek, and Ye shall find"
"Github | Chooons | Site"

User avatar
wuxmedia
Grasshopper
Posts: 6445
Joined: Wed Oct 17, 2012 11:32 am
Location: Back in Blighty
Contact:

Re: newtab

Unread post by wuxmedia » Fri Sep 07, 2018 12:39 pm

im not sure that it is the best flexible grid arrangement in the world. gets kinda gappy, mostly only ever full screen width anyway.
"Seek, and Ye shall find"
"Github | Chooons | Site"

User avatar
GekkoP
Emacs Sancho Panza
Posts: 5877
Joined: Tue Sep 03, 2013 7:05 am

Re: newtab

Unread post by GekkoP » Fri Sep 07, 2018 1:05 pm

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. :)

User avatar
wuxmedia
Grasshopper
Posts: 6445
Joined: Wed Oct 17, 2012 11:32 am
Location: Back in Blighty
Contact:

Re: newtab

Unread post by wuxmedia » Fri Sep 07, 2018 2:28 pm

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:

Code: Select all

.button-* {
  margin: 4px 4px;
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.
"Seek, and Ye shall find"
"Github | Chooons | Site"

User avatar
GekkoP
Emacs Sancho Panza
Posts: 5877
Joined: Tue Sep 03, 2013 7:05 am

Re: newtab

Unread post by GekkoP » Fri Sep 07, 2018 2:45 pm

Fantastic, thanks for the tips. I pushed a new version on GitHub, and this is really pleasing.

User avatar
ivanovnegro
Minister of Truth
Posts: 5448
Joined: Wed Oct 17, 2012 11:12 pm

Re: newtab

Unread post by ivanovnegro » Fri Sep 07, 2018 4:25 pm

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.

User avatar
GekkoP
Emacs Sancho Panza
Posts: 5877
Joined: Tue Sep 03, 2013 7:05 am

Re: newtab

Unread post by GekkoP » Fri Sep 07, 2018 7:35 pm

^ 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.

User avatar
wuxmedia
Grasshopper
Posts: 6445
Joined: Wed Oct 17, 2012 11:32 am
Location: Back in Blighty
Contact:

Re: newtab

Unread post by wuxmedia » Sat Sep 08, 2018 9:16 pm

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 :)

Code: Select all

.button-* {
  margin: 4px 4px;
OMFG Does this actually fucking work? - It was more pseudo bash than an actual CSS thing :D Well, great "I know CSS"
"Seek, and Ye shall find"
"Github | Chooons | Site"

User avatar
franksinistra
Ivana Fukalot
Posts: 1093
Joined: Mon Jan 27, 2014 2:03 am
Location: 印尼国

Re: newtab

Unread post by franksinistra » Sun Sep 09, 2018 1:16 pm

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. :)
rice no more.

User avatar
franksinistra
Ivana Fukalot
Posts: 1093
Joined: Mon Jan 27, 2014 2:03 am
Location: 印尼国

Re: newtab

Unread post by franksinistra » Sun Sep 09, 2018 1:43 pm

Also, dang i forgot about space-around flexbox prop.
rice no more.

User avatar
GekkoP
Emacs Sancho Panza
Posts: 5877
Joined: Tue Sep 03, 2013 7:05 am

Re: newtab

Unread post by GekkoP » Sun Sep 09, 2018 3:09 pm

^ Just wow, implemented every suggestion. Thank you.

Post Reply