DEV Community: Irsyad A. Panjaitan

Let's Create a Browser Mockups with Tailwind CSS

Irsyad A. Panjaitan — Fri, 01 Jan 2021 21:48:49 +0000

Alright, We need to think what we need in this case ? Like I know we need header, and body, and inside the header we need three dots which is red, yellow and green.

Let's create the container for header.

<div class="w-full h-11 rounded-t-lg border-2 border-black flex justify-start items-center space-x-1.5 px-3">
    <!-- The dots will be here -->
</div>

Next, inside our header, we need to make a dot.

<span class="w-3 h-3 rounded-full bg-black"></span>

And because our header has been set into flex justify-start, now you can put 3 of span inside the header like so:

<div class="w-full h-11 rounded-t-lg border-2 border-black flex justify-start items-center space-x-1.5 px-3">
    <span class="w-3 h-3 rounded-full bg-black"></span>
    <span class="w-3 h-3 rounded-full bg-black"></span>
    <span class="w-3 h-3 rounded-full bg-black"></span>
</div>

You may think this is not what we want, so please change the dot background one by one.

<div class="w-full h-11 rounded-t-lg border-2 border-black flex justify-start items-center space-x-1.5 px-3">
    <span class="w-3 h-3 rounded-full bg-red-400"></span>
    <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
    <span class="w-3 h-3 rounded-full bg-green-400"></span>
</div>

Next, let's make a body for our muckup, of course you can change the height what ever you want, in this example, we will use the bult-in class of max spacing (24rem) from tailwind it self.

<div class="border-2 border-black border-t-0 w-full h-96"></div>

And now we can merge them in one container like so:

<div  class="max-w-3xl mx-auto my-10">
    <div  class="w-full h-11 rounded-t-lg bg-gray-200 flex justify-start items-center space-x-1.5 px-3">
        <span  class="w-3 h-3 rounded-full bg-red-400"></span>
        <span  class="w-3 h-3 rounded-full bg-yellow-400"></span>
        <span  class="w-3 h-3 rounded-full bg-green-400"></span>
    </div>
    <div  class="bg-gray-100 border-t-0 w-full h-96"></div>
</div>

And now you have a gray mockup browser. But let's make the others like the dark mode and the outline of dots.

<div class="max-w-3xl mx-auto my-10">
    <div class="w-full h-11 rounded-t-lg bg-gray-900 flex justify-start items-center space-x-1.5 px-3">
        <span class="w-3 h-3 rounded-full bg-red-400"></span>
        <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
        <span class="w-3 h-3 rounded-full bg-green-400"></span>
    </div>
    <div class="bg-gray-700 border-t-0 w-full h-96"></div>
</div>

And the last one is outline of dots.

<div class="max-w-3xl mx-auto my-10">
    <div class="w-full h-11 relative rounded-t-lg bg-blue-900 flex overflow-hidden justify-start items-center space-x-1.5 px-2">
        <div class="absolute w-full h-full inset-0 bg-black opacity-50"></div>
        <span class="relative w-3 h-3 border-2 rounded-full border-red-400"></span>
        <span class="relative w-3 h-3 border-2 rounded-full border-yellow-400"></span>
        <span class="relative w-3 h-3 border-2 rounded-full border-green-400"></span>
    </div>
    <div class="relative bg-blue-600 border-t-0 w-full h-96 border-t border-blue-900">
        <div class="absolute w-full h-full inset-0 bg-black opacity-60"></div>
    </div>
</div>

And we're done.

Rename column with laravel migration

Irsyad A. Panjaitan — Fri, 30 Oct 2020 21:41:19 +0000

First of all, you need to install package dbal.

composer require doctrine/dbal

When it's done, now you need to make one migration like this

php artisan make:migration rename_column_user_name_to_username_in_users_table --table=users

Now open that file inside migrations folder and start to modify it.

public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->renameColumn('user_name', 'username');
    });
}

public function down()
{
    Schema::table('users', function (Blueprint $table) {
        $table->renameColumn('user_name', 'username');
    });
}

Now you can migrate it php artisan migrate

And you're done.

Laravel, React and SPAs

Irsyad A. Panjaitan — Fri, 28 Aug 2020 02:44:18 +0000

Let's start by installing the laravel project first.

$ laravel new lrspa

When you've done, now let's install the laravel ui package so we get the scaffolding from react.

$ cd lrspa
$ lrspa > composer require laravel/ui

Now, when you've done with that, you should have new artisan command its called ui.

$ lrspa > php artisan ui react

After you do artisan ui, you should be commanded to run npm install && npm run dev.

When everything has done. Now we can continue to modify the route.

Open web.php and replace all with these.

<?php

use Illuminate\Support\Facades\Route;
Route::view('/{any}', 'app')->where('any', '.*');

When you the route is very simple, it will allow you to make any of url you want, why we do that ? just because we want to use the react-router-dom.

Now, you can remove all files inside the resources/views, and make one file app.blade.php.

Open the file and type basic markup with id root.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel React JS SPA</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <div id="root">
        <App></App>
    </div>
    <script src="/js/app.js"></script>
</body>
</html>

Now open app.js inside resources/js, and replace with code below.

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router'
function App() {
    return (
        <div>
            <Router/>
        </div>
    );
}

export default App;

if (document.getElementById('root')) {
    ReactDOM.render(<App />, document.getElementById('root'));
}

Now, if you see the structur of code, there are two thing we have to do.

Install react router
Make router file

open your command line again, and install react router.

$ lrspa > yarn add react-router-dom

Now, inside resources/js, you can create new folder router and inside make new file index.js

So now, you have structur like this.

├── App.js
├── router
│   └── index.js

Now, open router/index.js and make the router.

import React from 'react';
import { Switch, BrowserRouter, Route } from 'react-router-dom';
import Home from '../views/Home'
import About from '../views/About'
import Contact from '../views/Contact'
import Navbar from '../components/Navbar';
function Router(props) {
    return (
        <div>
            <BrowserRouter>
                <Navbar />
                <div className="py-4">
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/about" component={About} />
                        <Route path="/contact" component={Contact} />
                    </Switch>
                </div>
            </BrowserRouter>
        </div>
    );
}

export default Router;

If you see the code, so many things you have to do, like make views folder inside js directory, and make Navbar.js inside component folder. So do that now.

Inside views folder, make 3 files, Home.js, About.js and Contact.js. After you've done with that, then write any of code like so.

import React from 'react';

function Home(props) {
    return (
        <div className="container">
            Home
        </div>
    );
}

export default Home;

Now, open terminal.

$ lrspa > yarn run dev && php artisan serve

Open your browser, localhost:8080 And done.

Laravel, Vue and SPAs

Irsyad A. Panjaitan — Tue, 31 Dec 2019 12:38:37 +0000

First of all, we need to setup laravel.

$ laravel new my-app

When it's done, cd in there and install all dependencies.

$ cd my-app
$ (my-app) > npm install

then let's install vue, vue router, and also vuex. I'm using npm, feel free to use yarn if you'are.

$ (my-app) > npm install vue vue-router vuex

After you've done all setup, now open your project in your editor text. Go to resources/js/ and let's make couple folder and file for store and router.

$ (my-app) > resources/js/
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js

Then, open your app.js in resources/js/app.js and setup everything we need like

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import store from "./store";
import routes from './router'

const app = new Vue({
    el: '#app',
    store,
    router: new VueRouter(routes),
});

Now, let's open the index.js in router folder and setup the route, in this case, we just use two diffrent page home and about.

import Home from '../views/Home.vue'
import About from '../views/About.vue'

export default {
    mode: 'history',

    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },
        {
            path: '/about',
            name: 'about',
            component: About,
        }
    ]
}

You will suggest we will need the views folder and two file inside. So do this inside resources/js, now you will see your structur like this.

$ (my-app) > resources/js/
    ├── app.js
    ├── bootstrap.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
        ├── About.vue
        └── Home.vue

Now open your About.vue and type just simple example.

<template>
    <div>
        About
    </div>
</template>

<script>
export default {

}
</script>

And your Home.vue like

<template>
    <div>
        Home
    </div>
</template>

<script>
export default {

}
</script>

Then, open your index.js in store folder and import vue & vuex, and use vuex as vue module like this.

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {}
})

And after you've done all thing, you can now open your web.php in routes folder. my-app/routes/web.php and just type one route for handling spa and 404 page like so:

<?php 

Route::view('/{any}', 'app')->where('any', '.*');

If we see all files in resources/views/, We know we have welcome.blade.php but just ignore it and let's make new file with name app.blade.php and you can remove welcome.blade.php if you want.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Laracore</title>
</head>
<body class="antilaliased font-sans bg-gray-200">

    <main id="app">
        <navigation></navigation>
        <div class="py-5">
            <router-view></router-view>
        </div>
    </main>

    <script src="/js/min.js"></script>
</body>
</html>

If you see, I have include the navigation after main#app, and you will suggest we'll make new component for our navigation.
So know we need new folder in resources/js with name components, we will use navigation for our vue component in this case. Let's make new file with Navigation.vue in components folder, then your structur folder much like this.

$ (my-app) > resources/js/
    ├── app.js
    ├── bootstrap.js
    ├── components
    │   └── Navigation.vue
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
        ├── About.vue
        └── Home.vue

Now open, app.js again, and include navigation component Vue.component('navigation', require('./components/Navigation.vue').default); and your app.js now like this:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import store from "./store";
import routes from './router'

Vue.component('navigation', require('./components/Navigation.vue').default);
const app = new Vue({
    el: '#app',
    store,
    router: new VueRouter(routes),
});

Now open components/Navigation.vue and type simple example like this:

<template>
    <div>
        <ul>
            <li>
                <router-link :to="{ name: 'home' }">Home</router-link>
            </li>
            <li>
                <router-link :to="{ name: 'about' }">About</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {

    }
</script>

Now, open your terminal again, make two tab, one for watching for changes any file we have, and two for serving our laravel app.

First of all you have to compile your script like this.

npm run dev && npm run watch

Then, open new tab in your terminal and run artisan serve

$ (my-app) > php artisan serve

Open your browser http://127.0.0.1:8000 and that's it.

Now we are done. If you follow all stuffs we did, you will have structur in your resources like this.

$ (my-app) > resources
├── js
│   ├── app.js
│   ├── bootstrap.js
│   ├── components
│   │   └── Navigation.vue
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   └── views
│       ├── About.vue
│       └── Home.vue
└── views
    ├── app.blade.php

Now you can add package anything you want and import it in your app.js, think of it just like the Main.js file in vue-cli.

Get full source code in github.

Do you know ":first-of-type" in css

Irsyad A. Panjaitan — Tue, 31 Dec 2019 11:42:28 +0000

I think you will need this situation for any reason, for example, if you just want to select the first element after your form-group like label, you can do this technic.

With sass, you can do so:

.form
    &-input, &-textarea
        @apply w-full
    &-group
        @apply mb-4
        label:first-of-type
            @apply block text-gray-700 block mb-2 text-sm

Sorry if you a bit comfused with the @apply, I'm using tailwind css for any property I need.

With css, you can do:

.form-group label:first-of-type {
    property: 'value';
}

That's it, hope this help you :)

I use Glide for simple carousel

Irsyad A. Panjaitan — Mon, 23 Dec 2019 11:04:37 +0000

Try this at yours! It's so cool.

https://glidejs.com/