teleren/devto huggingface dataset:
#2 Building Headless Commerce - Adding Content with Storyblok CMS
Tags: javascript, typescript, nuxt, vue
Published: 2022-06-27 09:55:00

I always enjoyed working with Content Management Systems as they are really enjoyable to use. The experience of real time content editing on your page is just amazing and believe me you will like it too!

I have written already some articles about Storyblok but this time, I decided to record a video about it!

{% youtube jclQGukkUXg %}

In this video, we will be adding a Headless CMS Storyblok to our previously created Headless Commerce application. If you have not seen this video yet (here is the link -> https://www.youtube.com/watch?v=QK6wPHFiRyM), I highly encourage you to do that as it explains really well the concepts of e-commerce and its development. 

We will dynamically add content from Storyblok Dashboard to our Nuxt 3 application.

If you get lost at some point here is the ithub repo -> https://github.com/Baroshem/nuxt-shopify-tailwind and branch `feat/storyblok`.

## Code

First thing we need to do is to install the required dependencies:

```bash
yarn add @storyblok/nuxt axios
```

Next, add `@storyblok/nuxt` module to the `modules` array in our `nuxt.config.ts` file and add required configuration:

```ts
  modules: ["@nuxtjs/tailwindcss","nuxt-graphql-client", "@storyblok/nuxt"],

  storyblok: {
    accessToken: process.env.STORYBLOK_ACCESS_TOKEN
  },
```

Remember to also add the new environment variable in `.env` file:

```
STORYBLOK_ACCESS_TOKEN=<YOUR_TOKEN>
```

Let's add props in `HeroBanner.vue` component:

```ts
<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  subtitle: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    required: true,
  },
})
</script>
```

Finally, let's modify the template to by more dynamic:

```html
<template>
  <section>
    <img
      :src="image"
      class="h-[500px] w-full"
    />

    <div class="mx-auto px-32">
      <div
        class="text-7xl font-bold text-center text-gray-800 rounded-lg shadow-lg py-16 px-12 bg-white/70 -mt-[170px] backdrop-blur-xl"
      >
        <h1 class="mb-3">{{ title }}</h1>
        <span class="text-green-600">{{ subtitle }}</span>
      </div>
    </div>
  </section>
```

## Storyblok

Let's create a new component for our HeroBanner:

![Storyblok component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rm72qz1d2q05o2uokjgf.png)

Finally, let's add the component to our content page and see the real editing experience:

![Storyblok content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3yw2fzaru6sa62zkorl.png)
 
## Summary

Well done! You have just added Storyblok CMS to your Headless Commerce application. Keep in mind that this is just the beginning of the content creation and there are more things to discover like plugins for e-commerce.
How to use SQL SELECT to retrieve one or more columns of data
Tags: sql
Published: 2022-06-27 09:53:14

This article describes how to use SQL’s SELECT statement to retrieve a single table column, multiple table columns, and all table columns. It also describes how to return different values and how to comment the code.

Link to the original article:https://www.developerastrid.com/en/sql/sql-select/
Material UI Grid for generating the mentioned design in React JS
Tags: materialui, react, grid
Published: 2022-06-27 09:52:03

I want to generate the below mentioned design in react js using material ui grids so that it stores the following information and stays responsive. Kindly please help as what can be the code. I would appreciate all the help.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n5hpgoob6akw1ikmccr.png)
How to Customize the Logarithmic Axis of Vue Charts
Tags: vue, webdev
Published: 2022-06-27 09:34:05

Learn how easily you can add a logarithmic axis to the Syncfusion [Vue Charts component](https://www.syncfusion.com/vue-ui-components/vue-charts) and customize it with various built-in options. In this video, you will learn how to display higher-order and lower-order magnitude values in the vertical axis of a chart instead of numeric values by using a logarithmic axis. You’ll see how to use available axis customization options like setting custom ranges and intervals for the y-axis, display y-axis values with different log base values, and format axis labels. 

**Product overview**: https://www.syncfusion.com/vue-ui-components/vue-charts

**Explore our tutorial videos**: https://www.syncfusion.com/tutorial-videos

**Download example from GitHub link**: https://github.com/SyncfusionExamples/customize-logarithmic-axis-in-vue-charts

{% youtube zAg0iisGJ-Q %}
What's Something New That You Learned in The Past Week?
Tags: discuss, watercooler, programming, opensource
Published: 2022-06-27 09:19:59

As a programmer, it's important to always keep learning!

What was something you learned in the past week? Whether it's something small or big, share it with others as they can benefit from it as well!

P.S: If you're looking for something new to learn, you can get started with [Medusa](https://github.com/medusajs/medusa#quickstart) in a few minutes! ✨
t3 stack and my most popular open source project ever
Tags: webdev, opensource, typescript
Published: 2022-06-27 09:10:39

[create-t3-app](https://github.com/nexxeln/create-t3-app) recently reached 90 stars on GitHub and is my most popular open source project with a lot of people contributing. Now you may be wondering, what the hell is it? Let's take a look at the t3 stack and how you can use create-t3-app.

## t3 stack

The t3 stack was made by [Theo](https://www.youtube.com/c/TheoBrowne1017) who is a really cool dev and makes awesome content on YouTube. The stack consists of:

- [Next.js](https://nextjs.org)
- [tRPC](https://trpc.io)
- [TailwindCSS](https://tailwindcss.com)
- [TypeScript](https://typescriptlang.org)
- [Prisma](https://prisma.io)

I love this stack, if you want to know more about them checkout [init.tips](https://init.tips) and [this twitter thread](https://twitter.com/DhravyaShah/status/1540589276810711040) from @dhravya. 

The only downside of this stack is the boilerplate, I had to open the docs, install all the packages, create a bunch of files just to set it up. 

Theo had also mentioned on stream how it would be very convenient to set up a project just by running `npx create-t3-app`. So I did just that!

## create-t3-app
create-t3-app makes it really convenient to scaffold a starter project using the t3 stack.

### Usage

```bash
npx create-t3-app@latest
# or
yarn create t3-app
# or
pnpx create-t3-app@latest
```

It will let you select the packages you want and install them and create all the files those packages need.

I started working on the CLI in May and back then I had no experience with Node CLIs, but it was definitely a great learning experience for me.

Now the project has matured a lot and it's amazing to see Theo's community opening issues and contributing everyday, it's really great.

## Maintaining Open Source
I have a lot of respect for OSS maintainers now because honestly, it is a really hard job. Looking at issues, reviewing and discussing PRs, it's definitely a bit tiring. 

I recently had burnout from this and took a 2 day break and just built a bunch of static sites. Theo's community is awesome though, we agree on most things and I rarely write code for the CLI now, people just open issues and make PRs, I just have to review and merge them.

Overall this project has been a really great experience, I learnt so many things, from node CLIs to maintaining open source. Please do try the CLI out and open issues if you find bugs.

Github: https://github.com/nexxeln/create-t3-app
Website: https://create.t3.gg
t3 Stack: https://init.tips
Theo: https://twitter.com/t3dotgg

Thank you for reading!
What is a cookie? (website)
Tags: html, cookies, programming, webdev
Published: 2022-06-27 09:08:05

Cookies were introduced to store data. Cookies are used to store information on the client system. Cookies are sent to the server with the request and to the client in response, therefore cookies are sent to the server with every request.

Cookies aid in providing a better user experience and tailored content to the user. Cookies can be created, updated, or read using JavaScript: document.Cookies .

Cookies are classified into two categories.

a) Session cookies
They do not have any special properties such as Expire or Max Age. When the user exits the browser, they are removed.

b) Persistent cookies
They have specific properties such as Expire or Max Age. They are not removed when the browser is closed, but rather when specific attributes are met.

source : [here](https://www.xenonstack.com/insights/local-vs-session-storage-vs-cookie#:~:text=For%20most%20cases%2C%20we%20use,is%20closed%20by%20the%20user.)

That's all to this article.

If this article was helpful to you, make sure to send this to your friend or someone who might need and follow me on twitter [@Hxrshxd ](https://twitter.com/Hxrshxd)for more.
Laravel Carbon Get All Months Between Two Dates Example
Tags: webdev, laravel, php, tutorial
Published: 2022-06-27 08:31:56

Today what you are going to learn:
Hi Brother,

This tutorial will provide lesson of laravel carbon get all months between two dates. step by step explain laravel carbon get all months. This post will give you simple lesson of carbon get all months between dates. We will use get all months between two dates laravel carbon. Hello Brother, Creating a basic lesson of get months between two dates laravel.

you can easily get all months between two dates using carbon in laravel 6, laravel 7 and laravel 8 version.

let's see simple lesson bellow:

## [read more](https://freecoder.co/post/laravel-carbon-get-all-months-between-two-dates-example-1153)
Laravel Vue Datatables Component Example
Tags: webdev, laravel, vue
Published: 2022-06-27 08:29:14

Today what you are going to learn:
In this tutorial, i want to share with you how to implement datatables with vue js laravel. i will share simple lesson of vue datatable in laravel 5.8 application using vuejs-datatable npm. we will use vuejs-datatable component for vue datatables in laravel 6, laravel 7 and laravel 8 app.

datatable is more popular library in javascript. datatable provide search, sorting, pagination etc with user friendly layout. so you also want to implement datatables with vue js laravel app then this lesson will help you.

In this lesson we will create users table with add some dummy records then we will create one route for getting all users. in vue ja code we will install vuejs-datatable package and using axios get request to get all users. Using vuejs-datatable we will display in table.

We will create step by step implementation of vue datatable using vuejs-datatable npm package with laravel. you can see following screen shot. You can also download code and check demo too.

## [read more](https://freecoder.co/post/laravel-vue-datatables-component-example-8451)
What Situations trigger your Imposter Syndrome the most?
Tags: webdev, watercooler, career, discuss
Published: 2022-06-27 08:25:41

I've been thinking a lot about impostor syndrome lately - when I got started in web development, I was sure once, I _just knew more / had more experience / figured out that one problem_, it would magically go away. 

Well. Of course, it didn't 🤷🏻‍♀️

Many days, I'm doing fine and I found ways to live with it.  Other days I feel like I'm stuck waist-deep in a puddle of misery and am very sure I will get fired any second now - as people are bound to find out that I have absolutely no clue what I am doing. 

**What situations trigger your impostor syndrome? Have you identified patterns?**

For me, anything that remotely (very remotely!) questions my job security definitely sparks lots of anxiety. And, unfortunately, being confronted with new tasks or problems. I am exceptional at convincing myself I should undoubtedly know this - and that not meeting this expectation makes me less of a developer / an imposter. 

**How about you?**
Interfaces binding with implementations - Laravel
Tags: php, laravel, webdev, programming
Published: 2022-06-27 08:23:26

In the beginning, I faced a problem with the concept of Interfaces and its dealing with class, but with the passage of time and use it in projects, the idea was clarified and its importance in organizing the code and ease of dealing with it, and here is this article that explains even in a simple way how to deal with Interfaces and how to operate it in the AppService Provider

- https://www.hibit.dev/posts/51/interfaces-binding-with-implementations-in-laravel

I hope you benefit from the article and I wish you a happy code.
How to flash NVIDIA Jetson devices with Balena using WSL2 and Docker
Tags: jetson, wsl2, docker, balena
Published: 2022-06-27 08:22:44

This post will show you how to flash NVIDIA Jetson devices (such as Nano, Xavier NX) with WSL2.

## Prerequisites:

- Your Windows system is running WSL2 as explained in following [guide](https://docs.microsoft.com/en-us/windows/wsl/install#install-wsl-command).
- Install [Docker Desktop for Windows](https://docs.docker.com/desktop/windows/install/)
- [Balena](https://dashboard.balena-cloud.com/) account. 


## Install usbipd-win
Install [usbipd-win](https://github.com/dorssel/usbipd-win#how-to-install) package by opening a PowerShell window and running following command.
```
winget install usbipd
```

Subsequently, open a (Ubuntu 20.04 LTS) WSL2 window and install the user space tools by running
```
sudo apt install linux-tools-virtual hwdata
sudo update-alternatives --install /usr/local/bin/usbip usbip `ls /usr/lib/linux-tools/*/usbip | tail -n1` 20
```

## Download Balena image for Jetson 
Download a version of a Balena image from a specific fleet of devices and copy the image to WSL2.

## Attach Jetson device to WSL2
Before a Jetson device can be flashed it has to be in force recovery mode. Once in force recovery, connect the your Jetson device with an USB cable. Open a `PowerShell` window and run following command. It will list all the USB devices connected to Windows.
```
> usbipd wsl list
BUSID VID:PID    DEVICE                           STATE
1-1   046d:c534  USB Input Device                 Not attached
1-2   0955:7f21  APX                              Not attached
```
Note the `VID:PID` of the `APX` Device, replace and run following command
```
usbipd wsl attach --auto-attach --hardware-id 0955:7f21
```
Open a WSL2 window and run `lsusb` in the command window. The device is attached to WSL2 and ready to be flashed.

## Flash Device
Clone [docker-jetson-flash](https://github.com/pgils/docker-jetson-flash) in the same WSL2 folder as the unzipped image and run following command after replacing `<BALENA.IMG>` by the appropriate image name.
```
./djetson-flash -m jetson-nano-emmc -f ../<BALENA.IMG> -p
```
After downloading the appropriate Docker images the flash procedure will start!
DOCUMENT OBJECT MODEL(DOM)
Tags: javascript, dom, programming, beginnersjs
Published: 2022-06-27 08:20:48

**INTRODUCTION TO DOM**

When a web page is loaded, the browser creates a Document object model(DOM) of the page. which is the tree representation of an HTML document and the DOM tree is modified with JavaScript.

```html
<table>
  <row>
    <tr>
      <td>......</td>
    </tr>
    <tr>
      <td>.....</td>
      <td>.....</td>
   </tr>
  </row>
    
</table>

```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi2gqoddvbhg71c9qvlm.png)

**JavaScript And DOM**

1. JavaScript can add new HTML elements and attributes.
2. JavaScript can change all the CSS styles in a page  
3. JavaScript can add and listen to HTML events like onScroll hover onclick, etc. 
4. JavaScript can change any HTML elements and attributes of a page. 
5. JavaScript can remove existing HTML elements and attributes.

Now, how do we add JavaScript to an HTML documents

```html
<script> 
  console.log('active');
</script>
```

checking your console, would prompt that it is active.

**SELECTING HTML DOCUMENTS**
This is when selecting HTML with JavaScript, and it provides a DOM method
```js
    getElementById('targeted-html-doc');
```
getElementById is a DOM method which accepts the HTML elements ID,and returns the HTML elements matching that Id.
example:
```js
   document.getElementById('#navBar');
```
You need to pass the ID of the elements as an arguments, if no element matches the Id then it returns null.

**Query Selector**
Query selector allows you to use CSS selector to select HTML elements. It is the new way in JavaScript to select elements. There are two types of query selector;
```js
      querySelector();
      querySelectorAll();
```

query selector is a DOM method. It's accepts the CSS selectors string and only returns the first HTML elements, matching the query,
example;
```js
    document.querySelector('#footer span');
```
You need to pass the CSS. Selector strings as an argument,If no elements matches the Selector string, then it returns null.

while 
querySelectorall is a DOM method that accepts the CSS selector string, and return all of the HTML elements, matching the query.
example;
```js
    document.querySelectorAll('#footer span');
```
we need to pass the CSS selector string as an argument, If no element that matches, then it returns an empty array
Version Control in Real World projects(Git Workflows)
Tags: git, github, agile, devops
Published: 2022-06-27 08:03:58

> 
In this article we will see how to decide which Git Workflow is the best for your project!

You can also visit [Git Workflow | Atlassian](https://www.atlassian.com/git/tutorials/comparing-workflows#:~:text=A%20Git%20workflow%20is%20a,in%20how%20users%20manage%20changes.) to know more about popular git workflows.

I feel practically implementing Git Workflow is always a modified version of common workflows like Centralized Workflow, Feature Branch Workflow, Trunk-Based Workflow....etc.

Let us see the important parameters that are crucial while designing a Git Workflow for your project.

- **Team Size**- _"too many cooks spoil the broth!"_
The code maintenance and management becomes challenging and is directly dependent upon the number of developers working on a project. For instance, if the team size is just 2-3 developers or working alone, a centralized workflow can be a suitable option. Tasks like code reviews, branch policies setup, code quality check and so on are not applied in this approach. However when you need to manage large teams, it is necessary to create multiple branches.


- **Developer's Forte** _"Less efficiency more work!"_
It is important to understand the overall efficiency of the team. I would put it this way...
More Junior Developers---->  Complex Version Control
In this scenario, senior developers closely monitor the work done by juniors. Stricter control is required before merging the code to the master or release branch.
 More Senior Developers----> Simple Version Control
Expert developers can just maintain a single branch iterating quickly as the requirement comes up. This is nothing but Trunk-Based Development or Trunk Based Workflow where you maintain just master and release branches.


- **Proof of Concept(POC) or Established Product**-_"Start easy finish strong!"_
In very initial stages or while working on POCs creating multiple branches like dev, feature, release, etc is completely redundant.
In this phase generally the customer frequently requests for a fundamental change in the requirement. Start with a simple workflow and as the product grows improve your design. Just make sure you have an efficient collaboration.
In case of an established product it is better to maintain some long-lived branches like dev, release, feature for efficacious management following workflows like Gitflow Workflow. You can definitely modify it as per the requirement. 
Note: _Long lived branches have a higher risk of merge conflicts, best to keep your features small._

I have just discussed the most important ones.....there are many more!


Trunk- Based Workflow is considered as the DevOps best practice and also very popular today!

But what is popular is not always the best option! All the best! Keep on enhancing your workflow with time!
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-06-27 08:00:28

---
title: "A Quick 10-Second Programming Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12597371ee1.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why did the programmer come home crying?"

___A:___ His friends were always boolean him.
 -->
3 Amazing Tech Job Boards
Tags: jobs, jobboard
Published: 2022-06-27 08:00:04

I am product manager of a tech job board and my job is to look at job boards all day. I try to find those features of a job portal that are really liked by the tech people and try to implement it in my work. So in this article I want to share with you some amazing tech job boards and why I like them. 

[The Muse.com](themuse.com)
One of the big changes when it come to white-collar jobs is that job seekers usually first look for a company that they like and then check if the company has suitable job offering for them. The Muse is a great job board because they make very beautiful, useful and rich company profiles. This makes it easier to find an employer that you like and then on the same page check if you can find the right job ad for you. 

[DEV.BG](http://dev.bg)
DEV.BG is the biggest and most used tech job board in Bulgaria. Just like The Muse they have rich and very useful company profiles and being a niche job board they have structured the job ads in a unique way. The rich company profiles help also with the job search, for example you can look for job ads only from product companies. 

[Japan Dev](https://japan-dev.com/ )
Japan Dev is a job board for tech positions in Japan. Great job board with excellent job search. And yes, you can filter if the jobs require Japanese or you can work only with English.