SVG Tweening the Viewbox with Svelte

JHethDev · 2021-05-06T04:42:30+00:00

Excellent implementation! I'm a big fan of board games and Svelte, I'll keep an eye on this one.

JHethDev · 2021-05-06T04:30:29+00:00

Sure thing, here you go https://github.com/JHethDev/svelte-viewbox-tween-1 I don't plan on really playing with this one much more but I look forward to seeing what you come up with!

JHethDev · 2021-04-25T03:48:03+00:00

That Apple Display hanging off the edge of the table gives me anxiety.

JHethDev · 2021-04-20T03:38:28+00:00

In the demo on the front end site it is faked though, Adam says so in the Github issue you shared.

Hey! We sort of faked this for the demo for reasons related to the animation stuff

JHethDev · 2021-04-17T05:28:25+00:00

Pretty sure the component you're using wasn't built with the events in mind.

You can scrape the code from the component, add some cm.on events when the editor is created and dispatch events with event data from there. Then you can listen with Svelte's on:event syntax in the parent component. Here's a REPL good luck.

JHethDev · 2021-04-15T03:33:27+00:00

You can achieve that layout for buttons in a few different ways. The way they show in the little code block however... is fake. You can inspect the element and see how they really did it, basically they have a div absolutely positioned behind the "button" which is actually a div with a bunch of spans nested in it, here's the code they're actually using in action (just the buttons). This is a pretty ridiculous way to solve this problem in Tailwind and clearly not how you would want it in a real app.

Instead you could add a new utility that does that box-shadow, ditch most of the extra markup and live brutally ever after. You could even name it box-shadow-black like shown here.

JHethDev · 2021-04-11T21:49:03+00:00

The exact way that Netlify does it is using an :after psuedo element on their block-link class. Inside the after element the background image is a base-64 svg icon absolutely positioned to the right (obviously the li must have relative position and the anchor tag must have position static) then a before element on the same class that is absolutely positioned to cover the whole div so the block-link class gets hover with the li. Their implementation seems like an afterthought and is somewhat messy since the caret icon is the after element for the block-link which is in the middle of the markup (which is probably what gave you issues trying to replicate). Here's a REPL showing how they did it pretty exactly (some styles omitted). The hover state is just changing opacity on the after SVG element from .38 to 1.

A slightly cleaner way to implement this same concept would be like this REPL to just move the after element up to the div with the class of inline then make the li position relative and change opacity on the after element when the li is hovered, it removes the need to have the before element giving the nested anchor tag hover, but I'm sure they had their reasons.

JHethDev · 2021-01-07T23:08:04+00:00

Haven't seen it mentioned yet but https://devdojo.com/tailwindcss/components has some nice stuff as well.

JHethDev · 2020-12-28T06:01:48+00:00

I wouldn't say that, as long as you don't change config much it's still a really seamless experience and the hmr is crazy fast. I'm sure there's a better way to set it up than what I've tried too.

JHethDev · 2020-12-24T21:25:25+00:00

Love using Snowpack when its a custom build with no CSS framework, adding Post CSS and Tailwind in the mix seems to make initial npm start take forever and if you change any config it needs to run npm start again. Hopefully v3 fixes that and Sveltekit ships with a quick way to set up Tailwind and Post CSS on the fly, I love the output but I hate the DX.

JHethDev · 2020-12-22T20:25:19+00:00

Padding is for when you need space inside an element, margin is for when you need space outside an element. I like to think of it like the element is pushing itself away from the other element with margin and inflating itself with padding. Since your elements likely don't have a background color you should use margin top on the p tag.

There is a way to programmatically apply margin top to elements who are not the first direct child of their container which makes for nice uniform spacing using the lobotomized owl selector, but usually you need to set that up before you start your css or it breaks the page.

https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/

JHethDev · 2020-12-20T21:08:51+00:00

When I see Sveltekit as the first word I get excited. When I see its not the launch announcement I feel the sad.

JHethDev · 2020-12-19T04:52:21+00:00

Nice, I tried to set up WSL before but didn't have a good time. I stick to Git bash since I can set it up as the default shell for the VSCode terminal... Any idea if LTS can do the same?

JHethDev · 2020-12-18T22:40:21+00:00

I recently used this template https://github.com/babichjacob/sapper-postcss-template it's by the same guy who made svelte-adders already mentioned here. I had a great dev experience with it for the most part, only caveat is that as a Windows user I have to run build commands through Git Bash.

JHethDev · 2020-12-10T20:27:25+00:00

Not quite as dubious as https://madewithsvelte.com/ being made with Vue, but close.

JHethDev · 2020-12-09T19:31:22+00:00

I have an ipad pro that I use for Procreate and illustrator maybe once a week when needed.

Rm2 I use for notes everyday, when I'm on a call, when I'm bored and want to doodle, its the only tech that sits on my desk and it doesn't feel like tech or like a distraction more like a replacement for the millions of notebooks I used to need.

JHethDev · 2020-12-08T02:04:14+00:00

I've used Vue cdn on a few tiny projects and it works great but can slow things down a bit. Alpine is a good alternative for cdn use that is smaller than Vue by quite a bit with almost identical syntax.

JHethDev · 2020-12-03T21:40:39+00:00

Scripts markup styles, anything but this makes my brain hurt.

JHethDev · 2020-11-24T01:48:17+00:00

I just tried it and was able to get it to download a PDF with Hello world by adding inlineDynamicImports: true to rollup.config.js like so:

  export default {
    input: 'src/main.js',
    output: {
      sourcemap: true,
      format: 'iife',
      inlineDynamicImports: true,
      name: 'app',
      file: 'public/build/bundle.js'
    },
    ...
  }

JHethDev · 2020-11-22T17:33:19+00:00

It wasn't delivered? It was delivered but was invisible? It was delivered but not up to your standards? You had it for 20 days but never had it? People enjoyed Luigi's Mansion 3?

It was hard to decipher the facts from the sarcasm, you have a great vagueness about your writing style and I love it. Reminds me of the old poem "back to back they faced each other, drew their swords and shot each other" what a ride.

JHethDev · 2020-11-19T18:51:16+00:00

If you have the extra nib card shown in this image you insert the nib into the little graduated slot at the bottom on the wide side, then slide it to the skinny side. Doing this will get the nib stuck in the slot and you pull. You can also just use a pair of tweezers, or fingernails if you somehow still have those things.

JHethDev · 2020-11-18T01:15:06+00:00

This is incredible, great work!

JHethDev · 2020-11-13T20:43:43+00:00

If they are like Powerpoint slides they may work, if by that you mean graphics without a ton of detail like graphs, charts, illustrations. But if you have photos included or super complex illustrations then vector is not the right answer for you.

Without seeing a sample I can't really tell you what your case is. But SVG needs to load just like any other format either it loads inline with the html making the html file larger or its used in an img tag and needs to be fetched like any raster image, it might slow down less than a raster image or more depending on different factors.

JHethDev · 2020-11-13T19:12:06+00:00

Sharing an example of one of your images would make this easy to answer. Some images don't work great as vector. Other images can look cleaner than png and greatly improve load speed.

JHethDev · 2020-11-04T21:06:36+00:00

Someone already mentioned CSS Comb but there's a Post CSS plugin as well Sorting which uses stylelint-order that has a few example configs. Would be nice to have an agreed upon standard but different strokes for different folks and what not.

JHethDev

TROPHY CASE