Svelte – Page 2 – closingtags </>
Categories
Javascript Svelte

Svelte stores in localStorage

Svelte stores are great for managing state in an application but when combined with modern browser features. they really shine. Let’s take a look at how I implemented localStorage in a recent project with an annotated sample file:
$stores/local.js
import { browser } from ‘$app/environment’;
import { writable } from ‘svelte/store’;
// it works with readable stores too!

// create an object w/default values
let goals = {
goal1: 2000,
goal2: 50
};

// ensure this only runs in the browser
if (browser) {
// if the object already exists in localStorage, get it
// otherwise, use our default values
goals = JSON.parse(localStorage.getItem(‘goals’)) || goals;
}

// export the store for usage elsewhere
export const goalStore = writable(goals);

if (browser) {
// update localStorage values whenever the store values change
goalStore.subscribe((value) =>
// localStorage only allows strings
// IndexedDB does allow for objects though… 🤔
localStorage.setItem(‘goals’, JSON.stringify(value))
);
}
Throughout the rest of the app, the “goalStore” (and therefore, the localStorage object) can be accessed by importing in components like so:
<script>
import { goalStore } from ‘$stores/local’;
import { browser } from ‘$app/environment’;
</script>

<!– prevent issues with SSR by only rendering dependent components in browser based environment –>
{#if browser}
<!– use ‘$’ for reactivity and ‘bind:’ to keep data upstream in sync –>
<Component bind:count={$goalStore.goal1} />
{/if}
As mentioned by Marc Rodney Tompkins in the comments, it may be necessary to wrap your code in browser checks as well. Svelte makes this easy with conditional {#if} blocks.
I hope this helps someone! If you’d like to see how I implemented this in its entirety, you can view the source code here.

Categories
Javascript Svelte

helth app

If you’ve been following along with any of my recent posts, you’ll likely have noticed that I’ve been working on something. It hasn’t been a secret but I also haven’t advertised it until now. In this post, I’d like to share with you a little bit about that project. If you’d like to see or use it for yourself, you can visit helth.closingtags.com. Yes, that’s how I intended to spell it but on the off chance you accidentally spell it correctly, that will should work too.
Why?
In the past, I’ve used apps like MyFitnessPal or Jawbone to track calories in, physical activity, and water consumption. I liked those apps but MyFitnessPal became a bloated mess and Jawbone went out of business 😢. I’m sure there are other fitness and health related apps out there that are just fine but I wanted to build something tailored to my needs. I’ve got experience as a web developer, so why shouldn’t I? It would also be a good excuse to learn a new technology like Svelte and SvelteKit.

helth app sodium and protein tracking

But, what does it do?
tracking
Helth app is intended to be simple. While it still has a long ways to go, it does already have some cool features. For instance, tapping the camera icon in the bottom right corner will open the camera on your device, and allow you to scan a barcode. Once scanned, if the item is found; helth app will automatically add calories, sodium, and protein to daily totals. Potentially, the app could track cholesterol, sugars, carbohydrates, fats, and even ingredients. It’s simply a matter of adding those components.
history
The app can then show the history tracked and will reset each day at midnight to allow you to start tracking the next day. The graphs still need work and are very limited but I’m hoping to make more progress towards implementing better charts soon.
goals + limits
If you’d like to set custom goals so you can be alerted when you’re approaching a limit or have exceeded your own expectations, the app allows you to do that as well, albeit, the functionality isn’t quite limited. Again, I hope to implement more of this functionality soon.
All your data are belong to… you? 🤔
Privacy and security are important to me. That’s why all data generated in the app is stored locally on your device. Due to security protocols implemented in most modern browsers (CORS), the barcode scanner does have to make calls to a custom API but other than that, all data entered should stay on your device. This can be a double edged sword in that if you clear your browser’s cache, all recorded data will be lost. An import/export feature is planned but is still a ways off.
The Project
Until today, I’ve been developing this project in a private Github repository but as of the publishing of this post, that repository is public. You can find it at https://github.com/Dilden/helth. I’m welcoming pull requests and issue submissions. If you’d like to add functionality, I’d love to work with you. If you want to run your own de-meme-ified version of helth app, go right on ahead. While the app is still a hobbled together mess, the more people are interested in it, the better off it will be.
It’s still missing quite a few features I’d like to see. For instance, I’d love for helth app to be installable as a progressive web app (PWA). But since SvelteKit is still in beta, the plugin I intended to use for adding PWA support has run into some compatibility issues. Once those are resolved, I believe it will be trivial to add PWA support. I’d also like to improve the overall styling of the app, add more data sources, build a text based item search and the appropriate user interfaces, and allow users to save “meals” so that they can be quickly added to the daily total without having to scan/search each item all over again.
If you would like to see a feature or notice a bug, you can report it in the project repository. If you don’t want to sign up for an account on Github, you can also fill out the contact form on this website describing the issue.

fitness can be our passion

Categories
CSS Javascript Programming Svelte

Global CSS in SvelteKit

EDIT: The proper method for including a global CSS files is to import it inside the root +layout.svelte file. Doing so will alert Vite to the asset which leads to HMR reflecting changes in the browser whenever the CSS file is updated. The method outlined below will not showcase the same behavior and will require you to restart your development server to reflect CSS changes.
I’ve been playing around with Svelte and SvelteKit recently. So far, I’m a fan but one thing that bothers me is how styles are managed. See, way back in the day when I wanted to build a website, I would create the style of that website in a single file called a Cascading Style Sheet (CSS). If I so chose, I could create multiple style sheets and include them all easily in the header of my website like so:
<link rel=’stylesheet’ href=’public/global.css’>
<link rel=’stylesheet’ href=’public/reset.css’>
But Svelte does things differently. Each Svelte component has its own styles. All of the styles created in that component will only ever apply to markup inside that component (unless specified with :global on the style rule). It’s a great feature because it keeps everything compartmentalized. If I see something that doesn’t look right, I know I can open the component and go to the <style> section at the bottom. Whereas CSS files can quickly become unweildly, making it difficult to track down the correct rule.
But there are times when I would like some rules to apply across the board. For instance, CSS resets. Or what about when I want to apply font styles? And sizes of headers? Doing this in each and every component would be a gigantic pain so instead, I would prefer to include one global style sheet for use throughout the application, and then tweak each component as needed. Sounds simple, right?
Well there’s a catch. Of course there is, I wouldn’t be writing about this if there wasn’t a catch (or would I?). When previewing my application with yarn dev / npm run dev, any styles included the aformentioned “old school way” way will work fine. But when I build that application to prepare it for my production environment via yarn build / npm run build, I notice the style is not included. What gives?
During the build process, I came across this error:
404 asset not found, wtf?
After a lot of digging through Github comment threads, I’ve found that Vite; the tooling used by SvelteKit to build and compile, doesn’t process the app.html file. All good, no big whoop dawg! I can just create a file in my routes called __layout.svelte and import my CSS there.
<script>
import ‘../../static/global.css’;
</script>
Although, that path is ugly to look at. And what if I don’t want that file? I don’t know, maybe I have hangups about extraneous files in my projects, cluttering up my valuable mind space 🙃.
Anyways, it turns out there is an option to get Vite to process the global.css from within the app.html. It looks like so:
<link rel=’stylesheet’ href=’%sveltekit.assets%/global.css’>
<link rel=”icon” href=”%sveltekit.assets%/favicon.png” />
See, Vite does actually process the app.html file but it only creates the links to those assets if it sees the %svelte% keyword. The best part about this method is that my app.html file will be processed accordingly with Vite and the assets will be included. Plus, I can keep that valuable clutter out of my project (and headspace!).
SvelteKit is still in development and has a long ways to go, but it’s great to see some different ideas being incorporated into the front-end framework race. It’s also a fun tool to build with and sometimes, we could use a little fun while building.