Masthash

#Vue

kaiserkiwi :kiwibird:
2 days ago

Ich bin auf Arbeit ja nicht nur Full Stack #Webdev, sondern auch Teamlead. Eine meiner Aufgaben (die ich mir selbst gegeben habe) ist, meinem Team teils die Fundamentals von Dingen zu erklären.

Einfach weil heutzutage (Durch Bootcamps, Tutorials und sonst was) viele in den Beruf gehen und direkt mit #Sass, #Symfony / #Laravel, #Vue / #React etc. anfangen. Ohne #CSS, #PHP, #HTML und #JavaScript im Kern richtig kennenzulernen.

Und jedes Mal, wenn ich eine solche Session hinter mir habe, fühle ich mich einfach gut. Meist egal wie es mir vorher ging, danach ist einfach eine positive Grundstimmung in mir.

Wenn ich irgendwann mal keine Lust mehr habe, selbst beruflich als Webdev zu arbeiten, werde ich definitiv versuchen irgendwo als Lehrkraft reinzukommen. Ich kann mir echt vorstellen, dass das etwas ist, mit dem ich glücklich und alt werden könnte.

#Coding

blackspike design
4 days ago

We've been wanting to try out Svelte so we built a single page app https://ogvideo.app

We blogged about our impressions of Svelte from the perspective of Vue / Nuxt devs.

tldr; we enjoyed it, but we'll be sticking with Vue.

https://www.blackspike.com/blog/learning-svelte-by-building-a-single-page-application

#javascript #webdev #svelte #vue #nuxt

reverentgeek
1 week ago

I'm coding live today at 2:00 PM ET! Come hang out and learn with me as we build a trivia game in Node.js using Fastify, Vue, Tailwind CSS, and socket-io! #streaming #javascript #coding #css #html #tailwindcss #vue #node https://www.linkedin.com/feed/update/urn:li:ugcPost:7070040461444308992

All Hands On Tech Live developer stream Thursdays at 11:00 AM PT/2:00 PM ET with David Neal, Pluralsight Principal Developer Advocate
Ryan Trimble
1 week ago

My recap of the 2023 Vue Conf in New Orleans:

https://ryantrimble.com/blog/vue-conf-recap/

#vue #javascript

Jobs for Developers
2 weeks ago

PayU is hiring iyzico - Software Engineer - Front-end

🔧 #javascript #react #reactnative #vue #api #graphql
🌎 Istanbul, Turkey
⏰ Full-time
💰 $95k - $210k (Estimate)
🏢 PayU

Job details https://jobsfordevelopers.com/jobs/iyzico-software-engineer-front-end-at-payu-com-feb-21-2023-d4fc54?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

التنينوكس
2 weeks ago

So one can build an API in #rust, its front in #vue and have all the application in a single executable. This is amazing. The build process streamlined and only a sigle build command is needed.

Doug Parker
2 weeks ago

@davatron5000 @collinsworth This is an interesting read, though I wonder if this has less to do with compile steps and more to do with authoring format?

You talk about vendor lock-in for the compiler, but I feel the lock-in has more to do with the way you are authoring code. That anything inside a .vue or .svelte file is inherently coupled to those frameworks and is "more locked-in" than something like #Lit. That seems independent of whether or not a compiler is being run.

For example, how would you feel if #Vue or #Svelte shipped your raw templates and interpreted them at runtime? Would that be less locked-in, even though you're writing the same code? What about if Lit *required* a compiler, but otherwise was authored the same way?

I personally always disliked frameworks that fork the #JavaScript language to achieve their ends (ex. framework-specific file extensions or #JSX). I think you're describing a very similar emotional reaction I feel to those FWs, I wonder if it's the same?

@ekhi #vue has some really nice component frameworks
I already used #vuetify, #quasar and #naiveui at work and they have all their benefits and trade-offs

Anyone got any tips to build #react or #vue UIs faster?

My slow design is holding me back. I wish there was some way I could build this UI quicker and fix the design later using a nice component library.

Pavel Zinoviev 🔮
2 weeks ago

You know... Maybe I don't want to be a #webdev anymore. It's been almost 3 hours of trying to run a #vue project and I'm almost emotionally dead. #emotionaldamage

noim
2 weeks ago

createReusableTemplate is an awesome utility function! I wish I knew this earlier. This makes it so much easier to write responsive layouts without repeating code fragments. Otherwise you would need to create a separate component for this. In general, #VueUse is neat 💚
#Vue

https://vueuse.org/core/createReusableTemplate/#createreusabletemplate

Clément CG
3 weeks ago

I've just lost 30 min of my time trying to understand why my Vue component was not imported properly.... Because of a stupid typo

  component**s**: {
        *SelectButton*
    }

I forgot to put "components" to its plural form.
What a load of BS 💩 I can't believe it: How comes this kind of crap is not corrected automatically in 2023 ? If anyone could recommend a good extension for VSCode for Vue projects, for correcting this kind of stupid typo, it would be helpful.
#vue #vscode #webdev #typo

james
3 weeks ago

Doing some formalising of some mentorship for web developers, and I would like to ask you:

What are the fundamental concepts and foundational skills (not just technical) that a mid level web developer must understand to be solid in their job?

If it helps, the devs in question work mostly with JavaScript, CSS, HTML and Vue.js

#webdevelopment #vue #mentoring #webdev

3 weeks ago

What I find really odd about directives as used in #vue is that a level of indentation is missing for conditions (v-if, v-else-if, v-else). This way it is really hard to grasp which parts are mutually exclusive.

Jan :rust: :ferris:
3 weeks ago

When you develop a library for the JS ecosystem - be it #React, #Svelte, #Vue whatever, do the #JavaScript community a favor and implement it in #TypeScript.

And no, I don't want to have a loosly dangling d.ts file somewhere. Go TypeScript natively!

I can't use your beautiful Vue js component in my Vue TS app, because it doesn't provide typings for it's slots! 😠

#WebDev #WebDevelopment

Jobs for Developers
3 weeks ago

Qonto is hiring Staff Frontend Engineer (Remote friendly)

🔧 #javascript #react #vue
🌎 Remote; Barcelona, Spain
⏰ Full-time
💰 $90k - $210k (Estimate)
🏢 Qonto

Job details https://jobsfordevelopers.com/jobs/staff-frontend-engineer-remote-friendly-at-qonto-com-feb-8-2023-ce6ff6?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

Collin Allen
3 weeks ago

I love working with #Vue (and #SwiftUI) because it makes building complex interactions easy. What would have otherwise involved a bunch of procedural code can usually be reduced to a state update and a sprinkle of declarative UI. Both tools really remind you that a well-considered state data structure is key, though.

reverentgeek
3 weeks ago

I'm coding live today at 2:00 PM ET! Come hang out and learn with me as we build a trivia game in Node.js using Vue, Tailwind CSS, and socket.io! #AHOTLive #streaming #nodejs #websockets #javascript #coding #css #html #tailwindcss #vuejs #vue #node

All Hands On Tech Live developer stream Thursdays at 11:00 AM PT/2:00 PM ET with David Neal, Pluralsight Principal Developer Advocate

By the way, if you want to support me, this project is exactly the right thing to sponsor me: https://github.com/sponsors/Shinigami92
I'm working on the project in my free time and I've already invested about 10 net hours and plan to get far so that one day it can finally be used in #vue and other frameworks

Jobs for Developers
3 weeks ago

Solana is hiring Senior Full Stack Web Developer - Solana Mobile

🔧 #javascript #typescript #react #vue #blockchain #cryptocurrency #aws #gcp #seniorengineer
🌎 San Francisco, NYC, Chicago or Remote in US
⏰ Full-time
💰 $90k - $210k (Estimate)
🏢 Solana

Job details https://jobsfordevelopers.com/jobs/senior-full-stack-web-developer-solana-mobile-at-solana-may-1-2023-731173?utm_source=mastodon.world&ref=mastodon.world
#jobalert #jobsearch #hiring

blackspike design
3 weeks ago

New blog: Why we chose Astro over Nuxt

We've shipped dozens of Nuxt websites, so why build our own website with Astro? (TLDR: performance!)

https://www.blackspike.com/blog/why-we-chose-astro-over-nuxt/

#withastro #nuxt #vue #webdev #threejs

a video of three.js balls floating by
Inautilo
3 weeks ago

#Development #Approaches
Building a modern design system in layers · Proper layering facilitates the long-term evolution of a design system https://ilo.im/12yb4f

_____
#Layers #DesignSystem #WebDesign #WebDevelopment #WebDev #Frontend #Framework #Library #React #Svelte #Solid #Vue

@sirber @robrich I totally agree.

:typescript: :javascript:

This happens with me, I can quickly create something in JavaScript.

Then I start adding typing & a lot of my time is spent in just getting the right typings.

A very good friend of mine who was a TS advocate now says we are better of writing JavaScript rather than Typescript.

#javascript
#typescript
#vue

Michael Synan
1 month ago

#codepen Vue button with animated Tailwind background gradient for you to steal for your next project :)
https://codepen.io/michaelsynan/pen/YzJvyxO

#vue #javascript

Jan :rust: :ferris:
1 month ago

Vue 3.3 has been released! 🎉

They have shipped a ton of new features and improvements, wow!

Some highlights:
- Imported and Complex Types Support in Macros
- Generic Components (🤯)

See the accompanying blog post on the new release:
https://blog.vuejs.org/posts/vue-3-3

#Vue #VueJS #WebDev #webDevelopment

If you have not notices yet, #vue v3.3 was released today 🎉

https://blog.vuejs.org/posts/vue-3-3

:javascript:
Vanilla Reactive Store Implementation:

This is a popular implementation of reactive store based on JS Proxy objects.

However proxies are created even on individual array elements being accessed.
I understand that is required, but would this not generate a huge amount of proxy objects?

It seems like Vue internally implements a more comprehensive pattern based on this approach.

Is this practical for huge component state?

#javascript
#proxy
#webdev
#reactivity
#vue

Vanilla JavaScript Reactive store based on JavaScript proxy objects.

The other project I have in mind would be a #vue #component #framework that is based on #tailwind / #Unocss, supports theming out of the box and uses e.g. #vue's #generic from https://github.com/vuejs/rfcs/discussions/436 to e.g. better type `DataTables`
The name of that framework could be `Vueperlativ` which is the combination of Vue and Superlativ 😅

Jan :rust: :ferris:
1 month ago

It's alive!🎉

I've built a #transpiler in #Rust, compiled it to #WASM and integrated it into a #Vue app! :awesome:

It's called selecuery.✨

It can transpile X++ select statements into query expressions. If you think "X++" is a typo and you don't have any idea of what I'm talking about, don't worry.😄

Have a look at the video below.

This project is dear to my heart! ❤️ I've started it 2019 for learning #RustLang.

I think, I've been transpiled during this project as well.🤪

#Compiler #Magic

A video showing a web app with two code editors side-by-side.
On the left, source code is entered, which looks like an SQL dialect. As the code is entered on the left, the code editor on the right updates in real-time. The right editor shows the SQL-like statement in a very different form, namely as a sequence of method calls on a query object.

So it has just transpiled a declarative SQL-like statement into a procedural query expression.

You can think of it a bit like C#'s LINQ: LINQ also has a declarative form and a procedural form.
Hugo Attal
1 month ago

@TauriApps @vite So, how do you create a magnifier with a freakin' JS framework (#Vue)? Here's how it works:

- When you press the shortcut, it takes a screenshot and store it in a temp folder

- It then displays an HTML window and passes the screenshot URL to it

- The HTML window has no "decorations" (top bar) and only contains an empty div

- This div uses the screenshot as a background and updates the background position based on the cursor location

- The window location is also updated according to the cursor location using a requestAnimationFrame (so that it does not get triggered too often)

- The wheel event impacts the size of the window, as well as a transform:scale on the background.

Annnnd that's basically it! Not the cleanest way to do it (I had to fix some weird flickering due to inconsistent window movement and resize speed), but a fun one 🥳!

Also, feel free to use it for your presentations 😉!

Hugo Attal
1 month ago

I built a magnifier with @TauriApps, @vite, #vue and #typescript called "Milky Warp" 🌌! I'm doing a few presentations for http://roller-coaster.app, and I noticed it's not easy to read text on a screen or a small video. I couldn't find a good magnifier tool, so I built one!

Of course, I didn't want to go through the hassle of setting up a C++ project with some weird shaders, so I decided to go with the awesome #Tauri. Milky Warp is open source, you can give it a look, or follow this thread for a few technical explanations.

https://github.com/hugoattal/milky-warp

felix
1 month ago

finally dipping my toe into #typescript 🌧️ with a udemy course. I’ve found maximillian’s courses easy to follow and retain – I did his #vue and #nuxt courses years ago. Also I find his german accent charming, currently learning about Woid types.

https://www.udemy.com/course/understanding-typescript/ #webdev

Jan :rust: :ferris:
1 month ago

Urgh, #Rust + #WASM + #Vue is such a dream stack! ✨ 💖

Stay tuned for some magic in the next few days... 🤞

#RustLang #VueJS #WebAssembly #Transpiler(:awesome:)

Hi 👋
I'm Christopher, living in Hamburg.

I am looking for a new #job opportunity in IT and would like to get #hired.

I want to design a #graphql written in a compile-time #nullsafe language, namely #typescript, #kotlin or #Rust.

Also I still want to develop the #frontend in #vue 3+.

You might know me from the #vite core team and might have seen me at #VueAmsterdam2023, but I'm also one of the maintainers of @faker_js!

Please feel free to explore my #github profile at https://github.com/Shinigami92

Jan :rust: :ferris:
1 month ago

Whoop! 🎉 I've just called a #Rust #WASM module from my #Vite #Vue app! :awesome:

It uses rsw with it's Vite plugin:

https://github.com/rwasm/vite-plugin-rsw

Good examples can be found here:
https://github.com/rwasm/learn-wasm

It requires a bit of config, but not too bad, given that it's bleeding edge.

What tripped me up in the very end:
You need to call `init()` first from your wasm module, otherwise error "wasm is undefined", when calling your function.

https://users.rust-lang.org/t/wasm-pack-without-node-js-npm/55949

#WebAssembly #WebDev #VueJS #RustLang

katerberg
1 month ago

It's not a new article, it outlines a heuristic about code folders that "feels right" to me, particularly after being stuck in #rails codebases for a long time: https://koenvangilst.nl/blog/code-colocation-is-king

I love how #javascript generally goes with the fractal structure of files, but I'm trying to see how #vue does it since it seems like it might not be as opinionated about this.

ricardobalk
1 month ago

Let's just call this the #TailwindCSS #OCD Style Guide. I like it this way.

Does anyone know how I could turn this into an ESLint preset?

#css #frontend #development #developer #vue

Matt Wing
1 month ago

Official #Vue certification course is coming soon, and they have an early bird discount up for the next ~20 hours if you’re interested!

https://certification.vuejs.org/

Lea Verou
1 month ago

So it turns out that if you use private class fields, these objects are buggy when proxied.

See https://codepen.io/leaverou/pen/ExdWwax?editors=0012

That’s …very unfortunate. It means you cannot use these objects in #vue for example (Vue testcase: https://codepen.io/leaverou/pen/MWPpEQg?editors=1012 )

class Foo {
	#bar = 1;
	
	get bar() {
		// Uncaught TypeError: Cannot read private member #bar from an object whose class did not declare it
		return this.#bar;
	}
}

let foo = new Foo();
let fooProxy = new Proxy(foo, {});

console.log(foo.bar);
console.log(fooProxy.bar);
adamghill
2 months ago

I registered http://www.djangovue.com/ a long time ago when writing an ebook detailing best practices integrating #django with #vue. I never finished that book (and built https://www.django-unicorn.com instead 🤷‍♂️).

If you are interested in the domain DM me. I’m willing to transfer it to someone who might use it for something interesting.

Mx Autumn :blobcatpumpkin:
2 months ago

I spent an embarresinly large portion of today trying to get auth working in a new Nuxt3 application using the useCookie composable.

I have just fixed everything and have it working as expected in just under half an hour via using the `useSession` composable that Nuxt3 makes available but it seems nobody on the internet has documented, or at least not in a way I could find easily...

I am not mad, just disapointed.

#Nuxt #JavaScript #Vue

Wallfacer Heather
2 months ago

I've tried #Elixir #Phoenix , I've tried the whole #mean thing (I'm not sure about #angular or #react ... or should I do #vue ??)

I only do microservice backend stuff right now so I have no idea how to bite into a full stack app from scratch. I've done the todo app tutorials but Everything else is so nontrivial.

And don't even get me started on dependency management.

Collin Allen
2 months ago

Delighted with the Vite CLI and Vitest testing tools in the #Vue 3 ecosystem. They're crazy fast — so fast that I still regularly mistake something as being broken when it's just *done already*, they work well, and are thoroughly documented 👏 Top notch work, all around.

felix
2 months ago

upgraded https://www.brighton.dog #nuxt from 3.0.0 to 3.4.1 without any hassle in case people are feeling cautious!

#nuxt #vue #webdev

Vannsl
2 months ago

#vue devs, how do you pass properties, or methods from Child to Parent?

Scoped Slot Props => Function?
defineExpose()?
Something else?

(Screenshot with scoped slot props)

felix
2 months ago

Request for help: Does this map feel slow?

https://www.brighton.dog/map

(I’ve replaced the google map on www.brighton.dog with open street maps using https://protomaps.com/ by @bdon and it works great on all devices apart from one iphone where it’s slow as molasses - tia!)

#webdev #javascript #nuxt #vue

Olivier Forget
2 months ago

@grahambinns I'd say "it depends". How comfortable are you with Vue? Do you use it regularly for other projects? I default to #Vue pretty quick because I use it in major ongoing projects, and therefore I am naturally kept immersed in the tech. This means using it on a small project is a net win. That would not be the case if I didn't use Vue for anything else.

Depending on how much interactivity you add later, you could end up anywhere from lean solution to hopeless spaghetti code.

Chris Minnick
2 months ago

My latest (and greatest) book, JavaScript All-in-One For Dummies, is available now!

Every junior developer or aspiring JS developer needs this book, imho.

The book teaches modern #JavaScript, how browsers work, using #VSCode like a pro, #Git, #prettier, #eslint, #vite, #webpack, #react, #vue, #svelte, #http, #jest, #node, #express, #mongodb, #mongoose, and finishes with a chapter on authentication with #jwt.

It took me 6 months to write and is over 800 pages.

https://amzn.to/3GIMRGX

Olivier Forget
2 months ago

I'm glad I don't have to worry about what happens when that library stops being maintained, and it breaks because I upgrade #vue

Then again I don't look forward to my future self having to go back into my code for this 😂

Olivier Forget
2 months ago

I quite like using #Vue 3's script setup style. Very little boilerplate and defining props as TS types is great.

https://vuejs.org/api/sfc-script-setup.html

https://pinia.vuejs.org/ is also 👍 I couldn't stomach #Vuex with its string-based actions or whatever.

#Pinia just makes sense to me. It doesn't try to do very much at all. It just lets me define reactive models and import them into my components.

Komish
2 months ago

@mgdodge I should give it another look. I followed tutorials for older versions of both React and Vue a while back.

They both were great and super easy to follow, but when I went back to modern React, after their new docs site launched, I had a tough time following.

I forgot to go back to modern Vue, or rather probably chose going to modern React because I had gone through its tutorial more recently.

I’ll give #Vue another look. I’ll queue it up after Preact.

Dave Mackey
2 months ago

what do you use (if you do!) for #JS/#TS #SnapshotTests?

Currently working on a TS #Vue 2.7.x project. Leaning towards using #Jest, but are there better options? I see #Playwright has snapshot capabilities as well.

#question #coding #testing

felix
2 months ago

coding up a #threejs looping carousel of my logo designs for my website’s branding page. maths! 🥵

codepen: https://codepen.io/blackspike/pen/eYPYeLV

#webdev #vue

a looping 3d carousel of logos rotating slowly
Stadia Maps
2 months ago

Calling all Vue developers! Want to get started using maps with Vue, Leaflet and Stadia Maps? We've put together quick start guide for you.

https://docs.stadiamaps.com/tutorials/getting-started-with-vue-leaflet/?utm_source=mastodon&utm_medium=social&utm_campaign=vue_leaflet_quickstart

#vue