In my SvelteKit app, I'm using this code to retrieve the current window size and switch the displayed component when the width is small:
<script>
let size;
</script>
<svelte:window bind:innerwidth{size}/>
<div>
{#if size > 768}
<TableDisplay/>
{:else}
<CardsDisplay/>
{/if}
</div>
Is there a different approach that could be used for this purpose?
Utilizing media queries is a viable solution.
You can create classes that display or hide an element based on the viewport width. This method either requires a wrapper element for applying styles, or you can define the rules globally, pass the class to components, and apply them there.
For example:
<div class="show-large">
<TableDisplay/>
</div>
<div class="show-small">
<CardsDisplay/>
</div>
<style>
/* `contents` prevents wrapper from affecting layout */
.show-small { display: none; }
.show-large { display: contents; }
@media (max-width: 768px) {
.show-small { display: contents; }
.show-large { display: none; }
}
</style>
Check out this REPL Example
It's important to note that this approach differs from using {#if}:
When using media queries, all elements and components are created and inserted into the document, even if they are not always displayed, whereas {#if} does not create anything if the condition is not met.
Currently in the process of developing a web extension using TypeScript, I have encountered an issue with sourcemaps not loading properly. The use of parcel to bundle my extension has made the bundling process simple and straightforward. However, while the ...
Utilizing TypeScript with JSDoc poses a challenge as I aim to restrict a variable to one of the known values stored in an array. I am aware that it can be achieved like so: /** @type {'one'|'two'|'three'} */ let v = 'fo ...
Question: Processing Array of Observables with Metadata in Angular How can I process an array of Observables, such as using forkJoin, while passing additional metadata for each Observable to be used in the pipe and map functions? const source = {animal: & ...
I have a situation where I possess an access token, and if it is present, then I will return it as an observable of type string: if (this.accessToken){ return of(this.accessToken); } However, I recently realized that the of method has been deprecated w ...
My current code successfully zips and saves the response of a JSON array by splitting them into individual files using a single method. zip: JSZip = new JSZip(); folder: JSZip = new JSZip(); this.apicall.api1() .subscribe( response => { for (let r ...
In a certain scenario, I need to display an error message when a user clicks on the Next button without agreeing to the terms. To achieve this, I am looking to write a unit test case using Jest and React Testing Library. How can I go about doing this? im ...
I have encountered examples suggesting the possibility of achieving this, but my attempts have been unsuccessful. Working with Typescript 2.7.2 in our project where numerous extensions of dijit._Widget and dijit._TemplatedMixin are written in JavaScript, w ...
As I was going through a tutorial about nests, there was this step where the instructor made a folder named "dtos" and inside it, they created two dto files (create-user.dto and edit-user.dto). Following that, they also added an index file in the same fold ...
While developing an app using ionic3, I encountered an issue with setting up a proxy. When running in a browser, Ionic was able to recognize the path of my proxyUrl as shown below. ionic.config.json { "name": "myApp", "app_id": "", "v2": true, "t ...
I am currently working on a Gatsby project and decided to implement Typescript into it. However, I encountered an error in my TSX files which reads: Cannot use JSX unless the '--jsx' flag is provided. What have I tried? I consulted the docume ...
I've been attempting to incorporate Zurb Foundation's scripts into my next js application, but I keep encountering an error message when trying to include the Foundation core. The error I'm seeing is: /Users/alasdair_macrae/Sites/merlin/spa_ ...
I have come across solutions on how to determine if a specific element is within the viewport, but I am interested in knowing which elements are currently visible in the viewport among all elements. One approach would be to iterate through all DOM elements ...
When attempting to call a service using REST API with a GET request, I encountered the following error: Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | ...
I've encountered a challenge trying to accomplish the following tasks simultaneously: Developing in Node.js Coding in TypeScript Implementing async await Facilitating debugging Background: In my TypeScript-based Node.js project, I am incorporating ...
I am trying to figure out how to assign a proper Key Value in this component: {var.map((building, index) => { const handles = building.buildingVertices.map((point) => { return ( <DrawingHandle key={`${i ...
My internship project involves developing a mobile application based on the website www.claroline.net using Nativescript and Angular 2. I have successfully implemented the login function, allowing users to sign in to the app. Next, I need to integrate not ...
I have a simple function in my app.component.ts that is meant to modify a parameter, and I am trying to test this function using a spy. However, for some reason, my changeText function always returns undefined. Can you help me identify what I might be doin ...
When my active function is running, I have a specific updateTrigger that ensures certain actions are taken when the activeTextEditor in vscode changes: const updateTrigger = () => { if (vscode.window.activeTextEditor) { updateDecorations(con ...
As an illustration, consider export class FlatList<ItemT> extends React.Component<FlatListProps<ItemT>> which incorporates the generic type ItemT. How can I utilize it in a .tsx code? When not parametrized, it appears like this: <Flat ...
I am trying to figure out how to bind an interface with a type parameter, but I am unsure of the correct way to do it. Here is the Interface: ... export interface ITestHelper<Entity extends ObjectLiteral> { doSomething(builder: SelectQueryBuilder& ...