DEV Community: dan

Make Android app with Bubblewrap. How add Admob?

dan — Tue, 13 Jul 2021 07:26:37 +0000

I already build my PWA/TWA here hana.rip and already know how to create an Android app with Bubblewrap.

Then I'm wondering, can i put admob to it? How?

Or should I use adsense instead?

Any better idea?

SvelteKit ❤️ Windi CSS

dan — Wed, 16 Jun 2021 16:38:17 +0000

Specification

@sveltejs/kit: "next" (1.0.0-next.115)
vite-plugin-windicss: "^1.0.0" (1.0.4)
@sveltejs/adapter-static: "next" (1.0.0-next.13)

Features

store using localstorage for theme
dark mode correctly before everything get rendered
dark mode for Windi typography plugin

Demo

Live Demo

Running the project

Clone this repo and cd to the directory, then run npm or yarn

pnpx degit dansvel/sveltekit-windicss myproject ## or npx
cd myproject
pnpm i ## or npm or yarn
pnpm run dev

## to generate static web
pnpm run build

Go to Repo

Sveltekit Vite with Tailwind 2

dan — Mon, 14 Dec 2020 16:06:06 +0000

svelte@next with postcss and tailwind

UPDATE :

5.update to SvelteKit Vite, all work. This post outdate and will not maintain anymore, check the repo
4.add demo
3.make run build export static build/ directory
2.fix run build error
1.fix huge error

S T O P

Pump the brakes! A little disclaimer...

svelte@next is not ready for use yet. It definitely can't
run your apps, and it might not run at all.

We haven't yet started accepting community contributions,
and we don't need people to start raising issues yet.

Given these warnings, please feel free to experiment, but
you're on your own for now. We'll have something to show
soon.

Sapper v1 will never be released, instead Svelte is being developed further. For more information, please check out the jessenkinner post at dev.to : Sapper is dead, what is next in Svelte?

However, that didn't stop me from trying it wholeheartedly.

By the way, I just got to know pnpm and was very happy to know and use it. So I'm going to use pnpm instead of npm or yarn, although they both have the same use.

Create Svelte project

for now, you can run this command in your terminal, assuming you have pnpm installed :

pnpm init svelte@next svelte-next
cd svelte-next
pnpm i

Where svelte-next is the name of your project directory. You can choose if you want to use typescript or not.

Before going any further, we can ensure that the current version is "ok" to develop by running the command below and accessing localhost:3000 in the browser.

pnpm run dev

If you got error like this

Error: NOT_FOUND
    at Object.loadUrl (C:\Users\hp\www\sveltest\node_modules\.pnpm\snowpack@3.0.0-rc.2\node_modules\snowpack\src\commands\dev.ts:607:13)
    at C:\Users\hp\www\sveltest\node_modules\.pnpm\@sveltejs\kit@1.0.0-next.15\node_modules\@sveltejs\kit\src\api\dev\index.js:167:14

it seems like there problem in the snowpack configuration, so edit plugins line to like this

    plugins: [
        [
            "@snowpack/plugin-svelte",
            {
                compilerOptions: {
                    hydratable: true
                }
            }
        ],
        '@snowpack/plugin-typescript'
    ],

stop and rerun the dev server

Setting up the preprocess

If you are not using typescript, then you need to add the preprocess manualy by run this command

pnpm i -D svelte-preprocess

Then apply the preprocess to svelte add PostCSS to it

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: [
        sveltePreprocess({
            defaults: {
                script: 'typescript',
                style: 'postcss',
            },
            postcss: true
        }),
    ],
    kit: {
        // By default, `npm run build` will create a standard Node app.
        // You can create optimized builds for different platforms by
        // specifying a different adapter
        adapter: '@sveltejs/adapter-node',

        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte'
    }
};

The default object property that defines the default languages of your components. so the configuration above makes TypeScript the default language, removing the need of adding lang="ts" to script tags and lang="postcss" to style tags.

Add PostCSS and Tailwind

pnpm add -D @snowpack/plugin-postcss postcss postcss-cli postcss-load-config postcss-preset-env
pnpm add -D tailwindcss autoprefixer cssnano

Because svelte@next still in development, maybe you wont to bring it to production, you may just skip autoprefixer or cssnano if you don't need them.

I just use postcss-preset-env for nesting, you can use other plugin like postcss-nesting or else.

Setting up PostCSS

Edit the Snowpack Configuration file

// snowpack.config.js
// Consult https://www.snowpack.dev to learn about these options
module.exports = {
    extends: '@sveltejs/snowpack-config',
    plugins: [
        [
            '@snowpack/plugin-build-script',
            {
                cmd: "postcss",
                input: [".css", ".pcss"],
                output: [".css"],
            }
        ],
        [
            "@snowpack/plugin-svelte",
            {
                compilerOptions: {
                    hydratable: true
                }
            }
        ],
        '@snowpack/plugin-typescript'
    ],
    mount: {
        'src/components': '/_components'
    },
    alias: {
        $components: './src/components'
    }
};

Create PostCSS configuration file in the project's root folder. Shomething like this.

// postcss.config.js
const mode = process.env.NODE_ENV;
const dev = mode === "development";

module.exports = {
    plugins: [
        require('postcss-preset-env')({stage: 1}),
        require("tailwindcss"),
        require("autoprefixer"),

        !dev && require("cssnano")({
            preset: "default",
        }),
    ],
};

Setting up Tailwind

Run this command

npx tailwind init

Edit Tailwind configuration

// taiwind.config.js
const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");

module.exports = {
    purge: {
        content: [
            "./src/**/*.html",
            "./src/**/*.svelte"
        ],
        options: {
            defaultExtractor: (content) => [
                ...tailwindExtractor(content),
                ...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
            ],
            keyframes: true,
        },
    },
    darkMode: 'class',
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

the tailwindExtractor is for future purpose, so you can use class: directive

Tailwind ready to use

Create src\routes\global.pcss

@tailwind base;
@tailwind components;
@tailwind utilities;

then use it on src\routes\$layout.svelte

<script>
    import './global.pcss';
</script>

<slot/>

on the src\routes\index.svelte

<script>
    import Counter from '$components/Counter.svelte';
</script>

<main>
    <h1 class="uppercase text-5xl font-extrabold my-16">Hello world!</h1>

    <Counter/>
    <p>Visit the <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
</main>

<style>
  main {
    @apply px-8 py-16 mx-auto max-w-5xl text-center;
  }

  * + * {
    @apply mb-0 mt-4;
  }

  p {
    @apply text-xl;
  }
</style>

The boileplate

If you want to try ready to use boiler plate I made with dark mode toggle theme, you can check my reposistory here

UPDATE :

to generate static site you can deploy in netlify, just run build command, i already update the repo
Live Demo

Still learning to write post in English. Please be advised.

comment if you find another error

thanks

Laravel and Svelte with Inertia

dan — Sun, 18 Oct 2020 04:52:23 +0000

It started with getting to know Svelte and her beauty, then fell in love at first sight. Ehm... But I wasn't ready if I had to bring it together with Sapper, which was meant to be.

So after searching here and there, trying all the ways that I found in the virtual universe. I met with Inertia.

What is Inertia?

Inertia allows you to create Single-page Apps (SPA) without the need to build an API. Which means you don't need to bother with complicated things like routing and API.

As far as I am concerned, all APIs and routing will still use server-side, which will be directed to the Inertia adapter. Then Inertia turns it into an XHR request and throws it to the client side.

The wedding

Inertia can be used for almost all back end such as Rails, Symfony, Yii2. Supported front-ends are, React, Vue. And other frameworks whose adapters are developed by the community.

But this time I will only marry Laravel and Svelte off here.

Server Side

Prepare the Laravel application, or use what you already have.

laravel new application
application cd

Add inertia using a composer.

composer require inertiajs/inertia-laravel

Set Laravel Blade to run Inertia.

resources/views/app.blade.php

<! DOCTYPE html>
<html>
<head>
   <meta charset = "utf-8" />
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0" />
   <link href = "{{mix ('/ css/app.css')}}" rel = "stylesheet" />
   <script src = "{{mix ('/ js/app.js')}}" defer> </script>
</head>
<body>
@inertia
</body>
</html>

Asset Versioning

app/Providers/AppServiceProvider.php

<?php

App\Providers namespace;

use Illuminate\Support\ServiceProvider;
use Inertia\Inertia;

the AppServiceProvider class extends ServiceProvider
{
    public function register ()
    {
        //
    }

    public boot function ()
    {
        Inertia :: version (function () {
            return md5_file (public_path ('mix-manifest.json'));
        });
    }
}

Client Side

Add the required packages

npm install @inertiajs/inertia @inertiajs/inertia-svelte
npm install @babel/plugin-syntax-dynamic-import laravel-mix-svelte

Code splitting is commonly used by frameworks, you need babel for this.

create the .babelrc file it contains

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Initialize main JavaScript

resources/js/app.js

import {InertiaApp} from '@inertiajs/inertia-svelte'

const app = document.getElementById ('app')

new InertiaApp ({
  target: app,
  props: {
    initialPage: JSON.parse (app.dataset.page),
    resolveComponent: name => import (`./Pages/$ {name} .svelte`) .then (module => module.default),
  },
})

Configure script building I use laravel-mix plus laravel-mix-svelte

webpack.mix.js

const mix = require ('laravel-mix');
require ('laravel-mix-svelte');

mix.js ('resources/js/app.js', 'public/js')
    .sass ('resources/sass/app.scss', 'public/css')
    .svelte ({
        dev:! mix.inProduction ()
    })
    .webpackConfig ({
        output: {chunkFilename: 'js/[name]. js? id = [chunkhash]'},
    })
    .version ();

Use Laravel and Svelte

For the Svelte section, you can create a view with the extension .svelte in theresources/js/Pages directory according to what was set in the initialization. Such as resources/js/Pages/Books/Show.svelte

resources/js/Pages/Index.svelte

<script>
let name = 'world';
</script>

<style>
h1 {
    color: indigo;
    font-family: 'Calibri', cursive;
    font-size: 3em;
}
</style>

<h1> Svelte greets {name} through inertia </h1>

Then in the Laravel section, you can create a router to render its view or process data in the controller as usual. Don't forget to add use Inertia\Inertia; at the top of the controller

routes/web.php

Route :: get ('/', function () {
return Inertia\Inertia :: render ('Index');
}

--- edit
I forgot to mention a ready to use my repository: https://github.com/dansvel/laravel-svelte