@VinceAggrippino@techhub.social
@VinceAggrippino@techhub.social avatar

VinceAggrippino

@VinceAggrippino@techhub.social

Software Engineer:
#HTML, #CSS, #JavaScript, #ReactJS, #VueJS, #NodeJS, #Linux

Schizoid Personality Disorder: https://youtu.be/Kp0iGmXz7Fs?si=h7PoMeD0toQ7NZQy

This profile is from a federated server and may be incomplete. Browse more on the original instance.

VinceAggrippino, to reddit
@VinceAggrippino@techhub.social avatar

is great, but the recommended posts from subreddits I haven't joined are annoying.

For a temporary, on-demand solution, I enter the following in the dev tools console:

document.querySelectorAll('article:has(shreddit-join-button)').forEach(article => article.remove() )

VinceAggrippino, to javascript
@VinceAggrippino@techhub.social avatar

I kind of like not using semicolons in .

But, I just encountered an ASI problem for the first time... with an easy solution.

The solution is arguably better code anyway...

TristonArmstrong, to random
@TristonArmstrong@fosstodon.org avatar

@VinceAggrippino you alive?

VinceAggrippino,
@VinceAggrippino@techhub.social avatar

@TristonArmstrong I suppose it's a matter of perspective 😅 There's not a lot going my way these days.

VinceAggrippino, to javascript
@VinceAggrippino@techhub.social avatar

Using append might work a little better than appendChild. You can append multiple items or even text blocks.

https://developer.mozilla.org/en-US/docs/Web/API/Element/append

And, of course, if you're optimizing your efficiency 😅, this saves you 5 key strokes (6 if you count Shift) 😁

VinceAggrippino, to javascript
@VinceAggrippino@techhub.social avatar

Is there any practical difference between parentNode and parentElement?

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

29decibel, to webdev
@29decibel@mastodon.social avatar

How To Center a Div

https://wwwwebdevcomeau.com/css/center-a-div/

If there's anyone in the world who treats writing a blog like shipping a product, it's Josh W. Comeau.

Once again, Josh has nailed it. I've learned a ton from this piece and greatly appreciate all the details.

VinceAggrippino, (edited )
@VinceAggrippino@techhub.social avatar

@29decibel I think this is the correct link: https://www.joshwcomeau.com/css/center-a-div/

Just from the top of my head...

#mydiv { margin: auto }  

:has(> #mydiv) {  
 display: grid;  
 place-items: center;  
}  

:has(> #mydiv) {  
 display: flex;  
 justify-content: center;  
 align-items: center;  
}  

#mydiv {  
 position: absolute;  
 top: 50%  
 left: 50%;  
 transform: translate(-50%, -50%)  
}

... Now I'll go read the article myself and compare notes 😁  
#CSS
VinceAggrippino,
@VinceAggrippino@techhub.social avatar

@29decibel It looks like one of my methods is a little old-school and he refers to it as "transform hacks" 😅

VinceAggrippino, to vscode
@VinceAggrippino@techhub.social avatar

The Live Server extension for has started to take a very long time to open a browser tab. Has anyone else had this problem?

https://www.reddit.com/r/vscode/comments/1aq9uv7

VinceAggrippino, to CSS
@VinceAggrippino@techhub.social avatar

The :last-of-type pseudo-selector doesn't mean the last element matching this selector. It's referring to the element type. e.g.: div, p

To style the last element matching a selector, use :nth-last-child with the of selector syntax.

https://codepen.io/VAggrippino/pen/wvOQdQQ

VinceAggrippino,
@VinceAggrippino@techhub.social avatar

... And, what this meant for me...

❌ Array.from(document.querySelectorAll('.list')).toReversed()[0]

✅ document.querySelector(':nth-last-child(1 of .list)')

VinceAggrippino, to CSS
@VinceAggrippino@techhub.social avatar

Sometimes grid works out better if you don't define the entire grid.

I've spent too much time tweaking grid-template-rows trying to get elements laid out how I wanted.

I just realized that sometimes I can just leave out the rows to get what I want.

https://codepen.io/VAggrippino/pen/YzgOLqw

VinceAggrippino, to CSS
@VinceAggrippino@techhub.social avatar

hwb() generator: https://codepen.io/VAggrippino/pen/vYPzBVQ

VinceAggrippino, to random
@VinceAggrippino@techhub.social avatar

When you think your refactor successfully did the same job more efficiently with fewer lines of code ...

git diff --shortstat

... but it turns out it's actually more lines of code.

It's still more efficient, isn't it... Isn't it? 😬

VinceAggrippino, to javascript
@VinceAggrippino@techhub.social avatar

I thought that didn't have insertAfter and you need to either use appendChild or insertBefore with nextSibling.

Well, I was wrong (mostly). It's called insertAdjacentElement and you can use it to move an element before, after, or inside of a target element without even referencing its container.

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

VinceAggrippino,
@VinceAggrippino@techhub.social avatar

I wanted to play with this before I used it in a project page...
https://codepen.io/VAggrippino/pen/XWGYGVo

... I guess it's kinda neat, right? 😅

VinceAggrippino, to random
@VinceAggrippino@techhub.social avatar

BTW, Thank you @Fyrd for making life easier for me and millions of web developers around the world. You're effing awesome, dude!

For whoever doesn't know, he's the creator and maintainer of .

VinceAggrippino, to random
@VinceAggrippino@techhub.social avatar

is more up-to-date than ?

The Iterator.prototype.reduce page has information about Edge 122, but CanIUse doesn't have anything for that version yet.

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/reduce#browser_compatibility

CanIUse: https://caniuse.com/mdn-javascript_builtins_iterator_reduce

VinceAggrippino, to random
@VinceAggrippino@techhub.social avatar

I wanted to write my commit message as I'm coding so that I don't forget the details when I actually do the commit.

So, I created a git-commit-message.txt file which I'll reuse for every commit, added it to .gitignore, and added a modeline to make NeoVim recognize it as a commit message (also, VSCode via modelines extension).

I'll keep it open in a pane while I'm coding, then I'll use it with the -F argument:

git commit -F git-commit-message.txt
VinceAggrippino,
@VinceAggrippino@techhub.social avatar

Oooops! ... Those lines that start with hashtags only count as comments if you edit the message when you do the commit. So, my commit subject line was "# code: language=git-commit".

Unfortunately, I created and pushed two commits before I realized this. So, I got a little practice with amend, rebase, and forced pushes.

Use git commit -eF or just leave out the modelines.

😅

VinceAggrippino, to random
@VinceAggrippino@techhub.social avatar

I kept googling "git commit message guidelines", so I made myself a template to remind me.

https://git-scm.com/book/en/v2/Customizing-Git-Git-Configuration#_commit_template

VinceAggrippino, to random
@VinceAggrippino@techhub.social avatar

.git/COMMIT_EDITMSG

This file in your repository means git commit exited due to an error.

It took me a minute to find out where this file came from. Some search results seemed to suggest that it was generated by VSCode.

Although I use VSCode for editing code and looking at diffs, I always do commits from the command line and use NeoVim for commit messages.

https://www.git-scm.com/docs/git-commit/2.2.3#Documentation/git-commit.txt-codeGITDIRCOMMITEDITMSGcode

VinceAggrippino, to webdev
@VinceAggrippino@techhub.social avatar

I was playing around with the HTML Drag & Drop API and ended up making it a little fancier than originally intended.

https://codepen.io/VAggrippino/pen/xxBgoBO

VinceAggrippino, to typescript
@VinceAggrippino@techhub.social avatar

I'm using type checking with in client-side and I encountered this problem:

> Property 'innerText' does not exist on type 'Element'

It took a bit of searching, but I've learned that the solution for me is:

/** @type@techhub.social {NodeListOf<HTMLElement>} */

I don't like how this is documented. It's on a page about DOM manipulation with TypeScript, which makes some sense, but I didn't see anything about doing this in JS with JSDoc. It says it's defined in lib.dom.d.ts and I thought I might have to import a type definition somehow.

I found it here:
https://www.typescriptlang.org/docs/handbook/dom-manipulation.html#the-queryselector-and-queryselectorall-methods

VinceAggrippino, to javascript
@VinceAggrippino@techhub.social avatar

You can style your console messages with using the %c format specifier.

This is documented in the Console standard specification, but the information is 3 clicks deep.

It's easier to just read the information on @devtoolstips page starting here: https://devtoolstips.org/tips/en/format-console-messages/

If you want the official doc:

  1. Start at MDN: https://developer.mozilla.org/en-US/docs/Web/API/console/log_static
  • Click the link to the Console standard under Specifications

  1. Log spec @ whatwg: https://console.spec.whatwg.org/#log

  2. Logger spec @ whatwg:
    https://console.spec.whatwg.org/#logger

  3. Formatter spec @ whatwg: https://console.spec.whatwg.org/#formatter

develwithoutacause, to til
@develwithoutacause@techhub.social avatar

calc can't add or subtract with a unitless 0. You must include units.

/* Doesn't work. */  
height: calc(0 + 100px);

/* Works. */  
height: calc(0px + 100px);

https://stackoverflow.com/a/55406181/3995712

I can kind of see the argument why here, but it's strange to me that multiplication works, just not addition or subtraction. Definitely a foot gun to watch out for. I wonder how many linters would suggest unitless 0 here?

VinceAggrippino,
@VinceAggrippino@techhub.social avatar

@develwithoutacause
I've often run into this when I have padding set with a custom property and an element that I want to ignore it. I start my calc with 0px -;

e.g.

:root {  
--paragraph-padding: 1em;  
}

p {  
 padding: var(--paragraph-padding);  
}

p.highlighted .icon {  
 display: inline-block;  
 margin-left: calc(0px - var(--paragraph-padding));  
}
  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • rosin
  • Durango
  • osvaldo12
  • khanakhh
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • magazineikmin
  • thenastyranch
  • cubers
  • Youngstown
  • slotface
  • kavyap
  • JUstTest
  • GTA5RPClips
  • anitta
  • tacticalgear
  • modclub
  • ethstaker
  • cisconetworking
  • InstantRegret
  • everett
  • provamag3
  • normalnudes
  • Leos
  • tester
  • lostlight
  • All magazines
    •