DEV Community: SumantaWeb

Alpine JS : An Intro

SumantaWeb — Tue, 01 Feb 2022 06:06:32 +0000

Alpine JS : An Intro

Topics

Overview
How to Code
Creating a basic button

Overview

Your new, lightweight, JavaScript framework. -Alpine Js

It is a light weight js framework inspired by Vue JS!

How To Code

For it you have this script tag --
<script src="https://unpkg.com/alpinejs" defer></script>

but in the site it will be showing like this
<script src="//unpkg.com/alpinejs" defer></script>
just add https: before //unpkg.com

so for writing code just add the script tag inside the head tag

<head>
  <title>Title</title>
  <script src="https://unpkg.com/alpinejs" defer></script>
</head>

Now in the body tag add a attribute like this
<body x-data="data()"></body>

Now add another script tag! And write the following inside it!

<body x-data="data()">
  <script>
  function data(){
    return{

    }
  }
  </script>
</body>

Now understand what was data() it would fetch all the data from here.

So becoz it is an object so add variables like this varName : "value"

Creating a basic button

So lets create some variables!

<script>
  function data(){
    return{
      shown : false,
      click(){

      },
    }
  }
  </script>

Here there is a var called shown with false as its value, and a function named click() so lets code them all.

<button>Toggle</button>
<div>Content</div>

Add these.

Give a attribute x-show="shown" to the div. (x-show means if the value is being shown or not [it is an if statement], it goes away[the button] because the var shown is false if it is true the button will be visible).

Now give a attribute x-on:click="click()" to the button (it will run when the button is clicked).

Coding the function.

click(){
        this.shown = !this.shown
},

Now it will toggle the shown var as true and then false!

Enjoy!

All the code :-

<head>
  <title>Title</title>
  <script src="https://unpkg.com/alpinejs" defer></script>
</head>
<body x-data="data()">
  <button x-on:click="click()">Toggle</button>
  <div x-show="shown">Content</div>
  <script>
  function data(){
    return{
      shown : false,
      click(){
        this.shown = !this.shown
      },
    }
  }
  </script>
</body>

Consider Following??

Dev.To
GitHub

ShoPo ~ Js and Places to learn!

SumantaWeb — Tue, 01 Feb 2022 05:05:21 +0000

ShoPo ~ Js and Places to learn!

Overview

JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries. Wikipedia

Javascript is one of the building blocks of the web and is used to add functionalities to your web pages. One of them can be shown just now!

<button id="btn">Alert!</button>

<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("You clicked a button!")
});
</script>

Here you can click a button. It would get noticed by js and run a function!

Places to learn

w3schools
Codecademy
YouTube - Programming with Mosh

YouTube - freeCodeCamp.org

ShoPo - How to copy a text to clipboard

SumantaWeb — Mon, 31 Jan 2022 11:29:54 +0000

ShoPo - How to copy a text to clipboard (using JS!)

ShoPo is a new posting session which is Short! (SHOrt POst).

Yeah! we can copy a text to clipboard at a click of a button!

so how to do it?

so do the following --
1)Add a click function to the button

using JavaScript way 1

<button onclick="function()">Copy!</button>

using JavaScript way 2

<button id="copyButton">Copy!</button>

<!--- Just add a onClick event in js --->

using Alpine

<button @click="function()">Copy!</button>

2)Now code the function

function(){
  navigator.clipboard.writeText("text goes here!")
}

Challenge #1

SumantaWeb — Wed, 22 Dec 2021 05:33:03 +0000

Okay,

IT'SS THE LAST MONTH OF THE YEAR!!!

So all the business of the whole year comes to an end in few days. But one work left...

Challenges!
My web dev teacher gave us a challenge to complete.. And I am sure gonna complete it by today.. let's see if I can.

The challenge :-

"Build a web page with an input field. If you type a valid css color code in the field, the background of the page should change to that color. If the color code is illegal, it should show an error message."

Note : DO NOT use input type=color.

So let's see if I can. You all also try and say in the comments if you could complete it.

I would send the code in another post someday..

Till then byee.

What to start with as a begginer in Web Dev??

SumantaWeb — Wed, 01 Dec 2021 12:27:04 +0000

Well all the YouTube videos, some are true some are false.. But the statement I always say ....

Don't spend money. As it can happen that after spending money, sometimes the money goes waste and you don't learn anything..
So the first thing to do is. Start with HTML5. And see YouTube to start learning...

CONCLUSION : Start with HTML5 using YouTube videos.

Should you ever Collab??

SumantaWeb — Tue, 30 Nov 2021 12:43:25 +0000

So here is today's question

Should you ever Collab??

We wil cover it in 2 points

YES

It gets you know new things, gather knowledge, and makes you happy with people. It's relaxig as sometimes you talk and releax with friends. It evn helps you get a collaborative job!!

NO

Well bad collaboration = bad work.

SO THE ULTIMATE CONCLUSION IS COLLABORATION IS GOOD!! 😀😀

Front - End websites for practice

SumantaWeb — Fri, 08 Oct 2021 09:01:52 +0000

So hi again!!

I am here with some websites to practice front-end!!

So no descs or unnecessary talks. Just names

1) Netflix
2) Amazon
3) Bootstrap
4) Myntra
5) Unacademy

Some other famous ones can also be done..

Now the Bye time. Follow, heart, comment, unicorn.. Don't Wait!!

What are the best css trends??

SumantaWeb — Tue, 05 Oct 2021 06:43:12 +0000

So hey!!
Here again for you all. So what's today..
I have come up with 2 css trends so that your website looks cool!!

1) Glassmorphism
The most popular trend this year. It is a effect which gives you a blurry glass like background. Blurs the background text/image. I also have a post on it. Check it out on my profile.

2) Neumorphism
It's the popular trend of the past year but still popular. It makes buttons text look like pop - out of the screen .

No it's the Bye time.. Follow me , heart the pos and if you like it then unicorn it!! Try both the css trends and thank me afterwards. Till then. BYEEEEEE.

Ques & Ans

SumantaWeb — Thu, 30 Sep 2021 04:12:03 +0000

You all can ask some front-end
And I will try to answer them!

Comment your questions below!!

How??

SumantaWeb — Tue, 28 Sep 2021 11:28:12 +0000

How to create a dev.to podcast??

Intro to VS Code for WEB - DEVs Chapter 1 - Introduction

SumantaWeb — Tue, 28 Sep 2021 05:08:18 +0000

Introduction

It is a code - editor which is highly popular. VS Code, can be used to write code in any programming languages by downloading the respective packages of the language. But here we will be focusing on Webb - Dev only. For for Static Web pages or HTML , CSS & JS web pages nothing needs to be downloaded. Only VS Code is needed.

Some other popular Altenatives to VS Code are Atom & Sublime Text. Another one is Replit which is cloud based or online. But As far today the most Popular is VS Code as per Google trends

source : Google trends

It is Made by the Company Microsoft. We won't Recommend to install it from third party sites. Download it from here.

Wikipedia says : "Visual Studio Code is a code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git."

Two Great Series!

SumantaWeb — Tue, 28 Sep 2021 03:54:00 +0000

I will be starting two great dev.to series
the topics are as follows:-

1)Intro to VS Code for WEB - DEVs
2)Newbie Front - end
(5 Volumes)

-> Volume 1 = Introduction
-> Volume 2 = Building Blocks & Vannila
-> Volume 3 = Spice it up with Frameworks!!
-> Volume 4 = UI with Figma
-> Volume 5 = Some Additional Resources

Hope You like the Series!! Its focused On Newbies but anyone can access and refresh their knowledge.