teleren/devto huggingface dataset:
Creating Tabs with Vue 2 and Tailwind css
Tags: javascript, vue, tailwindcss, tabs
Published: 2021-12-27 07:02:18

So I was building an admin dashboard for [hirehex](https://www.hirehex.com) using tailwind and needed to create some Tabs.

To be honest its rather simple to implement but requires some understanding of how components work in vue.js
I will be skipping the vue.js & tailwind project set up. But should you need it, you can check it out [here]('https://dev.to/maxwelladapoe/building-a-form-in-vue-using-tailwind-css-and-veevalidate-part-1-4kh6')
 
We will need 2 components for this:
Tab.vue & Tabs.vue

in Tab.vue:
```javascript
<template>
    <div v-show="isActive">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "Tab",
        props: {
            name: {
                required: true,
                type: [Number, String],
            },
            selected:{
                default: false
            }
        },
        data(){
            return {
                isActive:false
            }
        },
        mounted(){

            this.isActive = this.selected;

        }
    }
</script>



```

in Tabs.vue:
```javascript
<template>
    <div>
        <div id="tab-links">
            <ul class="flex space-x-2 ">
                <li v-for="(tab, index) in tabs "
                    :key="index"
                    :class="{'border-b-2':tab.isActive}"
                    class="py-2  border-solid text-center w-40 cursor-pointer"
                    @click="selectTab(tab)">
                    {{tab.name}}
                </li>
            </ul>
            <hr>

        </div>

        <div id="tab-details">
            <slot></slot>
        </div>

    </div>

</template>

<script>
    export default {
        name: "Tabs",
        data() {
            return {
                tabs: []
            }
        },
        created() {
            this.tabs = this.$children;
        },
        mounted() {

            //check if a tab has been selected by default
            let hasTabBeenSelected = this.tabs.findIndex(child=> child.selected ===true)
            //set the default to the first one
            if (hasTabBeenSelected === -1){

                this.tabs[0].isActive=true;
            }

        },
        methods: {
            selectTab(selectedTab) {
                this.tabs.forEach(tab => {
                    tab.isActive = tab.name === selectedTab.name;
                })
            }
        }
    }
</script>

<style scoped>

</style>
```
With these in place you should have a working tab component.
Feel free to modify this in anyway to meet your use case. 
Thanks.
A unique text jumbling animation using css
Tags: css, webdev, showdev, portfolio
Published: 2021-12-27 06:42:12

## Introduction
I made a minimalistic yet clean (as much as I could) portfolio using only html and css a while back, and wanted to highlight two of the animation/designs that I really liked and designed myself (even if they weren't completely unique). I had been thinking of updating my portfolio so before I proceeded with that I wanted to create a few posts highlighting each of the things that I liked the most in the entire project.  
**This is part 1**, the text jumbling animation I stumbled across by pure chance, and some trial and error.  
### NOTE 
[portfolio site](https://sarcxd.github.io/#page1) - If you are interested or just want to see my portfolio site (more posts coming, hopefully)
The animation the post concerns, (in case you did not view it in the cover, is this)
![Text Jumbling Animation Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qiuwykr356asmc01e2sd.gif)
## Animation Description
I will first mention, that I initially intended this to be a sort of a typewriter effect but because of some styling I made, it came out abit wrong, giving me the idea of trying something new.  
Let's go through it, step by step
The code of interest in my `index.html` is my intro, where I apply the style `intro-txt` to the entire div
![Html file image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jpnsym8yfuwhbopx7w6.png)
Let's now look at the styling where I will try to explain what I did.  
```
.intro-txt {
  font-family: emberly;
  font-size: 2em;
  color: #d2b48c;
  letter-spacing: 1px;

  /* The sauce */
  animation: textJumble 1.5s ease-in 0s 1 normal forwards;
  /* 
    This gives us the cut off effect as if, text is appearing on 
    the screen in a jumbled manner. 
  */
  overflow-x: hidden;
  overflow-y: hidden;
}
```
The actual animation is extremely simple, which even going back to it now, does surprise me. (yes, I have in fact forgotten a lot of what I did)  
```
@keyframes textJumble {
  0% {
    width: 0;
    height: 109px;
  }

  100% {
    width: 100%;
    height: 109px;
    white-space: normal;
  }
}
```
Basically, it starts off with a width of 0, till a width of 100%, which I have defined in the parent container of my text box as `500px`. This allows the text to be populated from the bottom up, as the height never changes. It also makes the text incomprehensible during the animation adding to the jumbling effect that it comes off as.
## Conclusion
You can view the code [here](https://github.com/sarcXD/sarcXD.github.io) **Spoilers!** The styling file is well, it might be a bit confusing so I expect a lot of you might not be big fans of it.
Learn for your knowledge not to just label it 
Tags: discuss, webdev, career
Published: 2021-12-27 06:42:04


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfxrbgvngpkzcmbqj3e4.png)
There are people who are good into presentation skills but, not so much knowledge about subject matter and details and there are few who are excellent into knowledge, discussions and clearing doubts but, poor at presentation skills, there are very few who are having half knowledge and who doesn't agree easily on anything and there are few jack of all master of none.

Half knowledge is always dangerous and It's not possible to have skills without proper knowledge and hence, having knowledge to use skills is important than having just skills without any knowledge.

Now, there are lot of certifications platforms available via which one can learn and show their achievements on the go. Of course it will help you your career progression but, my question is - Are we learning it just to showcase as my skill and my achievement or are we learning it go in depth and to gain more knowledge?
 
What do you think?
Prisma ORM update explicit many to many relations
Tags: javascript, node, mysql
Published: 2021-12-27 06:30:05

I was struggling to find this in docs. So, when you have explicit many to many relationship, lets say you have post that has multiple tags. And you want to edit that post and pass up new tags or edit/remove existing ones. This is the way to do it: 
        

```
const response: jobs = await prisma.posts.update({
            data: {
                ...data,
                users: { connect: { id: session.user.id } },
                posts_tags: {
                    deleteMany: {},
                    create: tags.map((tag) => ({
                        tags: { connect: { id: tag } },
                    })),
                },
            },
            where: {
                slug: postSlug,
            },
        });
```

So first you pass up deleteMany: {}, which will delete all connections between post and tags. Then you are assigning/connecting new ones.
Laravel 8 Razorpay Payment Gateway Integration Example
Tags: laravel
Published: 2021-12-27 06:15:44

Hi Artisan,

In this tutorial, I will show you step by step Laravel 8 stripe integration example from scratch. From this tutorial, we will learn how to implement stripe payment gateway integration with your Laravel 8 application.

Before using stripe in your application, we need to create a stripe developer account and need to get an API key and secret from there to make a payment system in Laravel. Having got that credentials from the stripe, we will use stripe/stripe-php composer package for the stripe payment gateway in Laravel 8. I write step-by-step integration for the stripe payment gateway so that you can understand it better

[Laravel 8 Stripe Payment Gateway Integration Example
](https://www.codecheef.org/article/laravel-8-stripe-payment-gateway-integration-example)
Machine Learning Introduction
Tags: machinelearning, ai, aws, beginners
Published: 2021-12-27 06:07:24

### How Artificial Intelligence is related to Machine Learning
AI is a field of computer science that is focused on building smart machines to perform activities using human-like intelligence.
Machine learning is a branch of AI which allows computers to automatically learn and improve their accuracy using data and algorithms to imitate how humans learn without needing to be programmed.

### Methods used in Machine Learning

- Supervised Learning
In this machine learning technique, every training sample from the dataset has a corresponding label or an output value associated with it.
- Unsupervised Learning
The training samples are not labeled. Machine learning algorithms are therefore used to analyze the unlabeled data and eventually discover the underlying patterns of data without needing human intervention.

- Semi-supervised Learning
The training uses a smaller labeled data set to guide classification and feature extraction from a larger, unlabeled data set.

- Reinforcement Learning
The model learns what actions to take through trial and error.

#### Traditional Algorithm Models Vs Machine Learning
Traditional models solve a problem by taking the problem and a program e.g. algorithm or code as inputs for the model.
In Machine learning we solve or predict problems by using historical data and desired results for the model.
What are the best comments?
Tags: programming, python, javascript, c
Published: 2021-12-27 05:49:27

---
cover_image: https://cdn.pixabay.com/photo/2021/08/09/23/22/comments-6534501_1280.png
---
Many programming languages are using comments. But they are using different syntax for it. I am going to choose the best syntax.

In computer programming, a **comment** is a programmer-readable explanation or annotation in the source code of a computer program. They are added with the purpose of making the source code easier for humans to understand, and are generally ignored by compilers and interpreters. The syntax of comments in various programming languages varies considerably.

I am creating a programming language named Unv. So I wanted to implement comments.

Vist the [Unv website](https://unv.vercel.app/docs/tutorial/comments) for more info.

There are 2 types of comments.
- inline comments
- block comments

## Inline comments

Inline comments are generally those that use a  newline  character to indicate the end of a comment, and an arbitrary  delimiter  or sequence of  tokens  to indicate the beginning of a comment.

C like languages are using double slashes to define an inline comment.
```c
// This is an inline comment
```
Python is using a `#` sign to define it.
```py
# This is an inline comment
```
C-like syntax is more popular (I think), But python comments are more clear for me. They are differ from other symbol used in code and easy to understand(with or without syntax highlighting).

So Unv comments are similar to Python.
You can try it on the [playground](https://unv.vercel.app/playground).

## Block comments
Block comments are generally those that use a delimiter to indicate the beginning of a comment, and another delimiter to indicate the end of a comment. In this context, whitespace and newline characters are not counted as delimiters.

C-like languages are using  `/*` mark to start a block comment and a `*/` mark to end it.
```c
/*
 This is a block comment
*/
```
In python normally you should use many inline comments to define a block comment.
```py
# This is a
# block
# comment
```
It's valid for Unv too. You can try it on the [playground](https://unv.vercel.app/playground).
But you can use a multiline string to define a block comment.
```py
"""
This is a
block
comment
"""
```
In Unv programming language, strings are always multiline. So similar code is always valid for Unv.
```py
"
This is a
block
comment
"
```
You can try it on the [playground](https://unv.vercel.app/playground#if%20'Unv%20is%20awesome!'%0A%20%20%20%20print('Hello%20World!')%0A%23%20keep%20editing%20for%20live%20results%0A%22%0AThis%20is%20a%0Ablock%0Acomment%0A%22%0A).
```coffee
###
This is a
block
comment
###
```
Oh it was already used by CoffeeScript. for Unv You can try it on the [playground](https://site-git-edit-unv.vercel.app/playground#if%20'Unv%20is%20awesome!'%0A%20%20%20%20print('Hello%20World!')%0A%23%20keep%20editing%20for%20live%20results%0A%23%23%23%0AThis%20is%20a%0Ablock%0Acomment%0A%23%23%23%0A)

They are my favourites. If you have ideas please let me know. You can contact me via ksengine.github@gmail.com .
Biografia Uncle Bob - O pai do Clean Code
Tags: cleancode, unclebob, beginners, programming
Published: 2021-12-27 02:16:29


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0g9hk0yr90udqqj14e2.jpg)

👨🏼‍🦳Robert C. Martin, ou Uncle Bob, é programador desde 1970. Escritor e palestrante, escreve livros na área de arquitetura de software e desenvolvimento.

⏳Uma das principais ideias de Uncle Bob é criticar as metodologias ágeis atualmente, mesmo sendo um dos signatários do "Agile Manifesto" em 2001, afirmando que servem para a "corrida do ouro", onde as empresas só aplicam em virtude de tornarem-se mais lucrativas, e não pela qualidade do software.

🧹No seu mais famoso livro, "Clean Code", afirmou que um código ruim pode funcionar, mas se não for limpo, pode destruir uma empresa de desenvolvimento de software, devido a horas perdidas todos os anos devido a códigos mal escritos, mal estruturados e com métodos e classes com nomes incondizentes. No livro, ele passa boas práticas de desenvolvimento de software com exemplos práticos de como fazer e como NÃO fazer.
Prevent RecyclerView Leaking
Tags: android, kotlin
Published: 2021-12-27 05:23:45

If you've ever had an Adapter as a property of a Fragment, you should really stop doing that because having an Adapter as a property of a Fragment is a known way of _leaking the RecyclerView_. That’s because, when the View is destroyed, the RecyclerView is destroyed along with it. But if the Fragment references the Adapter, the garbage collector won’t be able to collect the RecyclerView instance because Adapters and RecyclerViews have a _circular dependency_. In other words, they reference each other. 

If you create a method to glue together all the UI setup code (`setupUI()`) and inside that method, you delegate each component’s setup to other methods (`createAdapter(), setupRecyclerView()`), then you can be sure your adapter will be safe within `setupUI()`'s scope and you don't have to worry about the recyclerView leaking. It also makes your code cleaner, more organized, and it follows the single responsibility rule.

```kotlin
// PostFragment.kt

override fun onViewCreated( 
  view: View,
  savedInstanceState: Bundle? 
  ) {
  super.onViewCreated(view, savedInstanceState) 
  setupUI()
}

private fun setupUI() {
  val adapter = createAdapter()
  setupRecyclerView(adapter)
}

private fun createAdapter(): PostAdapter { 
  return PostAdapter()
}

private fun setupRecyclerView(postAdapter: PostAdapter) {
  binding.recyclerView.apply { 
    adapter = postAdapter
    layoutManager = GridLayoutManager(requireContext(), 
ITEMS_PER_ROW)
    setHasFixedSize(true) 
  }
}
```


However, if you aboslutely need the Adapter as a property of a Fragment, then you have to remember to either:
1) Null out the Adapter property in _onDestroyView_.
or
2) Null out the Adapter reference in the RecyclerView itself, before doing the same for the binding.

```kotlin
// PostFragment.kt

//...
override fun onDestroyView() { 
  super.onDestroyView()
  // either
  adapter = null // 1
  
  // or
  binding.recyclerView.adapter = null // 2
  _binding = null // 2
}
```
My journey in Android Development (as a newbie)
Tags: android, kotlin, mobile
Published: 2021-12-27 04:00:21

In this post, I will share how I started learn Android Development, it is short and sweet. I started from beginning and just launched my first project to Google Play Store. Not something big but that's the result.

Here is my Github repo: [Groceries Store](https://github.com/hieuwu/android-groceries-store)
These are the very first steps you should take:


![App screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x3we82qocyfw863pjcg.png)

Learn Kotlin at [Learn Kotlin by Examples](https://play.kotlinlang.org/byExample/overview)

Learn Android Basics from [Udacity Course](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012)


Do not try to learn things so deep, try to apply what you learned to the project

Of course, I said "Project". It's fine when you practice with the code in the course, but it would be better if you know how to assemble things and put right thing in the right place.

To start a project, just find a domain you like, (I choosed Groceries Store), then find a free UI Design for it. Whenever you complete a lesson from the course, try to apply it to the project.

About the backend, use Firebase.

Avoid applying some terms, libraries that you see people are talking about. It is good to know but if you are new, then don't try it. This can make you overload and easy to give up very soon.

After you are quite proficient with the framework, this time you should discover new things. The most trusted source is the samples from Google, for example, [Sunflower](https://github.com/android/sunflower)

Last but not least, you have to be consistent. Try to spend at least 30 minutes everyday to stick to the course, and the project. If that day you are tired, it's ok, just open the ide, rename some variables, make things cleaner.
Dropzone Image Upload Tutorial In Laravel 7/8
Tags: laravel, laravel8, fileupload, dropzone
Published: 2021-12-27 03:08:08

In this example I will show you dropzone image upload tutorial in laravel 6/7/8. DropzoneJS is an open source library that provides drag and drop file uploads with image previews. In laravel 6, laravel 7 and laravel 8 you can use dropzone image upload using dropzone.js.

In laravel 6/7/8 dropzone image upload or laravel 6/7/8 dropzone file upload. I am uploading multple images using dropzone in laravel 6/7/8, So, I will teach you dropzone image upload tutorial in laravel 6/7/8. 

Dropzone is a javascript jquery plugin, using dropzone.js we can select one by one image with preview or you can select multiple images or files at a time.

After choose image from browser we can see preview of image. dropzone.js also provide filter like we can make validation for max upload, specific image or file extension etc.

So, let's see example of dropzone image upload tutorial in Laravel 6, laravel 7 and laravel 8.

And finally you will get output page like below image.


![Dropzone Image Upload Tutorial In Laravel 7/8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kthvlfzppq94bimvu0zv.png)

---

> **_[Read More : Dropzone Image Upload Tutorial In Laravel 7/8](https://techsolutionstuff.com/post/dropzone-image-upload-tutorial-in-laravel-7-8)_**
Anyone else feeling exhausted all the time?
Tags: watercooler, help, career, productivity
Published: 2021-12-27 02:55:39

Is anyone else feeling burned out? I've been trying to wait out the virus when, really, this seems like the new status quo. I was really looking forward to leaving the house and travelling somewhere during December, but instead, I'm taking an extended staycation.

But four days into my staycation, I'm still. so. exhausted.

![too tired](https://media.giphy.com/media/eBCnpuRGBhQGY/giphy-downsized-large.gif)

How's everyone getting through this pandemic? Any tips for getting through the next 6 months? I've been in quarantine since March 2020. And the thought of staying in the house for another 18-24 months is damn near horrifying. This is me speaking as an introvert who loves to travel.
Meson Network enhance Arweave
Tags: web3, blockchain, cdn, cloud
Published: 2021-12-27 02:52:29

How to use [Meson Network](https://meson.network/) to enhance Arweave

Upload a file to Arweave network and get dataTxId.

```
{“name”: “Top Gun Maverick 2021 New Trailer Paramount Pictures_1080p.mp4”, “size”: 27433229, “lastModifiedDate”: 1624960183753,“dataTxId”: “-ZW0S2kqxYSRUHQW5AbBp046gLILFCZmxf37HoP1K4k”, “dataContentType”: “video/mp4”}
```

Open it in official gateway:

Now, let’s use Meson Network to optimize the global delivery for this file.

The format:

```
https://coldcdn.com/api/cdn/arweave/ + ‘arweave_file_id’
=>
https://coldcdn.com/api/cdn/arweave/-ZW0S2kqxYSRUHQW5AbBp046gLILFCZmxf37HoP1K4k
```

The link jumps to a specific node to serve the request, dekiekbbhkceexx is the hash of node.

```
https://arweave-dekiekbbhkceexx.shoppynext.com:1302/-ZW0S2kqxYSRUHQW5AbBp046gLILFCZmxf37HoP1K4k-redirecter456g
```

The difference between the storage layer and cache layer
The design philosophy of the storage layer and cache layer in blockchain world is quite different. The storage layer contains these principles at least:

Data Integrity: Take a proactive stance to protect referential integrity and reduce instances of redundancy or potential for inconsistency.

Consistency: The data consistency model specifies a contract between programmer and system, wherein the system guarantees that if the programmer follows the rules, storage will be consistent and the results of reading, writing, or updating storage will be predictable.

Confidentiality: Clients that desire for their data to be stored privately.

As for the cache layer, focus more on the experience while delivering the data to users, e.g. choose and optimize a better router, the load for the transfer system, the life cycle of the files stored in nodes.

## Meson Mechanism

We have the file-TXID in storage layer(e.g. arweave). The TXID will be mirrored to some meson nodes on the first user request. And if the requests for TXID increase, the TXID will be mirrored to more meson nodes. The auto-scaling mechanism will bring a very fast and good user experience.

## About Meson Network

[Meson Network](https://meson.network) is committed in creating an efficient bandwidth marketplace on Web3, using blockchain protocol model to replace the traditional labor based sales models, consolidating and monetizing idle bandwidth from long-tail users with low cost. Meson is the foundation of data transmission for decentralized storage, computation and the emerging Web3 dapp ecosystem.

Website: [https://meson.network/](https://meson.network)
Blog：[https://blog.meson.network/](https://blog.meson.network/)
Twitter: https://twitter.com/NetworkMeson
Telegram: https://t.me/mesonnetwork
Medium: https://medium.com/meson-network