SH20RAJ

{
  "name": "Movies",
  "videos": [
    {
      "description": "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
      "sources": [
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      ],
      "subtitle": "By Blender Foundation",

SH20RAJ

Building an Offline-Enabled To-Do List Web App

After getting huge success on my previous article. Here is a use case of building an Offline-Enabled Website. {% post https://dev.to/sh20raj/how-to-make-your-website-used-without-internet-3e3l %}

In today's world, where connectivity isn't always guaranteed, creating web applications that work offline can greatly enhance user experience. In this tutorial, we'll walk through the process of building a simple To-Do List web app that functions both online and offline. We'll be using basic HTML, CSS, and JavaScript, along with a service worker for caching resources.

Tip

See Source Code and Live Preview

SH20RAJ

How to make Your Website work offline 🌐

So, you wanna make your website work even when the internet decides to take a coffee break? Just like how YouTube lets you download videos for those Wi-Fi-less moments ⛱️, you can do the same for your website, making it accessible even when the internet's playing hide and seek. Let's dive into creating a site that's like a trusty sidekick, always there for your users, even offline. We'll use the example of HTML5 games 😚 because, hey, who doesn't love a good game, right? 🎮

Why You Need Offline Goodness

First things first, let's chat about why having an offline-ready website is a game-changer. Picture this: spotty internet, remote areas, or just a flaky connection – not everyone's got that smooth, uninterrupted internet flow. By giving your users the option to go offline, you're making sure they can still binge on your content, whether they're in the wilds or on a plane. It's all about leveling up that user experience! 🚀

SH20RAJ

import { PrismaClient } from "@prisma/client";

let prisma;

if (process.env.NODE_ENV === 'production'){
    prisma = new PrismaClient()
} else {
    if (!global.prisma){
        global.prisma = new PrismaClient()
    }

erajanraja24

function uploadFiles(url) {
  var response =  UrlFetchApp.fetch(url)
  var fileName  = getFilenameFromURL(url)
  var folder = DriveApp.getFolderById('1IxMiswEfi67ovoBf8ZH1RV7qVPx1Ks6l');
  var blob = response.getBlob();
  var file = folder.createFile(blob)
  file.setName(fileName)
  file.setDescription("Download from the " + url)
  return file.getUrl();

marchfederico

// Base64.js
//https://raw.githubusercontent.com/davidchambers/Base64.js/master/LICENSE

  
  function InvalidCharacterError(message) {
    this.message = message;
  }
  InvalidCharacterError.prototype = new Error;
  InvalidCharacterError.prototype.name = 'InvalidCharacterError';

jsturgis

var mediaJSON = { "categories" : [ { "name" : "Movies",
        "videos" : [ 
		    { "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
              "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
              "subtitle" : "By Blender Foundation",
              "thumb" : "images/BigBuckBunny.jpg",
              "title" : "Big Buck Bunny"
            },
            { "description" : "The first Blender Open Movie from 2006",
              "sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],