teleren/devto huggingface dataset:
Composition Over Inheritance in Go
Tags: go
Published: 2022-05-20 05:21:17

เมื่อเราพูดถึงประโยคนี้ 

> Composition Over Inheritance

ในด้านของคนที่เขียน Go เอาจริงๆ ถ้าจะให้ตอบแบบห้วนๆเลยก็คือ เนื่องจาก Go ไม่ใช่ภาษา OOP มันเลยไม่มีการทำ Inheritance แต่สามารถใช้ Composition มาทดแทนได้

ทีนี้ก็ต้องมาดูกันว่า แล้วเราต้องการอะไรจากการทำ Inheritance ก่อน จะได้เอา Composition มาเทียบว่าแทนกันได้จริงหรือไม่ ซึ่งหลักๆเท่าที่รู้ก็จะเป็นเรื่อง

- ลด duplicated code
- reusability ไม่ต้องเขียนโค้ดซ้ำ โดยเฉพาะตัว base จะไม่ถูกแก้ไข
- extensibility เอาไปต่อเติมเพิ่มขยายได้โดยใช้ base เดิมมาตั้งต้น

เอาแค่นี้ก่อน เพราะถ้ามากกว่านี้เราจะไป 4 pillars ก็ละ 😅

เรามาดูท่ากันก่อนว่า composition ใน Go เขาทำกันอย่างไร

```go
type Context struct {
  kv map[string]string
}

func (c *Context) Get(k string) string {
    return c.kv[k]
}
```

สมมุติว่าเรามี type ชื่อ Context และ type นี้มี 1 เมธอดชื่อ Get โดยมันจะสามารถดึงเอาค่า key/value ออกมาจาก Context ได้ด้วยการให้ key ลงไป

ทีนี้เราอยากสร้าง BusinessContext มาใช้งาน โดยมันจะมีความสามารถเดิมของ Context อยู่ด้วยแบบนี้

```go
type BusinessContext struct {
    Context
}

func (c *BusinessContext) Name() string {
    return c.Context.Get("name")
}
```

> ข้อสังเกตการใช้ c.Context.Get คือการเรียก .Get ผ่าน embedded field

จากตัวอย่าง เราเรียกว่า **embedded field** คือการ embed type Context เข้าไปใน BusinessContext ซึ่งการทำแบบนี้ จะทำให้ instance ของ BusinessContext จะยังสามารถใช้ .Get ได้เหมือนเดิม เช่น

```go
ctx := &Context{kv:map[string]string{"name":"Pallat"}}
bctx := &BusinessContext{ctx}

println(bctx.Get("name"))
println(bctx.Name())
```

จะเห็นว่าเรายังสามารถเรียกใช้ .Get ผ่าน bctx ได้เหมือนใช้ ctx.Get และสิ่งที่เพิ่มเติมเข้าไปคือสามารถใช้ .Name ได้ด้วย

แต่ก็มีข้อควรระวังในการทำนิดหนึ่งคือว่า กรณีที่เราจะทำการ Override ของเดิมเช่น Get

```go
func (c *BusinessContext) Get(k string) string {
    return c.Get(k) + "."
}
```

แบบนี้จะมีปัญหา เพราะในฟังก์ชั่น Get ที่เราเขียนขึ้นมาใหม่ มันมีเรียก c.Get โดยไม่ได้ระบุชื่อ field แบบนี้ `c.Context.Get` อันที่จริงมันเขียนแบบนี้ได้ แต่มันจะทำงานจริงไม่ได้ เพราะ c.Get มันเหมือนเรียกตัวเองแบบ recursive

ถ้าต้องการเรียก .Get จากตัว base ที่เรา embedded เข้ามา ต้องระบุ `c.Context.Get` ลงไปตรงๆ โดยเฉพาะเมื่อเรามีการ override method ซึ่งถ้าจะให้ดี ก็ควรระบุชื่อ embedded เสมอนั่นเองครับ เพื่อความปลอดภัย
Day 12/13 of 100 complete.
Tags: beginners, programming, 100daysofcode, 100daysofcodechallenge
Published: 2022-05-20 05:06:37

Wow what a night. I was tired and only planning on tackling the Mario problem again and once the hour was done, go to bed. I was researching to get some help on the logic and I was able to understand better what to do. Then I started another exercise that was much more simpler and now I’m done with that weeks lesson. Coding is hard and makes you feel like you’re dumb sometimes but I’m remembering that it’s a tool that will serve me in the future!
CSS Alignment techniques
Tags: css, webdev
Published: 2022-05-10 03:27:08

# CSS Alignment techniques

One common task that is frequently requested in web development is aligning elements using CSS. While this may sound simple, it can become confusing due to the absence of a single specific way to achieve it.

I have curated a [CodePen collection](https://codepen.io/collection/dbvvaV) to demonstrate various alignment techniques.

Each CodePen in the collection showcases a grid representing a board containing sticky notes. The notes are displayed in different positions on the board, as shown in the following image:

![Final design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84menx5n0kj1fpe4ioto.png)

## Alignment Techniques

* Margin
* Line-height
* Table-cell
* Positions
* Flex

### Margin

Using the `margin` property, it is easy to horizontally center the elements. However, for vertical alignment, you would need to calculate the height or use the `calc` function.

The required properties are as follows:
- `margin-top`
- `margin-right`
- `margin-bottom`
- `margin-left`

Alternatively, you can use the shorthand property `margin`.

Here is the corresponding [CodePen](https://codepen.io/davormz/pen/abqoZra).

### Line-height

Using `line-height` allows for precise alignment of elements. However, if the text spans multiple lines within the element, it may not fit perfectly.

The required properties are:
- `text-align` -> for horizontal alignment
- `vertical-align` -> for vertical alignment
- `line-height` -> defines the size of the line

Here is the corresponding [CodePen](https://codepen.io/davormz/pen/vYdByBg).

### Table-cell

Using `display: table-cell`, the vertical alignment is unaffected by font size or line height. However, this technique only applies to inline elements.

The required properties are:
- `display: table-cell`
- `text-align`
- `vertical-align`

Here is the corresponding [CodePen](https://codepen.io/davormz/pen/wvywRZr).

### Positions

This is one of the most commonly used techniques for positioning elements.

The required properties are:
- `position: relative`
- `position: absolute`
- `top`
- `right`
- `bottom`
- `left`
- `transform: translate(x, y)`

Here is the corresponding [CodePen](https://codepen.io/davormz/pen/xxYKMxx).

### Flex

The `display: flex` property, introduced with CSS3, makes it incredibly simple and intuitive to align elements. Additionally, this technique is more accommodating for different writing systems, which is useful if you intend to display your page in countries with diverse writing forms.

The required properties for containers are:
- `display: flex`
- `justify-content`
- `align-items`

Here is the corresponding [CodePen](https://codepen.io/davormz/pen/xxYKOJz).

## Conclusion

The best technique to employ will depend on your specific use case and page architecture.

Last but not least, the inspiration for this article came from the notes I took during the [CSS Grid](https://platzi.com/cursos/css-grid-layout/) course on [Platzi](https://platzi.com/), which I highly recommend for Spanish speakers or those who understand Spanish.
12 Ways Software Testers Think Differently From Others
Tags: beginners, tutorial, programming, testing
Published: 2022-05-20 05:03:57

In this video, we will discuss How QA should think differently from others to catch more bugs.

{% embed https://youtu.be/yE--LbsSIVM %}

✅ If you are serious, I invite you to Our community course
http://sdet.live/print

✅ Resources for Selenium Training with Custom Framework.
🔥🔥https://sdet.live/30dayselenium
🔥🔥https://sdet.live/2WlO
Top 5 Manual Testing Interview Questions
Tags: testing, software, beginners, tutorial
Published: 2022-05-20 04:50:52

In this video we are going to target the top 5 Manual Testing Interview Questions asked in interview these days.

{%embed https://youtu.be/nmPAoCOLv-Y %}

✅ Want to Switch from Manual to Automation Testing  - https://sdet.live/learn​

✅ Resources for Selenium Training with Custom Framework.
🔥🔥 https://sdet.live/30dayselenium​
🔥🔥 https://sdet.live/2WlO​
Switch from Manual to Automation Testing after 10+ Years?
Tags: testing, software, beginners, tutorial
Published: 2022-05-20 04:49:45

In this video, I had a discussion with One of the Subscriber. Is it possible to switch from Manual Testing to Automation testing after 10 year?

{% embed https://youtu.be/Jb_Vw1xCh0w %}

✅  Join The Testing Academy -: https://thetestingacademy.com
✅  Automation Courses -: https://testautomation.teachable.com/
✅  Where we help you to become a better Test Automation engineer.
How to Customize the React Carousel Component
Tags: react, reactnative, webdev
Published: 2022-05-20 04:00:10

Learn how easily you can customize the Syncfusion React Carousel component’s navigator buttons, play button and indicators. This video also explains how to change slide interval time, disable slide autoplay and infinite slide transition looping, and change animation effects. 

Product Overview: https://www.syncfusion.com/react-ui-components/react-carousel

Download an example from GitHub: https://github.com/SyncfusionExamples

Refer to the following template documentation: https://ej2.syncfusion.com/react/documentation/carousel/navigators-and-indicators/

Check out this online example: https://ej2.syncfusion.com/react/demos/#/material/carousel/templates

{% youtube hVeXkSCuu5k %}
Light/Dark Theme Calculator
Tags: codepen, css, javascript, tutorial
Published: 2022-05-20 03:21:11

Today we create a light & dark themed calculator.

Building a web calculator is a great project, especially if you have just started learning JavaScript. It is quite simple for people of any skill level. This project covers the interactions with UI and key JavaScript methods.

{% codepen https://codepen.io/rembertdesigns/pen/LYeWqZm %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Como escrever testes automatizados em GO
Tags: go, braziliandevs, beginners, todayilearned
Published: 2022-05-20 03:07:06


##Exportando a função

Pra começar precisamos definir as funções que queremos exportar como publicas, o GO considera funções publicas todas as funções que começam com a letra maiúscula, e considera como privada todas as funções que começam com a letra minúscula

##Criando o teste
No GO é convencionado que todos os arquivos de teste terminem com `_test` além disso o GO não precisa de uma lib externa como por exemplo `jest` no javascript para fazer os testes, ele já vem com a ferramenta de testes por padrão. Porem para facilitar na hora de fazer as comparações de resultados precisamos instalar a lib `testify` com o seguinte comando

```bash
go get github.com/stretchr/testify/require
```

para o caso do teste vamos testar a função Enable que pertence a `struct` Product

```GO
type Product struct {
	ID     string
	Name   string
	Price  float64
	Status string
}

func (p *Product) Enable() error {
	if p.Price > 0 {
		p.Status = ENABLED
		return nil
	}
	return errors.New("Price must be greater than 0")
}
```

A struct no go funciona semelhante a uma classe em linguagens orientadas a objetos, onde declaramos a struct com todos as valores que ela precisa, e associamos metodos a ela

E para criar o teste em sí vamos criar o arquivo `product_test.go` onde o package dele vai ser o mesmo package do arquivo original mas com um _test no final e ai vamos declarar a função como 
`Test{nome da Struct}_{nome do Metodo} (t *testing.T)` 

```GO
func TestProduct_Enable(t *testing.T) {
	product := application.Product{}
	product.Name = "Hello"
	product.Status = application.DISABLED
	product.Price = 10

	err := product.Enable()
	require.Nil(t, err)

	product.Price = 0
	err = product.Enable()
	require.Equal(t, "Price must be greater than 0", err.Error())
}
```

o primeiro require queremos garantir que não deu erro e no segundo queremos ver se deu erro. Podemos fazer ambos os testes na mesma função

## Bonus: Validando campos
Nesse mesmo projeto utilizei a lib `asaskevich/govalidator` para validar se os campos estão vindo como eu espero no Product. 

utilizei essa lib da seguinte forma
```bash
go get github.com/asaskevich/govalidator
```

```GO
func init() {
	govalidator.SetFieldsRequiredByDefault(true)
}
```

e na Struct onde defino os campos de Product ao lado coloquei as tags 
```GO
type Product struct {
	ID     string  `valid:"uuidv4"`
	Name   string  `valid:"required"`
	Price  float64 `valid:"float,optional"`
	Status string  `valid:"required"`
}
```

para validar se o id é uuidv4 se veio o nome e o status e se o preço é float
Laravel 8 Socialite Login with Facebook Account
Tags: laravel, facebook, socialite, login
Published: 2022-05-20 03:04:38

In this article, we will learn about laravel 8 socialite login with facebook account, as you all know currently many websites provide different types of login authentication facilities to users like facebook login, login with google, login with GitHub, etc...

Here I will give you an example of laravel 8 login with a facebook account here I have used laravel 8 jetstream authentication for laravel social login example.

So, let's see laravel 8 login with facebook account, laravel 8 jetstream login with facebook, login with facebook in laravel 8.

```
Step 1 : Install Laravel 8 for socialite login with facebook account.

Step 2 : Install JetStream for Authentication

Step 3 : Install Socialite for laravel 8 login with facebook account

Step 4 : Create Facebook App

Step 5 : Changes in Config File

Step 6 : Create Controller for facebook login

Step 7 : Create Route

Step 8 : Add Code in Blade File

Step 9 : Add Column in Database

Step 10 : Update Model

Step 11 : Run Project for output of laravel social login
```

---

> **_[Read More: Laravel 8 Socialite Login with Facebook Account](https://techsolutionstuff.com/post/laravel-8-socialite-login-with-facebook-account)_**
Upwork | Made with Nuxt JS
Published: 2022-05-20 03:02:38

![Upwork | Made with Javascript | Nuxt JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1652799405/large_upwork_m_ade_with_nuxt_js_74d95c4274.png "Upwork | Made with Javascript | Nuxt JS")


### The World’s Work Marketplace

> Upwork connects businesses with independent professionals and agencies around the globe. Where companies and freelancers work together in new ways that unlock their potential.
> 
> ### How work should work
> Forget the old rules. You can have the best people.
> Right now. Right here.
> 
> ### Find talent your way
> Work with the largest network of independent professionals and get things done—from quick turnarounds to big transformations.
> 
> 

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Upwork on Twitter](https://twitter.com/withjavascript/status/1527483607933132800?s=20&t=NjT-6TdTR1ISv2YLqSh2Vw)
 |
| Medium | [Upwork on Medium](https://medium.com/@madewithjavascript/upwork-made-with-nuxt-js-16630bd27d04)
 |
| Facebook | [Upwork on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0GhYSJ26Y8DRZAh3FdT7w6AHaRotVT1ZyFzZuhfL6JDraSfqQPd3mFqnK5bhAMz32l)
 |
| Tumblr | [Upwork on Tumblr](https://madewithjavascript.tumblr.com/post/684736459211767808/upwork-made-with-nuxt-js-the-worlds-work)
 |
| LinkedIn | [Upwork on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6933249424097779712)
 |


Filled Under:

 - [Made with Javascript](https://madewithjavascript.club)    
 - [Made with Nuxt JS](https://madewithjavascript.club/categories/nuxt-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
Installing NodeJS in CentOS 7
Published: 2022-05-20 02:41:54

You may follow the steps here: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-a-centos-7-server

Follow these steps if have outdated python 3:-
`sudo yum install https://repo.ius.io/ius-release-el$(rpm -E '%{rhel}').rpm
sudo yum update -y
sudo yum install -y python3
python3 --version`

Follow these steps if you have outdated gcc:-
`sudo yum install centos-release-scl
sudo yum install devtoolset-8-gcc*
scl enable devtoolset-8 bash
which gcc
gcc --version`
Why Design patterns are so important to mobile devs!!
Tags: mobile, flutter, android, ios
Published: 2022-05-20 02:41:10

I was wondering and thinking a lot these days, how important is for a mobile developer to know some principles about Oriented object programming, clean code, and design patterns.
Learning about this thing can make a developer's career increase a lot, there are a ton of jobs that need someone that knows how to use the things that I mentioned if you have at least a knowledge about design patterns and how and when to use them, probably you will be the first choice in a technical interview.

To make this more clear, take a look at how we use this in flutter with dart, react native with typescript, Kotlin, java, and swift. All of those languages will always have something in common, if you have a good base with programming, you have everything.
Day 41: Still Redux!
Published: 2022-05-20 01:47:09

Hi!
It's almost 4 AM and still up working on the Redux. I think today will be the last day though as today I lost my progress with the article about redux and U had to rewrite everything but I think now it's even better and I learned a lot about redux  while working on the blogpost. today was mostly a busy one with papers I had to work on but I managed to accomplish all my tasks which is great
I'm so tired don't even know what I'm writing about. Will be back tomorrow let me run
signing off...
Livewire Datatables: Cara Nampilkan Data di Livewire ke Datatable
Tags: livewire, laravel, tutorial
Published: 2022-05-20 01:44:58

Pada kesempatan kali ini selesai membuat sebuah tutorial bagaimana cara menggunakan datatable di livewire, untuk tutorialnya silahkan baca selengkapnya di link berikut ini

[Livewire Datatable: Menampilkan Data ke Datatable
](https://diskusikoding.com/menampilkan-data-ke-datatable)
The Last Airbender | Pure CSS
Tags: codepen, css, showdev, tutorial
Published: 2022-05-20 01:20:51

Today we create a Aang, The Last Airbender art with CSS. This probably the most time consuming creative project I've made to date but it was well worth it in the end.

Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials. You can check them out [here](https://codepen.io/rembertdesigns). For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/vYpNPME %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Angular 14: new features & release date
Tags: angular
Published: 2022-05-20 01:10:35

---
title: Angular 14: new features & release date
published: true
description: Exploring the new features of Angular 14
tags: angular 
//cover_image: https://direct_url_to_image.jpg
---

![angular 14 features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4pverlebfblf4n82fmg.png)

**Typed reactive forms and advanced template diagnostics will be a part of the next important upgrade to the widely used TypeScript-based web framework that was designed by Google i.e. [Angular 14](https://www.techiediaries.com/news/angular-14-release/). In the June release, the use of modules will be optional in favor for stand-alone components.**

## Angular CLI auto completion

Angular 14 adds a new functionality to the CLI that allows real-time type ahead auto completion in the terminal. This capability can be accessed using the cli.

## Angular 14 standalone components

With the release of Angular 14, standalone components will at last be a feasible option, and Angular modules will no longer be required.

## Enhanced template diagnostics

Enhanced template diagnostics are one of the new features introduced with Angular 14, making it possible for the compiler to shield developers from common coding errors in a manner similar to typescript.

## Typed forms

The most common request for an Angular feature on GitHub is for strictly typed forms, which, would improve the framework’s model-driven approach to the process of dealing with forms.

**_✋If you have any questions about this article, ask them in our_** [**_GitHub Discussions_**](https://github.com/techiediaries/techiescommunity/discussions) **_👈 community._**

**_✋ Want to master Angular? Join our_** [**_#DailyAngularChallenge_**](https://www.techiediaries.com/daily-angular-challenge/) **_where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version._**

**_✋ Make sure to join our_** [**_Angular 14 Dev Community_**](https://web.facebook.com/groups/ngxangular/) **_👈 to discuss anything related to Angular development._**

**_❤️ Like our_** [**_page_**](https://www.facebook.com/techiediaries9) **_and subscribe to our_** [**_feed_**](http://feeds.feedburner.com/techiediaries/AXID) **_for updates!_**

If you would to read more details about the new features of Angular, check out these resources online:

https://angularnewsletter.substack.com/p/whats-new-with-angular-14-new-features?s=w

https://www.youtube.com/watch?v=-f1Pfrtp_ao&ab_channel=techiediaries

https://www.techiediaries.com/angular-14-features/

https://efficientcoder.net/angular-14-release-features/
Flying Helicopter | Pure CSS
Tags: codepen, css, showdev, beginners
Published: 2022-05-20 01:06:09

Today we create a Flying Helicopter with CSS. This was my first time incorporating a gif into a project along with using keyframes for the animation of the helicopter.

Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials. You can check them out [here](https://codepen.io/rembertdesigns). For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/PoOrXKw %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Samurai Jack | Pure CSS
Tags: codepen, css, showdev, codenewbie
Published: 2022-05-20 00:24:07

Today we create a Samurai Jack art with CSS. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials. You can check them out [here](https://codepen.io/rembertdesigns). For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/zYPVyoR %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
What's your current tech stack for web dev?
Tags: javascript, webdev, discuss, productivity
Published: 2022-05-19 23:54:24

Tech Stacks, the complete package of tools needed by a web developer to create an awesome web app. A single web app can be made using many different teach stacks, it completely depends on the developer and on the developer trends. So, what's your current tech stack? It can have frameworks, databases, ORMs, CSS frameworks, tools and literally anything you use in the development process. Don't forget to give them weird abbreviations 😂

My current tech stack is <u>NPTS</u> which sounds weird,
- N stands for **NextJS**, framework.
- P stands for **Prisma**, ORM.
- T stands for **Tailwind**, for styling.
- S stands for **Supabase**, database.

It's a frontend focused tech stack.