Deno Developer

Deno Developer

1595895720

An example blog made with deno and Drash

An example blog made with deno and Drash

What’s this?

This will be a working example of a blog made with deno and drash, with a web component or two thrown in for good measure. With any luck this will also be the foundation for an ongoing blog about web development that focuses on buildless techniques and deno.

This is not yet a working blog. Installing this right now might be fun if you want to build the whole thing before I write the tutorials but I seriously doubt you’ll find much utility otherwise.

Installation

Get this repository using git clone https://github.com/nemo-omen/bueno.git or, (my personal preference,) npx degit nemo-omen/bueno so you aren’t downloading the git part of this repo.

npm install

Haha! I know, but this is a deno project, right? Yes, it is, but we’re using LitElement and I prefer to have that dependency local rather than making a call to a CDN from the front-end. So, we’re installing it with NPM and then we’re going to -

npx snowpack

That way snowpack can make the LitElement module available inside of the public/web_modules directory, which we can then use as an ESM module in our front-end.

Todo

Inspiration/Resources

Develop and dockerize a blogging API with deno

Main branch of above tutorial

Authentication for actual humans

Drash - relevel middleware

slugify

bcrypt

djwt

deno postgres driver

deno mongo

Download Details:

Author: nemo-omen

GitHub: https://github.com/nemo-omen/bueno

#deno #javascript #drash

What is GEEK

Buddha Community

An example blog made with deno and Drash
Deno Developer

Deno Developer

1595895720

An example blog made with deno and Drash

An example blog made with deno and Drash

What’s this?

This will be a working example of a blog made with deno and drash, with a web component or two thrown in for good measure. With any luck this will also be the foundation for an ongoing blog about web development that focuses on buildless techniques and deno.

This is not yet a working blog. Installing this right now might be fun if you want to build the whole thing before I write the tutorials but I seriously doubt you’ll find much utility otherwise.

Installation

Get this repository using git clone https://github.com/nemo-omen/bueno.git or, (my personal preference,) npx degit nemo-omen/bueno so you aren’t downloading the git part of this repo.

npm install

Haha! I know, but this is a deno project, right? Yes, it is, but we’re using LitElement and I prefer to have that dependency local rather than making a call to a CDN from the front-end. So, we’re installing it with NPM and then we’re going to -

npx snowpack

That way snowpack can make the LitElement module available inside of the public/web_modules directory, which we can then use as an ESM module in our front-end.

Todo

Inspiration/Resources

Develop and dockerize a blogging API with deno

Main branch of above tutorial

Authentication for actual humans

Drash - relevel middleware

slugify

bcrypt

djwt

deno postgres driver

deno mongo

Download Details:

Author: nemo-omen

GitHub: https://github.com/nemo-omen/bueno

#deno #javascript #drash

Tyrique  Littel

Tyrique Littel

1603587600

How To Create a Developer Blog on DevDojo

Nowadays, creating a blog is easy. But, with all the different options available, you might go crazy by just doing the research.

Should you choose WordPress and tweak the theme to get it the way you like, or a static site generator with no admin interface and complicated build processes?

All you want is a simple blog where you can write about the shit you love.

So why can’t it be simpler? Well, now it is with the DevDojo Dev Blog!

Setting up a Domain

Your Dev Blog will have a default subdomain username.devdojo.com, and you may choose to add a custom domain as well.

If you wish to use a custom domain, add a CNAME record to your Cloudflare DNS, with your subdomain in the CONTENT section. Wait a few minutes and you’ll have your custom domain resolving in minutes.

Want a video on how to do this, You got it!

Themes

At the moment of writing this, there are 2 themes you can choose from (many more to come). Each theme will have a light/dark mode and is built for speed!

Themes are built using the awesome TailwindCSS library. If you pair that with PurgeCSS, minimal javascript, and Cloudflare caching. That’s just a recipe for a fast website.

#developer-blog #dev-blog #web-development #portfolio #blog #blogging #developer-tools #writing

Welde Tekle

Welde Tekle

1606469520

Deno + Drash Realworld Example App

Drash Example App

Drash codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

This real world example application uses Deno, Drash, Vue, Webpack, PostgreSQL, and docker-compose.

How to Run

$ docker-compose build && docker-compose up -d

Navigate to localhost:1667

Features

  • [x] Docker compose environment
  • [x] Logging
  • [x] Authentication (/users/login)
  • [x] User accounts
    • [x] Postgres DB to hold user accounts with a seeder
    • [x] Registration
    • [x] Login
    • [x] Password hashing
  • [ ] Redis?
  • [ ] API container?
  • [ ] Web socket?
  • [x] Database model representations
  • [x] Vue (built with webpack using Vue Single File Components)
  • [ ] Cypress

Frontend login

There are a total of 100 users, with each user having the same password. Say we want to login as user 32:

Username: user32
Password: Userpass1
Email: user32@hotmail.com

Built With

  • Docker - Containerisation
  • Apache - Acts as how Apache can be used as a proxy server for Drash
  • Deno - Javascript and Typescript runtime
  • Drash - Web server
  • Vue - Frontend framework
  • Webpack - Bundling Vue
  • Postgres - Postgres driver for the applications database
  • Bcrypt - Hashing and comparing passwords
  • Rhum - Testing framework
  • Dmm - Module Manager for Deno to update our dependencies
  • Vue-input - Library used to help the display of article tags as ‘pills’, allowing them to be removed and added like a shopping cart
  • Cypress - Browser testing framework

Download Details:

Author: drashland

Source Code: https://github.com/drashland/deno-drash-realworld-example-app

#deno #node #nodejs #javascript #drash

How to Create Pure CSS Tabs with Indicator using only HTML & CSS

In this blog you’ll learn how to create Pure CSS Tabs with Indicator using only HTML & CSS.

To create pure CSS tabs with Indicator using only HTML & CSS. First, you need to create two Files one HTML File and another one is CSS File.

1: First, create an HTML file with the name of index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure CSS Tabs Design | Codequs</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>Pure CSS Tabs</header>
    <input type="radio" name="slider" checked id="home">
    <input type="radio" name="slider" id="blog">
    <input type="radio" name="slider" id="code">
    <input type="radio" name="slider" id="help">
    <input type="radio" name="slider" id="about">
    <nav>
      <label for="home" class="home"><i class="fas fa-home"></i>Home</label>
      <label for="blog" class="blog"><i class="fas fa-blog"></i>Blog</label>
      <label for="code" class="code"><i class="fas fa-code"></i>Code</label>
      <label for="help" class="help"><i class="far fa-envelope"></i>Help</label>
      <label for="about" class="about"><i class="far fa-user"></i>About</label>
      <div class="slider"></div>
    </nav>
    <section>
      <div class="content content-1">
        <div class="title">This is a Home content</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero aspernatur nobis provident dolores molestias quia quisquam laborum, inventore quis, distinctioa, fugit repudiandae delectus sunt ipsam! Odio illo at quia doloremque fugit iops, asperiores? Consectetur esse officia labore voluptatum blanditiis molestias dic voluptas est, minima unde sequi, praesentium dicta suscipit quisquam iure sed, nemo.</p>
      </div>
      <div class="content content-2">
        <div class="title">This is a Blog content</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit amet. Possimus doloris nesciunt mollitia culpa sint itaque, vitae praesentium assumenda suscipit fugit doloremque adipisci doloribus, sequi facere itaque cumque accusamus, quam molestias sed provident quibusdam nam deleniti. Autem eaque aut impedit eo nobis quia, eos sequi tempore! Facere ex repellendus, laboriosam perferendise. Enim quis illo harum, exercitationem nam totam fugit omnis natus quam totam, repudiandae dolor laborum! Commodi?</p>
      </div>
      <div class="content content-3">
        <div class="title">This is a Code content</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, debitis nesciunt! Consectetur officiis, libero nobis dolorem pariatur quisquam temporibus. Labore quaerat neque facere itaque laudantium odit veniam consectetur numquam delectus aspernatur, perferendis repellat illo sequi excepturi quos ipsam aliquid est consequuntur.</p>
      </div>
      <div class="content content-4">
        <div class="title">This is a Help content</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim reprehenderit null itaq, odio repellat asperiores vel voluptatem magnam praesentium, eveniet iure ab facere officiis. Quod sequi vel, rem quam provident soluta nihil, eos. Illo oditu omnis cumque praesentium voluptate maxime voluptatibus facilis nulla ipsam quidem mollitia! Veniam, fuga, possimus. Commodi, fugiat aut ut quorioms stu necessitatibus, cumque laborum rem provident tenetur.</p>
      </div>
      <div class="content content-5">
        <div class="title">This is a About content</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia sequi aliquam. Voluptatem distinctio nemo culpa veritatis nostrum fugit rem adipisci ea ipsam, non veniam ut aspernatur aperiam assumenda quis esse soluta vitae, placeat quasi. Iste dolorum asperiores hic impedit nesciunt atqu, officia magnam commodi iusto aliquid eaque, libero.</p>
      </div>
    </section>
  </div>
</body>
</html>

2: Second, create a CSS file with the name of style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  overflow: hidden;
  padding: 0 20px;
  background: #17a2b8;
}
::selection{
  background: rgba(23,162,184,0.3);
}
.wrapper{
  max-width: 700px;
  width: 100%;
  margin: 200px auto;
  padding: 25px 30px 30px 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 20px;
}
.wrapper nav{
  position: relative;
  width: 80%;
  height: 50px;
  display: flex;
  align-items: center;
}
.wrapper nav label{
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  color: #17a2b8;
  font-size: 17px;
  border-radius: 5px;
  margin: 0 5px;
  transition: all 0.3s ease;
}
.wrapper nav label:hover{
  background: rgba(23,162,184,0.3);
}
#home:checked ~ nav label.home,
#blog:checked ~ nav label.blog,
#code:checked ~ nav label.code,
#help:checked ~ nav label.help,
  #about:checked ~ nav label.about{
  color: #fff;
}
nav label i{
  padding-right: 7px;
}
nav .slider{
  position: absolute;
  height: 100%;
  width: 20%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 5px;
  background: #17a2b8;
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#blog:checked ~ nav .slider{
  left: 20%;
}
#code:checked ~ nav .slider{
  left: 40%;
}
#help:checked ~ nav .slider{
  left: 60%;
}
#about:checked ~ nav .slider{
  left: 80%;
}
section .content{
  display: none;
  background: #fff;
}
#home:checked ~ section .content-1,
#blog:checked ~ section .content-2,
#code:checked ~ section .content-3,
#help:checked ~ section .content-4,
#about:checked ~ section .content-5{
  display: block;
}
section .content .title{
  font-size: 21px;
  font-weight: 500;
  margin: 30px 0 10px 0;
}
section .content p{
text-align: justify;
}

Now you’ve successfully created Pure CSS Tabs with Slide Indicator.

Laravel AJAX CRUD Example Tutorial

Hello Guys,

Today I will show you how to create laravel AJAX CRUD example tutorial. In this tutorial we are implements ajax crud operation in laravel. Also perform insert, update, delete operation using ajax in laravel 6 and also you can use this ajax crud operation in laravel 6, laravel 7. In ajax crud operation we display records in datatable.

Read More : Laravel AJAX CRUD Example Tutorial

https://www.techsolutionstuff.com/post/laravel-ajax-crud-example-tutorial


Read Also : Read Also : Laravel 6 CRUD Tutorial with Example

https://techsolutionstuff.com/post/laravel-6-crud-tutorial-with-example

#laravel ajax crud example tutorial #ajax crud example in laravel #laravel crud example #laravel crud example with ajax #laravel #php