Share this page!

Zed A. Shaw, Writer Profile picture
Twitter logo
18 Dec, 6 tweets, 2 min read
Today I discovered VisBug:

github.com/GoogleChromeLa…

It's *almost* the CSS debugging tool I want, except for one glaringly obvious flaw.
First, here's a demo of me using it to analyze and mess with my Twitter page:
Now, I'm going to try to adjust the padding on some elements. Notice how it seems like I'm having trouble getting anything to move, and then the page reloads and goes somewhere weird? That's because it uses the keyboard for adjustment.
The fatal flaw is it is a browser extension (and works on all browsers too) so it has trouble grabbing the mouse for full control, and seems to have issues with fully grabbing the keys. That means you easily accidentally interact with the page, not VisBug.
I'd say the other problem with it is it's...sort of useless? I would expect something called Vis BUG to let me debug the visuals, but this just lets me alter them, and then I can't find out what the new value is. I change a font, like it...and then still use inspect to get it?
What I would want is to be able to *debug* problems with the CSS, not alter it. I want to see what that font size is, not the crazy class name it has. I want to change the font and *then see* what new size it has. I want to see borders and margins, or the cascade.

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Zed A. Shaw, Writer

Zed A. Shaw, Writer Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @lzsthw

Zed A. Shaw, Writer Profile picture
20 Dec
I'm on a killing spree of BS technology giant companies force on us. For weeks I've been "cleaning up CSS" by simply using flexbox and CSS grids for layout. Today, I want to rant about DMARC, DKIM, and BIMI as my next BS standards topic:
I recently had Sendgrid shutdown my email for a week without telling me because one single "malicious email" apparently went through their servers, even though they couldn't prove it or provide any logs. I then tried SocketLabs, and they went down for a whole day for no reason.
That means I'm going to now try to do my own email hosting and comply with all the following standards as best I can:

1. SPF
2. DMARC
3. DKIM
4. BIMI .... whatever that is.

I'm using the tool mxtoolbox.com to help me diagnose the configuration.
Read 25 tweets
Zed A. Shaw, Writer Profile picture
20 Dec
All day yesterday I played Subsistence:

store.steampowered.com/app/418030/Sub…

And "all day" means "12 hours non-stop". I'm just going to say all these OpenWorld Crafting Survival games are research. Uhhhh yeah, research 'cause I have no idea how they are so addicting. Some ideas:
So far I've played hundreds of hours in:

Subnautica (both versions)
The Forest
Windbound
Breathedge
No Man's Sky
Subsistence
Stranded Deep
Grounded

They all have particular elements that make them nearly impossible to stop playing which are very similar to gambling.
I'd say the three elements that make the games appealing--not necessarily addicting--are:

1. Open World allows for adventure and exploration plus an amount of fear.
2. Survival adds a game mechanic that doesn't require complex or many enemies.
3. Crafting gives leveling up.
Read 19 tweets
Zed A. Shaw, Writer Profile picture
5 Dec
I started playing Stranded Deep a few days ago and it's a really nice survival simulation, but suffers from the same clunky joystick controls that Subnautica, Windbound, and Astroneer all have. I think I've pinned down what's going on with these games and mouse vs. joystick.
When they develop the controls for the mouse they treat the "scene" as simply a flat projection, so whatever you can see can be picked up. I've picked up things an estimated 4m away with my hand using the mouse, and I can grab things when the mouse is nowhere near the object.
Meanwhile, with a joystick, I have to be within a realistic 1m range of the item, and put the tiny little dot exactly on it or nothing. This means it's entirely the programmers penalizing the joystick with "realism" and nothing to do with the joystick's motion abilities.
Read 13 tweets
Zed A. Shaw, Writer Profile picture
5 Dec
Continuing my self-eduction on using just flexbox/grid to do layouts, I did a quick replica of Google's main page. It's the simplest one. Here's the outcome, the tags, and the CSS. But wait, there's more!
You think, "So what, you replicated the simplest page possible." Yes, but, that single .svelte file's layout adapts so that it works as either a full page, or *a panel component* without modification. Flexbox allows you to make adaptable components much more easily.
All I did to make that work is this code. Import the Google.svelte, put the <Google/> tag, and done. That entire page flexes right into the space I gave it in the grid layout without modification.

Not sure how useful that is for a whole page, but great for other things.
Read 4 tweets
Zed A. Shaw, Writer Profile picture
3 Dec
@SendGrid Saga Day 2:

They can't explain to me exactly how my account was accessed without 2FA being bypassed. I changed the password and delete all the API keys just to make this dude shut up about it and finally tell me, but here's what they're saying and why it's weird:
1. A single "malicious" email was sent from one of my servers to Sendgrid's servers. They want me to rotate my API keys, but, if the email came from my server, then rotating the key won't matter because that means the server was hacked.
2. They seem to be confused about how their own API keys work. They are saying someone got my API key, and sent a malicious email. Then...it would come from a different IP and not my server. If they say it's from my server, then...my server has been compromised?
Read 6 tweets
Zed A. Shaw, Writer Profile picture
3 Dec
I'm going to show you a technique I've been using to help with CSS work. I put a <nav> in the footer so that I can make the icons on the right in this screenshot go full to the right, just like in the header. It's currently not doing that, but why? Image
The main difficulty with CSS development is the tools for seeing the shapes of things are too hard to access. A better solution is just add a 1px red border:
Easy, now I see that it's just not full width, so add in width:100%, but keep that red border because that might not work because it's CSS and there's always a 48.5% chance nothing you do works.
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

Like this author's thread?

Get emails when @lzsthw has new unrolls!

Check out other threads from @lzsthw!

Read all threads by @lzsthw