Shakedown Social

JacketI have so much mixed feeling about <a href="https://tech.lgbt/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a>. In one hand, I like <a href="https://tech.lgbt/tags/jsx" class="mention hashtag" rel="nofollow noopener" target="_blank">#jsx</a>. I mean, I really don't like <a href="https://tech.lgbt/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> but I like the idea to integrate <a href="https://tech.lgbt/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> and <a href="https://tech.lgbt/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> so they can be syntax checked instead of a big hard to read string. On the other hand your site is now coming with scripts even if it's just a simple form that could be coded in plane HTML. I learned react to help getting jobs but if it was my own website, I would use something else. I started to check <a href="https://tech.lgbt/tags/flutter" class="mention hashtag" rel="nofollow noopener" target="_blank">#flutter</a>. I like the idea of having one code that can generate websites, desktop apps and phone apps.

xoron :verified:React-like functional webcomponents, but with vanilla HTML, JS and CSSIntroducing Dim – a new <a href="https://infosec.exchange/tags/Framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#Framework</a> that brings <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactJS</a>-like functional <a href="https://infosec.exchange/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a>-syntax with <a href="https://infosec.exchange/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#VanillaJS</a>. Check it out here: 🔗 Project: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener" translate="no" target="_blank">https://github.com/positive-intentions/dim</a> 🔗 Website: <a href="https://dim.positive-intentions.com" rel="nofollow noopener" translate="no" target="_blank">https://dim.positive-intentions.com</a>My journey with <a href="https://infosec.exchange/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> started with Lit, and while I appreciated its native browser support (less <a href="https://infosec.exchange/tags/Tooling" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tooling</a>!), coming from <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactJS</a>, the class components felt like a step backward. The <a href="https://infosec.exchange/tags/FunctionalProgramming" class="mention hashtag" rel="nofollow noopener" target="_blank">#FunctionalProgramming</a> approach in React significantly improved my <a href="https://infosec.exchange/tags/DeveloperExperience" class="mention hashtag" rel="nofollow noopener" target="_blank">#DeveloperExperience</a> and debugging flow.So, I set out to build a thin, functional wrapper around <a href="https://infosec.exchange/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#Lit</a>, and Dim is the result! It's a <a href="https://infosec.exchange/tags/ProofOfConcept" class="mention hashtag" rel="nofollow noopener" target="_blank">#ProofOfConcept</a> right now, with "main" <a href="https://infosec.exchange/tags/Hooks" class="mention hashtag" rel="nofollow noopener" target="_blank">#Hooks</a> similar to React, plus some custom ones like useStore for <a href="https://infosec.exchange/tags/EncryptionAtRest" class="mention hashtag" rel="nofollow noopener" target="_blank">#EncryptionAtRest</a>. (Note: <a href="https://infosec.exchange/tags/StateManagement" class="mention hashtag" rel="nofollow noopener" target="_blank">#StateManagement</a> for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore <a href="https://infosec.exchange/tags/Passwordless" class="mention hashtag" rel="nofollow noopener" target="_blank">#Passwordless</a> options like <a href="https://infosec.exchange/tags/WebAuthn" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebAuthn</a>/#Passkeys).You can dive deeper into the <a href="https://infosec.exchange/tags/Documentation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Documentation</a> and see how it works here: 📚 Dim Docs: <a href="https://positive-intentions.com/docs/category/dim" rel="nofollow noopener" translate="no" target="_blank">https://positive-intentions.com/docs/category/dim</a>This <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a> project is still in its early stages and very <a href="https://infosec.exchange/tags/Unstable" class="mention hashtag" rel="nofollow noopener" target="_blank">#Unstable</a>, so expect <a href="https://infosec.exchange/tags/BreakingChanges" class="mention hashtag" rel="nofollow noopener" target="_blank">#BreakingChanges</a>. I've already received valuable <a href="https://infosec.exchange/tags/Feedback" class="mention hashtag" rel="nofollow noopener" target="_blank">#Feedback</a> on some functions regarding <a href="https://infosec.exchange/tags/Security" class="mention hashtag" rel="nofollow noopener" target="_blank">#Security</a>, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!<a href="https://infosec.exchange/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#FrontendDev</a> <a href="https://infosec.exchange/tags/JSFramework" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSFramework</a> <a href="https://infosec.exchange/tags/Innovation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Innovation</a> <a href="https://infosec.exchange/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#Coding</a> <a href="https://infosec.exchange/tags/Programmer" class="mention hashtag" rel="nofollow noopener" target="_blank">#Programmer</a> <a href="https://infosec.exchange/tags/Tech" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tech</a>

Evan🤞 Hopeful that I can get on the <a href="https://raphus.social/tags/jsx" class="mention hashtag" rel="nofollow noopener" target="_blank">#jsx</a> flights tomorrow as a <a href="https://raphus.social/tags/standby" class="mention hashtag" rel="nofollow noopener" target="_blank">#standby</a> <a href="https://raphus.social/tags/nonrevlife" class="mention hashtag" rel="nofollow noopener" target="_blank">#nonrevlife</a>

GENKIここ数日 <a href="https://social.vivaldi.net/tags/NextJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#NextJS</a> 触って、いろいろなるほどとは思ってるけどやっぱり Image コンポーネントとかを使うの、確かに便利ではあるけどなんか車輪の再発明感があるというか余計に重いコンポーネント集の上に乗っけられてる感みたいなのはあるんだよな… <a href="https://social.vivaldi.net/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a> も <a href="https://social.vivaldi.net/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> そのまま貼れないの不満だったけど最近はフォーマッターとかがいい感じに <a href="https://social.vivaldi.net/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> を <a href="https://social.vivaldi.net/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a> に変えてくれるっぽくて、まあそれはそれで便利で助かってはいるのだけど、なんかもやもやはする…

GENKIこの <a href="https://social.vivaldi.net/tags/Figma" class="mention hashtag" rel="nofollow noopener" target="_blank">#Figma</a> プラグイン、便利そうだなと思いつつ、よく考えると <a href="https://social.vivaldi.net/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a> で <a href="https://social.vivaldi.net/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> 使うのって <a href="https://social.vivaldi.net/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a> に合わせて属性値をキャメルケースにしなくちゃいけないし、デザインツールから書き出した <a href="https://social.vivaldi.net/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> のコードをそのまま使えないせいでこういうプラグインとかコンバーターみたいなものが必要なだけで、<a href="https://social.vivaldi.net/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> は <a href="https://social.vivaldi.net/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>、<a href="https://social.vivaldi.net/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> は <a href="https://social.vivaldi.net/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> として書けない <a href="https://social.vivaldi.net/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a> にそもそも問題がある気がしてしまうんだよな…<a href="https://social.vivaldi.net/tags/PHP" class="mention hashtag" rel="nofollow noopener" target="_blank">#PHP</a> とか <a href="https://social.vivaldi.net/tags/RiotJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RiotJS</a> なら、テンプレートに <a href="https://social.vivaldi.net/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> も <a href="https://social.vivaldi.net/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> もそのまま書けるからデザインツールがはきだす <a href="https://social.vivaldi.net/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#SVG</a> をそのまま持ってこられるし、そこにロジックを仕込みたいところがあればそのまますぐ編集できるのになーという気持ちが拭えないでいる :tony_normal: <a href="https://www.figma.com/community/plugin/1348045528828166727/svg-to-code-react-component" rel="nofollow noopener" translate="no" target="_blank">https://www.figma.com/community/plugin/1348045528828166727/svg-to-code-react-component</a>

𝕂𝚞𝚋𝚒𝚔ℙ𝚒𝚡𝚎𝚕I don't know at the moment whether I should technically replace <a href="https://chaos.social/tags/Markdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#Markdown</a> with <a href="https://chaos.social/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a> or <a href="https://chaos.social/tags/HTM" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTM</a> for future <a href="https://chaos.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a>'eloped <a href="https://chaos.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> pages. I believe that the <a href="https://chaos.social/tags/md" class="mention hashtag" rel="nofollow noopener" target="_blank">#md</a> content of the page should be generated on the <a href="https://chaos.social/tags/server" class="mention hashtag" rel="nofollow noopener" target="_blank">#server</a> as much as possible. How do you think about it?🌐 JSX vs HTM <a href="https://mtsknn.fi/blog/jsx-vs-htm-hyperscript-tagged-markup/" rel="nofollow noopener" translate="no" target="_blank">https://mtsknn.fi/blog/jsx-vs-htm-hyperscript-tagged-markup/</a>

Evert PotSo many mixed feelings about <a href="https://indieweb.social/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a> and SPAs, but <a href="https://indieweb.social/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a> is amazing.I'm currently working on a web application that's a classic, multi-page, server-rendered app using a standard Javascript microframework.There's no reason to ever go back to handlebars or ejs. Just use a single-pass JSX template and call 'renderToString'. Everything is syntax instead of strings, you get typing and XSS protection is a pretty hard opt-out.

Doug Parker 🕸️Playing a bit with <a href="https://techhub.social/tags/Preact" class="mention hashtag" rel="nofollow noopener" target="_blank">#Preact</a> / <a href="https://techhub.social/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a> today and am feeling the pain of not having host elements. I've realized that because a "component" is really just a <a href="https://techhub.social/tags/VDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#VDOM</a> template, there is no implicit contract around what it actually rendered.As an arbitrary example, what if I want to set a style on a `<Foo />` component? What selector should I use for that style? I have no idea what `<Foo />` will actually generate, or even how many top-level elements it will output. The `Foo` component _must_ expose some kind of `className` or other API to provide this behavior, it's not implicit at all.Maybe this is good because it provides stronger encapsulation. But it can also lead to bugs. If I render `<Header />` a `header` CSS selector is _probably_ right. But what if `<Header />` actually renders:<div> <header>...</header> </div>Then a `header` selector isn't actually the top-level element and my style could easily be wrong.Just some idle thoughts about the lack of host elements.

Komish<a href="https://mastodon.social/@developit" class="u-url mention" rel="nofollow noopener" target="_blank">@developit</a> so I’ve got a mix of <a href="https://hachyderm.io/tags/jsx" class="mention hashtag" rel="nofollow noopener" target="_blank">#jsx</a> and <a href="https://hachyderm.io/tags/htm" class="mention hashtag" rel="nofollow noopener" target="_blank">#htm</a> going in this project so I can get a feel for the differences. For whatever reason, I can’t get the document formatting in vscode to get this even remotely close to look like it’s properly indented. Also missing Emmett completions (not sure if I would have that with jsx yet) and tag autoclosing. Can’t tell if I’m missing something or my lit-html extension is misconfigured.Otherwise it’s going great! <a href="https://hachyderm.io/tags/preact" class="mention hashtag" rel="nofollow noopener" target="_blank">#preact</a> <a href="https://hachyderm.io/tags/preactjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#preactjs</a> <a href="https://hachyderm.io/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://hachyderm.io/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a>

Doug Parker 🕸️<a href="https://mastodon.social/@developit" class="u-url mention" rel="nofollow noopener" target="_blank">@developit</a> Could the error handling be done in some kind of dev mode? I know <a href="https://techhub.social/tags/Angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#Angular</a> and <a href="https://techhub.social/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#Lit</a> both have the concept of "dev mode" for additional validation.Personally I like the strict <a href="https://techhub.social/tags/XML" class="mention hashtag" rel="nofollow noopener" target="_blank">#XML</a> approach, I just didn't realize <a href="https://techhub.social/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a> was that strict (it's a new experience for me), and figuring that out took a solid 45 minutes of debugging which an error message would have cut down to 1.

Doug Parker 🕸️Apparently <a href="https://techhub.social/tags/Preact" class="mention hashtag" rel="nofollow noopener" target="_blank">#Preact</a> (or <a href="https://techhub.social/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a> / <a href="https://techhub.social/tags/VDom" class="mention hashtag" rel="nofollow noopener" target="_blank">#VDom</a>) cannot directly render comments: <a href="https://github.com/preactjs/preact/issues/1469#issuecomment-477510098" rel="nofollow noopener" target="_blank">https://github.com/preactjs/preact/issues/1469#issuecomment-477510098</a>I get why that's not super useful in a client-side context, but particularly for server-side rendering use cases I would expect to be able to render comments. I would expect to be able to render any arbitrary DOM structure, but I guess that's not possible out of the box?Not sure if there any workarounds to render comments in Preact. I'm not immediately able to find anything, might be a challenge to work around.

Doug Parker 🕸️I just started playing around with <a href="https://techhub.social/tags/Preact" class="mention hashtag" rel="nofollow noopener" target="_blank">#Preact</a> <a href="https://techhub.social/tags/SSR" class="mention hashtag" rel="nofollow noopener" target="_blank">#SSR</a> with <a href="https://techhub.social/tags/htm" class="mention hashtag" rel="nofollow noopener" target="_blank">#htm</a> and the first thing I did was render the classic:``` render(html` <!DOCTYPE html> <html> <head> <title>Preact</title> <meta charset="utf8"> </head> <body> <h2>Hello, World!</h2> </body> </html> `) ```And this intuitively output:``` html <head> <title>Preact</title> <meta charset="utf8" > <body> <h2>Hello, World!</h2> </body> </head> ```Lolwat? * `<!DOCTYPE html>` is gone. * `<html>` turned into `html` and lost its close tag. * `<body>` got moved inside `<head>`.<a href="https://techhub.social/tags/WTF" class="mention hashtag" rel="nofollow noopener" target="_blank">#WTF</a>Apparently you can't output a doctype at all (<a href="https://github.com/preactjs/preact-render-to-string/issues/201" rel="nofollow noopener" target="_blank">https://github.com/preactjs/preact-render-to-string/issues/201</a>) and the `<meta>` tag is not self-closing in <a href="https://techhub.social/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a>.I'm willing to accept those constraints, but this is an utter failure of DX IMHO. If my template is wrong, TELL ME! Don't just generate what's effectively garbage for seemingly no reason. There's no obviously logical path from "bad output" to "the mistake in my code". Error messages, please!

Xe :verified:The GraphicalEmoji hack<a href="https://xeiaso.net/blog/GraphicalEmoji" rel="nofollow noopener" target="_blank">https://xeiaso.net/blog/GraphicalEmoji</a><a href="https://pony.social/tags/cursed" class="mention hashtag" rel="nofollow noopener" target="_blank">#cursed</a> <a href="https://pony.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://pony.social/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a> <a href="https://pony.social/tags/fontRendering" class="mention hashtag" rel="nofollow noopener" target="_blank">#fontRendering</a> <a href="https://pony.social/tags/dearGodHelpMe" class="mention hashtag" rel="nofollow noopener" target="_blank">#dearGodHelpMe</a>

Rob PegoraroAnd why am I in Dallas on this spring-like morning? To try out the <a href="https://journa.host/tags/Starlink" class="mention hashtag" rel="nofollow noopener" target="_blank">#Starlink</a> inflight WiFi on a <a href="https://journa.host/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#JSX</a> regional jet--that carrier is hosting a media day at its DAL facility to show off the service. (JSX covered flights and lodging for me and other out-of-town journalists.)

Recent searches

Search options

Administered by:

Server stats:

#jsx