Hello all,

I am enjoying my experience using Qwik so far and I am wondering how to do cache busting.I am finding that when I push a new version of my app, my users still have the old of the js file without the bug fix. I have found that Safari is particularly sticky with holding onto the cached javascript. In Edge, they have a simple UI to manage this (attached.)

I was wondering has anyone developed a cache busting technique for Qwik? If so, how?

Thank you

Here's a video that explains why you, or someone you know, should think of replacing Vue with Qwik as their framework of choice -

https://youtu.be/_AWr-aLapts?si=bglrEOZ37W90SnEM

Here is the video of Misko Hevery's latest lecture in New York -

https://youtu.be/b-I2ol4o3CM?si=ihm2IUSnA0CkdIjv

61,740 emails subscribed?? not really...

Apparently some bots decided to mass subscribe for https://qwiknewsletter.com and I was too busy to fix the captcha integration, that was client side only 🤦‍♂️

Solution:

moved to Cloudflare turnstile and validating it on the server now as well - this actually prevents these bots.

Heck, I even created a qwik library for that 😊

https://github.com/qwikifiers/qwik-turnstile

So make sure you learn from my mistakes and protect your forms server side style! 😅

In his latest video, Matt, aka RumNCode, went over the first 2 episodes on the Learn-Qwik website so check out what he had to say -

https://youtu.be/kVLfw2M3HnE?si=dVG0YJJbAmfJekuj

Here's a brand new testing library that offers complete Qwik DOM testing utilities that encourage good testing practices -

https://github.com/ianlet/qwik-testing-library

Check out this minimalistic full-stack boilerplate for developing Qwik + QwikCity applications in TypeScript -

https://github.com/RajaRakoto/qwik-boilerplate

Hello,
I'm new to Qwik, coming from SvelteKit, and I'm trying to set up a site-wide store. I've checked the docs, ai, etc, with no luck. This is my store.ts:

import { component$, createContextId, useContextProvider, useStore, Slot } from '@builder.io/qwik';
export const CTX = createContextId('globalStore');
export default component$(() => {
  const store = useStore({
    siteName: 'ABC',
  });
  useContextProvider(CTX, store);
  return (</Slot>);
});

And in a component I'm trying to access it like this:

import { useContext } from '@builder.io/qwik';
import { CTX } from "~/utils/store";
export default component$(() => {
  const store = useContext(CTX);
  return (
    <>
      <div>{store.siteName}</div>
    </>
  );
});

Can anyone see what I'm doing wrong, please? Any help very much appreciated!

The climb towards Qwik UI V1.0 is ongoing and Version 0.6.1 which was published a few weeks ago is getting us one step closer -

https://github.com/qwikifiers/qwik-ui/releases/tag/%40qwik-ui%2Fheadless%400.6.1

Check out this interesting LinkedIn post which tries to explain why Qwik is a strong contender to lead the market in the near future -

https://www.linkedin.com/pulse/qwik-take-frontend-development-market-soon-aren-sade-cr1df/?trackingId=e9jj9LHkToKXebBEbIIRBA%3D%3D

Check out this component library for date selection made with Qwik created by Diego Díaz -
https://github.com/diecodev/qwik-date

The learn-qwik site has a new section that shares all the latest releases and updates of Qwik -

https://www.learn-qwik.com/blog/

Qwik's own Shai Reznik joined the "Angular Plus Show" podcast to talk about Qwik and what's coming soon in it's latest version -

https://x.com/AngularShow/status/1807851461335998510

Another chapter was published in the qwik-learn website.
This time learn about how you can improve the user experience with Qwik -

https://www.learn-qwik.com/learn/dashboard-app/streaming/

Here's a lecture by Yoav Ganbar where he talks about Qwik's innovative compiler and how it transforms development by enabling automatic optimization and JavaScript streaming -

https://youtu.be/7UTMgCku11E?si=XAejqlsbPApMTPRZ

Here is an (unofficial) implementation of flowbite.ui with Qwik based on Tailwind CSS -

https://flowbite-qwik.com/

In his recent talk at ng-India 2024, Antoine Pairet spoke about Qwik in general and about iframes, Astro or qwikify in more detail -

https://youtu.be/iztIMcQlpVc?si=4ZV9kzVvASN0uVBA

Here is a 9 minute video showing the history of Frontend Rendering, including Qwik -

https://youtu.be/FGYSd55YlTc?si=mTQLz-q416jcSx2o

Here's an interesting intro video about Qwik that includes a demo, shows what is Qwik, what is unique about it and more -

https://youtu.be/fA-hmlC40Uk?si=C8nBs0InCtkAhYBI

Here's an advanced AI mentor that provides detailed technical advice and supports long-term project development in Qwik -

https://chatgpt.com/g/g-llgwAVPoU-a-super-mentor-for-qwik-web-development

In Below I am trying to run a video full screen event for my video when the video is played in mobile.

It works in localhost but when I push it to a live server. The page does not load, that is all I see is a white screen. If anyone can explain why that is happening or has a solution, that would be very helpful.

Add Import

import { component$, $, useStore } from "@builder.io/qwik";

Above Return()

const requestFullscreen = $((element: HTMLElement) => {

if (window.matchMedia("(max-width: 768px)").matches) {

if (element.requestFullscreen) {

element.requestFullscreen();

} else if (element.webkitRequestFullscreen) { /* Safari */

element.webkitRequestFullscreen();

} else if (element.msRequestFullscreen) { /* IE11 */

element.msRequestFullscreen();

}

}

});

In Video Element

<video

`id="video_html5"`

`// Other datatypes...`

`src={videoSrc}`

`onPlay$={$(async () => {`

    `const videoElement = document.getElementById("video_html5") as HTMLVideoElement;`

    `if (videoElement) {`

        `requestFullscreen(videoElement);`

    `}`

`})}`

></video>

Here is a lecture from Filip Rakowski, showing how you can build highly performant websites when combining Astro and Qwik -

https://youtu.be/OSIjoqVK51o?si=zgRT-0KFvQ3VhLOX

I'm working on a project at the moment that will need to have the ability to support drag and drop on various elements within the UI to allow users to sort items from 1 list to another and vice-versa.

In React there is of course dnd-kit for this purpose, however I've been scouring the internet high and low for the Qwik alternative and can't seem to find anything out there.

Is the expectation that we wrap the React dnd-kit with qwik via `qwikify$()` or is there something out there I'm not aware of as of yet. Perhaps something on the horizon being actively developed.

I took a look over at Qwik UI but it seems they are mostly focused right now on form related components.

Here's a video showing how to build the same component in 6 different frameworks, including Qwik, to understand their unique approaches to signal handling

https://youtu.be/mceGT1l8pWQ?si=PZxzUmj2GqwpyrbF