teleren/devto huggingface dataset:
How To Search Comma Separated Values In Laravel
Tags: laravel, php, array, beginners
Published: 2022-08-10 03:45:50

In this article, we will see how to search comma separated values in laravel. Here, we will find specific id from comma separated values and will get comma separated values from the table. Here, we will search comma separated values using FIND_IN_SET() function. 

FIND_IN_SET() is a predefined function of PHP MySQL. Also, we will use FIND_IN_SET() with whereRow() of the laravel query builder for the laravel comma separated search example.

So, let's see how to find comma separated values in laravel 8, and get comma separated values in laravel.

First of all, we need to create 2 tables to find specific id from comma separated values. I have posts and tags tables on my website.

1. In the posts table we have "ID", "name", "tag_id".

2. In the tags table we have "ID", "name".

Here, we will find records that have ID "1" from the "tag_id" column of the posts table.

```
$search_id = 1;
$data = \DB::table("posts")
    ->select("posts.*")
    ->whereRaw("find_in_set('".$search_id."',posts.tag_id)")
    ->get();
```
 
---

**_[Read Also: Laravel 8 User Roles and Permissions Without Package](https://techsolutionstuff.com/post/laravel-8-user-roles-and-permissions-without-package)_**

--- 

And you will get output like the below.

```
Illuminate\Support\Collection Object
(
    [items:protected] => Array
    (
        [0] => stdClass Object
            (
                [id] => 1
                [name] => post1
                [tag_id] => 1,2
            )

        [1] => stdClass Object
            (
                [id] => 2
                [name] => post2
                [tag_id] => 1
            )
    )
)
```
 
---

You might also like:

**_[Read Also: Bootstrap Session Timeout Example In Laravel](https://techsolutionstuff.com/post/bootstrap-session-timeout-example-in-laravel)_**
Total War: Warhammer 3 Immortal Empires bất thần tiết lộ ngày công bố
Tags: gamedev, beginners, programming, tutorial
Published: 2022-08-10 03:45:00

Total War: Warhammer 3 Immortal Empires bất thần tiết lộ ngày công bố


Total War: Warhammer 3 Immortal Empires là phần trò chơi chiến thuật theo lược time thực đến từ nhà phát triển Creative Assembly sẽ ra mắt vào ngày 23/8.
Sandbox là gì? Những điều cần phải biết trước khi chơi trò chơi Sandbox
Aimbot là gì? Bọn họ có nên dùng Aimbot?
các thông tin về bảng Phong Thần Liên Quân điện thoại
Total War: Warhammer 3 Immortal Empires

Đây chắc là đc xem là tượng đài của chuyên mục chiến thuật và rất đông đảo người chơi bên trên toàn thị trường quốc tế ưa chuộng. Bắt đầu chỉ vừa mới đây chúng ta đã chào đón hàng loạt thể loại kinh điển như Lost Ark, Sifu, Horizon Forbidden West, & vừa mới qua nhất là Total War: Warhammer 3 Immortal Empires.

Total War: Warhammer 3 Immortal Empires

Immortal Empires là phần tiếp theo sau của Mortal Empires, một chiến dịch được khởi chạy cùng Warhammer 2, dựa trên các phe cánh & maps từ hai trò chơi trước tiên. Total War: Warhammer 3 đã liên tục nhận được những bình chọn tích cực từ mạng xã hội game thủ lẫn giới chuyên môn. Cuộc chơi nhận ăn điểm số trung bình là 88/100, qua đó trở thành trong số những loạt [game](https://gemxanh.com/thu-thuat/game-online/) giải pháp được nhìn nhận cao nhất trên nền tảng này trong vòng một thập kỷ vừa mới qua.
[https://dev.to/gemxanh/total-war-warhammer-3-immortal-empires-bat-than-tiet-lo-ngay-cong-bo-1m9c](https://dev.to/gemxanh/total-war-warhammer-3-immortal-empires-bat-than-tiet-lo-ngay-cong-bo-1m9c)
[https://dev.to/gemxanh/10-tro-choi-de-yeu-chem-chat-hay-nhat-hien-thoi-4bbi](https://dev.to/gemxanh/10-tro-choi-de-yeu-chem-chat-hay-nhat-hien-thoi-4bbi)
7 javascript/typescript playground
Tags: javascript, wordpress, typescript, programming
Published: 2022-08-10 03:37:00

## StackBlitz
>Stay in the flow with instant dev experiences. No more hours stashing/pulling/installing locally — just click, and start coding.

https://stackblitz.com/

StackBlitz is great since it supports backend you can use Express/NestJS/Koa etc.

Of course, it supports FE stack


## CodePen
>CodePen is a social development environment for front-end designers and developers.

https://codepen.io/

I think CodePen is awesome since we can find out really interesting stuff (3D stuff by threejs/amazing css animation/super cool UIs etc)


## JSFiddle
JSFiddle is very simple but still really functional. If you like a simple UI, JSFiddle will be good for you.

https://jsfiddle.net/


## JS Bin
JS Bin is one of the simplest javascript playgrounds. 

https://jsbin.com/


## PlayCode
>PlayCode is a website where you can type in code and it immediately shows you what you programmed in a little extra tab. All you need to do is select a programming language or a framework and you can start without needing to set up anything.

https://playcode.io/


## code.sololearn
code.sololearn.com supports some languages. If you want to use a few language with the same UI. code.sololearn.com would be a good choice.

https://code.sololearn.com/


## CodeSandbox
>CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster.

CodeSandbox is great since it supports FE and BE(node/nestjs) and it has a few unique templates.
CodeSandbox is my favorite. I always use React Typescript template.  

https://codesandbox.io/
BKK WEB: From Services to cross functional Smart Services Meetup 🤩 🎉
Tags: eventsinyourcity, eventdriven
Published: 2022-08-10 03:36:00

Join us for our BKK WEB event. We will have Gareth Davies, CTO of DDX, and Andrew Hamilton, GM of Hitachi Asia. Both will give you insight and knowledge about “Smart Services“.

--
📅 Date & Time: 17th August 2022 7:00 PM (GMT +7)

--
📍 LOCATION
Seven Peaks Software
88 Ratchadaphisek Road The PARQ (West Wing Unit 8-13, 7th Floor Khlong Toei, Bangkok 10110
Maps: http://ow.ly/H53050JVxYS

--
🎫 Register for FREE here: http://ow.ly/Uiqx50JVxYR

--
🤝🏻 SPONSORS
This event is sponsored by [Morphosis Apps](https://morphos.is/) and [Seven Peaks Software](https://sevenpeakssoftware.com/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05x3egjyxppqi64j9r6m.jpeg)
TailwindCSS + React best practices: The clean way
Tags: nextjs, tailwindcss, react
Published: 2022-08-10 03:34:00

I've using Tailwind for a long time and I've had so much pain and that uncomfortable feeling of seeing your code a total mess. I've sharped my strategies to write Tailwind throughout the time and I think I've come up with a good pattern to build more complex components.

The pattern uses CSS Modules, Talwind @apply and tailwind-merge. Let's say I want to build a Button, this would be the folder structure:

```bash
|
|-button
|--Button.tsx
|--Button.module.css
|--index.ts
|
```

And the code like this:

## Button  /button/Button.tsx
```jsx
import s from './Button.module.css'
import React from 'react'
import cn from 'classnames'
import Spinner from 'components/spinner'

type ButtonProps = {
  children: React.ReactNode
  fullWidth?: boolean
  loading?: boolean
  variant?: 'filled' | 'outlined'
  color?: 'primary' | 'secondary'
  size?: 'base' | 'lg'
} & Omit<React.ComponentProps<'button'>, 'className'>

const Button = ({
  children,
  variant = 'filled',
  color = 'primary',
  size = 'base',
  fullWidth,
  loading,
  disabled,
  ...props
}: ButtonProps) => {
  const classes = cn(s.root, s[variant], s[color], s[size], {
    [s.fullWidth]: fullWidth,
  })

  return (
    <button className={classes} disabled={disabled || loading} {...props}>
      {children}
      {loading && (
        <span className="ml-1.5">
          <Spinner className={s.spinner} />
        </span>
      )}
    </button>
  )
}

export default Button
```


## Styles  /button/Button.module.css
```
.root {
  @apply inline-flex items-center justify-center rounded-full font-semibold duration-150 disabled:pointer-events-none disabled:opacity-75;
}

.fullWidth {
  @apply w-full;
}

/*
 * SIZES
 */
.base {
  @apply px-8 py-3;
}

.lg {
  @apply px-12 py-5;
}

/*
 * VARIANTS & COLORS
 */
.filled.primary {
  @apply bg-[#FAA806] text-[#FFFFFF] hover:bg-[#EE9F04];
}

.filled.secondary {
  @apply bg-[#373E4B] text-[#97A3B7] hover:bg-[#343A47];
}

.outlined.primary {
  @apply border-[#FAA806] text-[#FAA806];
}

.outlined.secondary {
  @apply border-[#373E4B] text-[#373E4B];
}

/*
 * LOADING INDICATOR
 */
.primary .spinner {
  @apply fill-[#bc7e03] text-white;
}

.secondary .spinner {
  @apply fill-[#292e38] text-white;
}
```

## Usage (with NextJS Link)
```jsx
<NextLink href="/signin" passHref>
  <Button fullWidth {...{ disabled, loading }}>
    Register
  </Button>
</NextLink>
```

## Source code (Stackblitz)
{% embed https://stackblitz.com/edit/github-hjypmo?file=pages/account.tsx %}
Begin Golang : "time"
Tags: go, withscreenreader, beginners, codenewbie
Published: 2022-08-10 03:31:00

This article is a part of **Begin Go** series: containing my experience learning Go language. Any feedback would be very appreciated.

## Parsing time `string`
In order to complete exercise from [exercism's go track][ex1], I stumbled on a problem when parsing time `string`. 
I tried to parse `7/13/2020 20:32:00` but I keep getting time with empty value : `0001-01-01 00:00:00 +0000 UTC`.

### Custom `Layout`
In Go language, we format and parse time with the pattern-based `Layout` which has type `string`. You can read the article in [gobyexample.com][go1]

This is the code I used to parse the string above :
```Go
date := "7/13/2020 20:32:00"
t, _ := time.Parse("01/02/2006 15:04:05", date)
fmt.Print(t)
// 0001-01-01 00:00:00 +0000 UTC 
```

### With or without leading zero
My mistake that I used leading zero to parse the date and month when I should not used the leading zeros. The parse was successful after I change my code to :

```Go
t, _ := time.Parse("1/02/2006 15:04:05", date)
```

The misuse of leading zero for date, month, etc could lead to potential bugs. So make sure to always consider whether we should use the leading zero or not in `Layout` to format / parse time.

### Remembering The `Layout` Time Representation
Go has different time representation to format time compared to other languages. Other languages usually use time representation like `HH` or `m` to represent month or hour.

Go time representations are as below :

| Representation | Representing |
| -- | -- |
|`1` or `01` | month|
| `2` or `02` | date |
| `15` | hour |
| `04` | minute |
| `05` | second |
| `2006` | year |
| `07:00` | time offset (time zone) |

The question is should we have to lookup for those time representations everytime we use `time` ? Or maybe there is other way to remember those symbols ?

Looking at the table above, we can see a pattern that matches a well known time format with 1 exception. Code block below will show how I could remember the time representation :

```Go
// Well known time format
"Jan 02 2016 15:04:05+07:00"
// Move back the year, right before time offset / time zone.
"Jan 02 15:04:05 2016 +07:00"
// Changing to number presentation, 
// will show a pattern of an incrementing numbers
"01 02 03:04:05 2016 +07:00"
```

-----------

## References
- [Time format and parsing on gobyexamples][go1]

## Attribution
- Go Gopher character is created by [Renee French]

[go1]: https://gobyexample.com/time-formatting-parsing
[ex1]: https://exercism.org/tracks/go/exercises/booking-up-for-beauty
[Renee French]: http://reneefrench.blogspot.com
Dev Journal - Day 2 - Odin Project - JS Fundamentals - Clean Code
Published: 2022-08-10 03:11:00

**Importance of Clean Code Practices**
To make it easier to read and understand previously written code, whether it be my code, or code that will be referenced later in a larger professional codebase.

**What I Learned**
Clean code principles lead to source code that is easier to read, debug, and test. Implementing clean code principles is a foundational skill that pays off especially when it's time to refactor code or test it test. A few principles I plan to adopt are 

- Review and clarify code logic (perhaps using pseudocode or flow diagrams) prior to blindly typing into a debugger
- Use descriptive naming conventions for variables (noun phrases e.g “numberOfItems) and functions (verbs e.g getCount() )
- Write explanatory, clarifying comments as-needed and not as a crutch to explain my code
- Avoid extremely large functions, and instead break up large functions into smaller digestible ones
- Correctly and consistently indent code to make it easier to read and follow 


**Additional Clean Code Principles I Liked**

- [On Comments:](https://blog.codinghorror.com/coding-without-comments/) _While comments are neither inherently good or bad, they are frequently used as a crutch. You should always write your code as if comments didn't exist. This forces you to write your code in the simplest, plainest, most self-documenting way you can humanly come up with._


- [On Personal Style:](https://www.martinfowler.com/bliki/CodeAsDocumentation.html) _A professional programmer is prepared to bend her personal style to reflect the needs of the team. So even if you like ternary operators, don't use them if your team doesn't find them easy to understand. You can program in your own style on your personal projects, but anything you do in a team should follow the needs of that team._


**References**
1. [The Odin Project - Clean Code](https://www.theodinproject.com/lessons/foundations-clean-code)
2. [Pluralsight - Steps to Clean Code] (https://www.pluralsight.com/blog/software-development/10-steps-to-clean-code)
My Internship Experience
Published: 2022-08-10 03:02:24

Hi, I'm a beginner on a software development journey with a passion for learning and development. Back in 2020, I was fortunate enough to intern with an amazing team of developers. Since then, I have been temporarily serving in the mandatory military in my country.

## Internship Experience

The team that I was assigned to was responsible for developing and running messaging services in a microservice architecture.

The team lead was my mentor, and he described briefly what microservices were and what their team was responsible for. My mentor often took extra time to explain more about the architecture and why the team made each design choice.

My first job was to get familiar with the code base. Luckily, the team had some deprecation work. While I was doing deprecation work, I made my first ever pull request and also my first ever contribution to production code. I was also able to experience a little bit of DevOps by making sure that the pipeline ran successfully.

After I got familiar with the code base, I was given a chance to code a message exchange interchange, which was responsible for delivering messages from source to destination in a microservices architecture. It was a lot of fun working with them and seeing my contributions deployed to production.

Our team decided to migrate from Bitbucket and Jfrog Pipelines to Github and Azure Pipelines. I was also able to learn about CI/CD and experiment with various technologies.

One of our team members was in charge of migrating the SFTP server from Sterling File Gateway to AWS. It was expected that running the server on AWS would be almost half the cost of the Sterling File Gateway. I worked on researching if certain things were available in AWS, and I also worked hands-on with AWS labmda for POC of the migration.

## Conclusion

I have learned so much in my short internship. Even th

ough I was not able to dive deeper into the concepts and technologies that I worked with, I am extremely grateful that I was exposed to so many important concepts that were not taught in school.

Before my internship, I thought programming was all about algorithms, data structures, networking, and databases. My internship opened my eyes to a whole new world of software development. I am excited about my journey to learn more and become a better software developer.
bootstrap 4 navbar
Tags: codepen
Published: 2022-08-10 02:30:18

<p>With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl. ... sm (stacks the navbar vertically on extra large, large, medium or small screens).</p>

{% codepen https://codepen.io/piyushpd139/pen/gOYvZPG %}
برمجة موقع ملاحظات كانوا نحضر اكل
Tags: html, css, javascript
Published: 2022-08-10 02:20:00

<center>
مرحبا, اليوم راح نعمل موقع ملاحظات باستخدام
html وcss وjavascript
</center>

داخل فولدر

1. نحضر ملعقة من فايل html
2. نحضر ملعقة من فايل css
3. نحضر ملعقة من فايل javascript

![image presenting how to create file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hobjgrahszozp7k1757.png)
 
---

## html نبدا ب

نكتب اكواد الصفحة اساسية و نربطه مع فايلات الاخرى

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ملاحظات</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body></body>
</html>
```

بعدين نضيف اساس الطبق

```html
<div class="parent-conteiner">
  <button class="save-btn">حفظ</button>
  <input type="text" class="input" placeholder="ملاحظاتك" dir="rtl" />

  <div class="notes"></div>
</div>
```

## css اشوية

```css
body,
html {
  margin: 0;
  height: 100%;
  background-color: rgb(240, 240, 240);

  /* كود لجعل كل ايتمس في المنتصف */
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent-conteiner {
  background-color: rgb(38, 111, 156);
  padding: 20px;
  border-radius: 5px;
}

.input {
  padding: 5px;
  border-radius: 5px;
  background-color: rgb(57, 142, 194);
  border: none;
  color: white;
  font-size: 20px;
}
input::placeholder {
  color: white;
}

.save-btn {
  padding: 5px 10px;
  border-radius: 5px;
  background-color: rgb(57, 142, 194);
  border: none;
  color: white;
  font-size: 20px;
  margin-top: 10px;
}
```

> شكل طعام الحالي
> ![img-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txojdwu70ef78b04z6ro.png)

---

## <center>هذا جان مقبلات الطبق الاساسي لازم وي اشوية جافاسكريبت</center>

```javascript
const input = document.querySelector(".input");
const button = document.querySelector(".save-btn");
const notes = document.querySelector(".notes");

button.addEventListener("click", function () {
  const note = input.value;
  notes.innerHTML += `<p class='note'>${note}</p>`;
  input.value = "";
});
```

> الاكلة خلصناه تقريبا, نكدر نضيف ملاحضات كما في الشكل
> ![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtbtbgebvhhz8spppxi9.png)

<center>css اشوية بعد</center>

```css
.note {
  font-size: 20px;
  color: white;
  background-color: rgb(57, 142, 194);
  padding: 5px;
  border-radius: 5px;
}
```

### الناتج

{% codepen https://codepen.io/omer-os/pen/ExEpXXv %}



> بالعافية 😅
Simple guide to create package in Github registry
Tags: github, npm, beginners, opensource
Published: 2022-08-10 01:38:00

Creating a package in the GitHub registry is very simple.

Firstly `package.json` needs to be updated; so that name, repository and publishConfig does not mismatch.

```
  "name": "@<owner>/<repo-name>",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/@<owner>"
  },
  "repository":"https://github.com/<owner>/<repo-name>.git",

```

Secondly, [create a `GITHUB_TOKEN` ](https://docs.github.com/en/enterprise-server@3.4/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)which would be used in verification.
 
The package can be published by: 
a) GitHub action or 
b) manually in terminal

**a) To publish with GitHub action**
add a workflow in `.github/workflows/<workflow-name>.yml`
```
name: Node.js Package

on:
  push:
    branches: ["<branch-name>"]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 12
      - run: npm ci
      - run: npm test

  publish-gpr:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      packages: write
      contents: read
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 12
          registry-url: https://npm.pkg.github.com/
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}


```

**b) publish package manually in terminal**

Firstly, create a `.npmrc` file at the root of the directory
```
@<owner>:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<GITHUB_TOKEN>
```
Secondly, login to npm 
`npm login --scope=@<owner> --registry=https://npm.pkg.github.com`

Finally, publish the package.
`npm publish`
[sample project in GitHub](https://github.com/Sifatul/simple-github-package/tree/publish-manually)

## How to use a private package in another repository

create a `.npmrc` file at the root of the directory with github token having access to the private package
```
@<owner>:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<GITHUB_TOKEN>
```

`npm install` will install the package normally

PS: for public package in github repository no additional task is required


**Useful links:**
1. [quickstart](https://docs.github.com/en/packages/quickstart)
2. [working-with-the-npm-registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry)

Or 
if you want to [publish package in npm registry](https://dev.to/sifatul/simple-guide-to-create-react-cra-component-test-locally-and-publish-to-npm-119c)
I am building a web site
Tags: webdev, jamstack, programming, tutorial
Published: 2022-08-10 00:46:00

## I am going to make a website, a blog website.
 I have been learning web development on my own for about a year and want to see a project through from start to finish. I always loved writing as a kid and a blog site appeared simple enough. It will be a place to collect my thoughts and hopefully help someone else along the way. Since I am starting a blog, why not write about the process? I am fairly new to development, so this is a great way for me to document my development as a developer(say that five times fast). I will then put this series on the site as its first set of archives.I’ll walk you through the tools I am using, why I made the decisions I did and how they affect the final product.

## So what’s important for a blog site?
 Easy to update, fast to load and has a well organized content filing system that’s searchable. After looking at different site architectures I decided to construct the site using a JAM (javascript, apis and markup) stack with a  SSG or static site generator.  For this I chose 11ty, a node package installed locally in my working directory. Each article will be a markdown file that will be rendered as its own html page. For more information on what an SSG is and why I chose 11ty stay tuned for the next installment of this series.

## Now let's talk about hosting because websites need a place to live too.
 There are lots of hosting services out there, you can also host in house if you’re savvy enough. For a simple blog site I’m going with a hosting service. I have chosen Netlify for my project. I have chosen them for a few reasons. First of all, a great free tier. It is important to me that this series remains as accessible as possible. Netlify also offers continuous deployment from a github repo making this one a no brainer.

## Which leads me to the use of git and github for version control. 
They are well documented, widely used and they integrate well with each other as well as netlify. While not necessary github plays an integral role in how the hosting service and updating will work for this project specifically.  It is a best practice to use version control for any type of serious development.
 

## That wraps up the basics
Why I am doing this and how I plan to do it. See you next time when we talk in depth about static site generators.