Large Type with Svelte
What is Large Type
Large Type is a web utility that you can use to display text in your screen with a LARGE FONT so that people can see it easily. I forked the project (originally made by Dan Bader - thanks Dan!) and made few changes to turn it into a Progressive Web App so that you can easily run it directly from your phone's home screen - even when offline!
Check out how it looks like: https://large-type-svelte.vercel.app
Features
There are a few links that you can click to easily pre-fill your name and other personal data on your computer or phone's screen. (we'll see how to do that in a moment)
The links included in this project are:
Why QR codes for socials?
Sometimes you meet someone at an event or conference and want to connect with them, and having one person scan your QR code is fast and efficient, and if you have the QR code already set up in your phone with Large Type app, you don't need to fuss around each app to find where the button to show the QR code is, simply show the person the different QR codes from the Large Type app in your phone, and when they point their camera to it, their phone will open the right app to connect with you.
Ok, but why a Barcode generator? ??
Ok, I admit this one comes from a very niche use-case that I had a few times and decided to have an easy way to solve it. If you purchase things online that get delivered through DHL and they try to deliver it when you're not home, they might put it into a Packstation, and send you a paper with the code to retrieve it. The problem is: they'll put your package in the Packstation, and send you the code later via regular mail, which can take some days to arrive at your address. However, you can go to DHL's chatbot and talk with it until it gives you the pickup code right away. Sure, you can type the code manually into the Packstation, but that can be difficult and annoying when the low-quality touch screen on those machines gets damaged (which is the case of the Packstation closest to my address), so that's the main reason why I included a Barcode generator on the app, to be able to show the barcode from my phone and have the machine scan it instead of struggling to type all the digits on a damaged, low quality touch screen.
How to add it to your phone's home screen
To add the app to your phone's home screen, follow these steps:
That's it! Now you have the Large Type utility easily available in your phone, and the best part is: it works even when your phone is offline! (you must open the app at least once while online so that it can cache the required files to work offline)
How does it work?
All text formatting and rendering happen locally on your browser/phone through CSS and JavaScript. Your text is not transmitted to any servers, ever.
Additionally, this project is open-source, which means you can audit the source code yourself to see that your data isn't sent or stored anywhere else.
Make it your own
To have the links show your own name and other data instead of having to type it into the app every time, you'll need to fork the project and add your own data instead of the default values. On this section we'll go over how to fork the project from github, make changes to have your own data, and deploy it to a free Vercel instance.
Fork the repository on GitHub and clone it locally
Head over to the project's GitHub page and fork it: https://github.com/lily-gh/large-type-svelte
Don't forget to give it a star! ??
Click on "Fork" to create a fork of the project
Give it a new name, and click "Create fork" to fork the project
NOTE: after forking the repository, I suggest that you make it private since you'll be adding your personal data into it.
After the forking is complete, clone your new repository locally to make your changes:
Add your own data
Open the project folder in your favorite code editor (I'm using VS Code) and then open the App.svelte file and make the following changes:
On lines 91 and 94, change the phone and name parameters passed to the updateText function to use your data instead:
<span class="button-row">
<a
href=""
on:click|preventDefault={() => updateText("+49 152 4444 32")}
>Phone</a
>
<a href="" on:click|preventDefault={() => updateText("Lily Oliveira")}
>Name</a
>
<a
href=""
on:click|preventDefault={() => updateText("@gmail.com", true)}
>@gmail.com</a
>
</span>
Feel free to remove the links you don't need or add new ones that you want to have handy (e.g. an address).
You might also want to change the WELCOME_MSG on line 5 to your most needed text, since this is the one that'll be shown as you open the app. I'll change it to my name:
const WELCOME_MSG = "Lily Oliveira";
Feel free to remove the barcode link if it doesn't make sense for your use case.
NOTE: I suggest that you don't add your full address and full phone for safety reasons, since the app will be publicly accessible over the internet. For example, if you add the phone, leave out the last 4 digits so that you still need to type them out yourself, or put an incomplete address so that people can't find your exact location if they find your public Large Type URL. (or remove it altogether if it makes you feel safer)
领英推荐
Trying it out locally
To run the app locally, run the following commands in your terminal from the project's root folder:
npm install
npm run dev
This should make the app available in your local machine on the url https://localhost:5173/
NOTE: Since caching is configured in this project, you might experience not seeing changes you make after running the app to show up in your browser. To fix that, simply disable cache in the Network tab of your browser:
If you are happy with your changes, commit them and push them to your repository:
git add .
git commit -m "Adding my own data"
git push origin main
Creating your own QR codes that point to your social profiles
This step is a bit more complex, so I decided to write a separate article for this, I hope to publish it in a couple of weeks, so stay tuned!
If you are already familiar with image editing tools like Photoshop and already know how to generate the QR codes for your social profiles, feel free to use the included Badge_Template.psd Photoshop file to create your own QR codes. All you need to do next is replace the existing QR code images under the public folder in the repository you forked. Make sure you also edit the file name referenced in the App.svelte file if you changed it to another name.
Deploying to Vercel
If you don't already have a Vercel account, go to https://vercel.com/ and then follow their sign-up process of signing up with GitHub:
Complete the phone verification step to finish account creation on Vercel.
Connect Vercel to your GitHub account
Click the "Install" button to install Vercel on your GitHub account:
Confirm installation of Vercel in your GitHub account:
Import your repository into Vercel
Import the large-type-svelte repository you recently cloned and made changes to:
Configure the deployment
Give your project a name, and click the "Deploy" button to deploy it.
Done! ??
That's it! Now you have your own instance of Large Type Svelte running with your own changes!
You can click on "Add Domain" to view the existing domains for your app or add more. This will show you what the current URL for your Large Type instance is, which you can use to add it to your phone's home screen as explained in the "How to add it to your phone's home screen" section above!
In my case the URL is large-type-svelte-lily.vercel.app, so that's what I would use to open the app in my phone and add it to my phone's home screen.
If you make more changes to the code to add/remove links, it should be automatically redeployed after you push the changes to the main branch.
Thank you
Thanks for reading, and stay tuned for the next article with instructions on generating your own QR codes!
If you think this was helpful, consider supporting me on Ko-fi ??
Product @ Lendis
5 个月Love svelte!! Cool you made an app with it!