teleren/devto huggingface dataset:
My golden rules for Angular intercomponent data communication
Tags: angular, rxjs, statemanagement, components
Published: 2021-11-22 20:52:02

> These are some rules that I have lazily picked up over the past four years of professional development on angular.

> I generally work on small to medium projects without the time to integrate a formal state management system.

> It is for this reason that there are data services that try to solve the problem of carrying communication around. If anyone has any further questions or curiosities regarding these points feel free to leave a comment.

- methods must be extracted into functions until nothing can be extracted anymore
- the `component` logic shold refer only to local resources of the `component` as much as possible
- `dataservices` deal with data I/O with the server
- the business Logic must live within the `dataservice` and all components **should be** of assistance to the business Logic, visualization assistance and small local logics to visualize and modify data
- `components` (internal to the feature internal to the root component) must implement the root `dataservice` or receive data as input (**observables are strongly preferred**)
- avoid multi-level handovers through inputs, it slows you down and makes refactoring a hassle
- if the data as input changed hands more than twice use a `dataservice`,
- each feature must have its own module and declare `components` related only to that feature
- putting the general `dataservice` next to the feature module is the best way to indicate the root from which to start exploring the code
- the beginning of the end of the data flow must take place within the `dataservice`
- the substrate `cache-services` for API calls must live in the provide of the feature module they belong to and refer to
- `components`  **can be** interaction contexts between `dataservices` but services are preferred when possible
- `interaction services` **can be** interaction contexts between `dataservices`
Living in the Shell #1; base64
Tags: linux, bash, productivity, devops
Published: 2021-11-22 20:42:08


## Encode inline

```sh
echo -n 'Hello World!' | base64
```

## Encode file (into file)

```sh
base64 ~/.bashrc > encoded-file.txt
```

```sh
cat ~/.bashrc | base64 > encoded-file.txt
```

## Decode inline

```sh
echo -n "SGVsbG8gV29ybGQh" | base64 -d
```

## Decode file (into file)

```sh
base64 -d encoded-file.txt > decoded-file.txt
```

```sh
cat encoded-file.txt | base64 -d > decoded-file.txt
```
App Controlled Christmas Tree – Twinkly App Controlled Christmas Tree
Published: 2021-11-22 20:40:34

Are you looking to get a Christmas tree this Christmas? How about getting an app-controlled Christmas tree?

Christmas is by the corner and families are planning for the holiday, most of such plans is for gifts, food, and most of all, decorations.

Christmas decorations are one thing that can never be left out during the Christmas holiday, this is why many people put in effort to get their Christmas decorations done on time >> <a href="https://www.momsall.com/app-controlled-christmas-tree/">see more</a>
My favorite image placeholder
Tags: webdev, imageplaceholder, html
Published: 2021-11-22 20:30:12

For my first post, I decided to write about a tool that I always use gladly when mockup new websites. So here I would like to share with you my favorite image and video placeholder [Place Corgi](http://placecorgi.com/). As you can guess I am a Corgi lover and this image placeholder is just perfect for me, and everyone who loves dogs and especially Corgis.

It is easy to use, just a link to Place Corgi site with a width and optional height specified after the URL.
`http://placecorgi.com/width/height`

Also, we can place a video as a placeholder. To do that, we would add /v to the URL along with width and height
`http://placecorgi.com/v/width/height`

You can add the Place Corgi js file to your application, which will automatically replace any img tags that have the class corgi with images from Place Corgi.
For this implementation visit site [here](http://placecorgi.com/).
Learn How To Lazy Load Image Using Javascript In PHP
Published: 2021-11-22 20:09:30

# Do you want to increase your website speed?
Then you need this tutorial to lazy load your assets.
[https://www.youtube.com/watch?v=kyU8GvHf3o4](https://www.youtube.com/watch?v=kyU8GvHf3o4)

Download Source Code: https://www.biggidroid.com/product/javascript-lazy-image-script/

Have an issue? Comment below.
Calculate distance between 2 points (latitude-longitude) with Mysql ST_Distance_Sphere method 
Published: 2021-11-22 20:05:54

If you want to measure distance between 2 points, you can use Mysql’ [ST_Distance_Sphere](https://dev.mysql.com/doc/refman/5.7/en/spatial-convenience-functions.html#function_st-distance-sphere) method – introduced with Mysql 5.7+.

Assume that, you want to get closest `user` to given point: 41.0049823,28.7319855

```php
$latitude = 41.0049823;
$longitude = 28.7319855;

$sql =  "SELECT 
    users.id, 
    users.username, 
    ST_Distance_Sphere(point(users.longitude, users.latitude), point({$longitude}, {$latitude})) as distance 
FROM users"
```

So you’ll get distance as meter unit. Note that, this method uses "`longitude-latitude`" pair. Not "`latitude-longitude`". It’s important :) I don’t know why but I always use "`lat-lng`" convention.

Let’s make another query: Get users within 100 meters for given point.

```php
$latitude = 41.0049823;
$longitude = 28.7319855;

$sql = "SELECT 
    users.id, 
    users.username, 
    ST_Distance_Sphere(point(users.longitude, users.latitude),point({$longitude}, {$latitude})) as distance 
FROM users 
WHERE distance < 100"
```

I was using some sinus, cosinus, tangant and so other functions before ST_Distance_Sphere. That query was running slow and sometimes it wasn’t result correct. Thanks ST_Distance_Sphere for making our life easier :)
BetterViewer — A chrome extension for better image viewing experience
Tags: javascript, webdev, extensions, chrome
Published: 2021-11-22 20:04:17

Hi everyone! 

After many cups of coffee and many more hours of hard work, I launched my free Open source Chrome extension: **BetterViewer**

BetterViewer makes image viewing faster, easier, and more fun.

BetterViewer was designed as a replacement for the image viewing mode built into Chrome-based web browsers.

With BetterViewer you can use various keyboard shortcuts to quickly pan, zoom images, edit and a lot more!

{% youtube 3p7Jrdx2jOc %}

![screenshot1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzlh1z1yze63lpgsiobs.png)
![screenshot2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kttpx8cdjvdcaqamw1np.png)
![screenshot3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pux6vxwjcl8eo53dc3kl.png)
![screenshot4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/664e6x013fks8k9fm8xc.png)
![screenshot5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5d3y20b08ervf3q1ir7.png)

Features: 

* Zoom in / Zoom Out / Reset 
* Fullscreen 
* Rotate Left / Rotate Right 
* Flip Horizontal / Flip Vertical 
* Crop Image 
* Paint 
* Download Image 
* Upload Image to imgur.com 
* Color picker 
* Image Details 
* Change background color (Dark / Light / Blurred) 
* Print Image 
* Extract Text from Image 
* Edit in Photopea

📌 **Product Hunt**: https://www.producthunt.com/posts/betterviewer 

📌 **Chrome Web Store**: https://chrome.google.com/webstore/detail/betterviewer/llcpfkbjgkpmapiidpnohffjmmnhpmpb 

{% github Ademking/Betterviewer %}
Writing Maintainable Test : Enforcing Test Isolation - The Shared State Corruption Anti Pattern.
Tags: testing, tdd
Published: 2021-11-22 19:55:40

Hello , we continue talking about writing maintainable tests and the advices Roy osherove gives in his book [The Art Of Unit Testing](https://www.amazon.fr/Art-Unit-Testing-Roy-Osherove/dp/1617290890).


## Shared State Corruption Anti Pattern
> This one is about sharing the state of an object across multiple tests , but we expose our tests to dependencies. If one test modify the state of the object that the second test depends on , our test is going to fail.


Look at the C# code below ( from the book )
```
[TestFixture]
public class SharedStateCorruption
{

  // defines Shared Person state
  Person person = new Person();
 [Test]
 public void CreateAnalyzer_GoodFileName_ReturnsTrue()
 {
  person.AddNumber("055-4556684(34)");
   // Changes shared state
  string found = person.FindPhoneStartingWith("055");
  Assert.AreEqual("055-4556684(34)", found);
 }
 [Test]
 public void FindPhoneStartingWith_NoNumbers_ReturnsNull()
  {
   string found =
   person.FindPhoneStartingWith("0");
   // Reads shared state
   Assert.IsNull(found);
  }
}
```

We all agree that the second test is going to fail because it expects **NULL** but it will not be the case , because the first test has changed the state of our object by using the **person.AddNumber("055-4556684(34)")** instruction .




###So what are the patterns of this anti pattern ?

1. _Not Setting Up state before each test_ : A developer doesn’t set up the state required for the test or assumes the state was already correct.

2. _Using Shared State_ : A developer uses shared memory or external resources for more than one test without taking precautions.

###...And ( we all have guess the solutions ) the solutions are:

1. _Not Setting Up state before each test_ : Either use a setup method or call specific helper methods at the beginning of the test to ensure the state is what you expect it to be.

2. _Using Shared State_ : you don’t need to share state at all. Having separate instances of an object for each test is the safest way to go.



## What i think about these solutions 
> I think they are great one , especially having a separate instance for each test , by doing this when an error occurs we can focus on one test , one object instance , in fact the only world :) of our unit test..




Thanks for Reading ;)
How to get an Internship if you are not from a good college
Tags: beginners, webdev, codenewbie, career
Published: 2021-11-22 19:39:57

If you are in your final year or you are learning some new technologies like Web development ,Data Science , Machine Learning etc you will be looking for Internship. But getting internship is not so much easy .In this article I will share my story of despite not being from a good college how I got my first Internship.Like you, I also used to apply in many Internships but was not getting responses from companies . What I learn from my experience is many things matter to get an Internship in India. So first you should select a platform to apply for the Internship like Linkedin, Internshala. Personally, I like Internshala . First, you have to be good in any one field. You don’t have to be good in many fields but you should master a specialized field and try to apply to these companies which are looking for that person. Other things that matter are you should have a good resume where your project, GitHub profile link should mention. Also, try to write a brief summary about yourself and what you are expecting from the company . After applying don’t sit back and relax but try to message them on different platforms that you have applied for their companies. And if you get a response from the company and they gave some tasks try to do that accurately and be prepared for the interview, Try to learn about their company also. I wish you all the best. Follow me  for more articles like this
Scoop - a production-ready Sinatra boilerplate project
Tags: sinatra, capistrano, nginx, boilerplate
Published: 2021-11-22 19:29:00

---
title: Scoop - a production-ready Sinatra boilerplate project
published: true
description: Bootstrap Sinatra projects using Corneal, Capistrano, Puma, and Nginx
tags: Sinatra, Capistrano, Nginx, Boilerplate
canonical_url: 'https://www.abhinav.co/scoop'
---

## Bootstrap Sinatra projects using Corneal, Capistrano, Puma, and Nginx

![Scoop - a production-ready Sinatra boilerplate project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pwqa0dhi2tyb3xtunox.png)

[Sinatra](http://sinatrarb.com/) is a Ruby framework that helps you quickly create web applications, APIs and microservices. Its minimalism not only attracted a lot of developers, but it also inspired [Flask](https://flask.palletsprojects.com/en/2.0.x/) in Python and [Express](https://expressjs.com/) in Node.js

If you are developing microservices or web APIs, Sinatra is a great choice. However, bootstraping a Sinatra project that is optimized for development speed as well as is easy to deploy has become non trivial because 
1. Documentation is not easy to find (you mostly find Ruby on Rails specific tips)
2. You need to write code to set up and connect DB, manage migrations etc.
3. You need to create a right directory structure yourself and configure it accordingly
4. You also miss a boot file that you can use with console and with custom rake tasks/scripts
5. Setting up projects for deployment is tedious and error prone, with a lot of details to be filled in for Capistrano, Puma and Nginx.

[Scoop](https://github.com/abhinavs/scoop) solves it by providing a good boilerplate that can be a starting point for your next project. It solves all the above mentioned problems and comes up with easy to edit configuration files that can help you correctly configure servers.

Scoop uses
1. [Corneal](http://thebrianemory.github.io/corneal/) to make scaffolding models, controllers and views
2. ActiveRecord as database ORM
3. Capistrano for deployment
4. Puma as app server
5. Nginx as a proxy server

In addition, 
1. it is also JSON API ready with JSON, CORS and JSONP support already enabled,
2. has a RoR like console, and
3. comes up with example script and rake task that can be used to perform tasks that load the environment

Try Sinatra & Scoop by forking [Scoop Repository](https://github.com/abhinavs/scoop/fork). Scoop's [README](https://github.com/abhinavs/scoop/blob/master/README.md) has detailed steps to set up development and production systems as well as the deployment process. 

Please let me know in comments if you would want to try it out or have any suggestions - would love to improve the project.
What is Svelte
Published: 2021-11-22 19:23:12

Hello, This is the first article of svelte svelte Complete Guide series. it will be a complete series from beginner to advanced journey with svelte.

### What we will Learn in this part ? 
* What is Svelte ?
* How svelte works ?
* Why is Svelte Different?



### So What is Svelte?
Svelte is Component Framework help to build user interfaces declaratively. It converts your code into an imperative version of Vanila code.  Svelte compile your works into optimized pure vanila javascript code at build time. And update DOM surgically when app state changes.

#### How does svelte DOM update?
In Svelte there is no virtual dom so there is no diff phase. It works out which state change will update dom directly. whenever the appropriate piece of state has changed.

### How svelte works?
Svelte is a compiler. It's men when we shift our code into production it ships the code we have written along with a third-party library. and transforms it into a highly optimized plan JavaScript file. this way the bundle size of our app is very small in another framework comparison.   Svelte UI Update user interaction or events chain of internal state change which will auto-update the DOM.

![How svelte works](https://i.ibb.co/Ltwgd0R/Svelte-Complete-Guide-What-is-Svelte-1.png)


### Why is Svelte Different?
When you create a production application, the compiler translates your application into JavaScript code. This ensures that when your program is running in the DOM, no overhead framework code is injected into the browser. At build time, Svelte runs, translating the components into a highly efficient imperative code that updates the DOM surgically. This way, you’re able to write highly performant code.


### Summary
* Svelte is compiler
* It's compiled declarative code into imperative javascript code.
* Svelte updates DOM surgically when the app state changes.
* In Svelte there is no virtual dom and no Diff phase.
Choosing between Tomcat or Jetty when using Spring Boot
Tags: java, spring, boot
Published: 2021-11-22 19:18:43

---
title: Choosing between Tomcat or Jetty when using Spring Boot
published: true
description: 
tags: java, spring, boot
//cover_image: https://direct_url_to_image.jpg
---

Spring Boot uses Tomcat by default. It's possible to use other servers though. If we want to use, for example, Jetty, we need to exclude the `spring-boot-starter-tomcat` dependency from `spring-boot-starter-web` and then set a new dependency for `spring-boot-starter-jetty`. With maven, that might be accomplished by:

1. Removing `spring-boot-starter-tomcat`.

```xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <version>2.6.0</version>
    <exclusions>
        <exclusion>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </exclusion>
    </exclusions>
</dependency>
```

2. Adding `spring-boot-starter-jetty`.

```xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-jetty</artifactId>
</dependency>
```
Writing Maintainable Test: Enforcing Test isolation - Hidden Test Call Anti Pattern
Tags: testing, tdd
Published: 2021-11-22 19:12:32

We continue our series of post about writing maintainable test , always looking about the advice in the book of Roy Osherove [The Art Of Unit Testing](https://www.amazon.fr/Art-Unit-Testing-Roy-Osherove/dp/1617290890)


## Anti Pattern Hidden Test Call
> This anti pattern is about calling one test inside another test , we agree that this is an explicit dependency and an unit test ( wchich should run in his world ) should not know the existence of another test.

### Code Example
the code below is from the book himself , written in C#, if you do not do C# , do not worry , the code talks very well

```
[TestFixture]
public class HiddenTestCall
{
  private LogAnalyzer logan;
 [Test]
 public void CreateAnalyzer_GoodNameAndBadNameUsage()
 {
   logan = new LogAnalyzer();
   logan.Initialize();
   bool valid = logan.IsValid("abc");
   Assert.That(valid, Is.False);
   CreateAnalyzer_GoodFileName_ReturnsTrue();
  }
 [Test]
  public void CreateAnalyzer_GoodFileName_ReturnsTrue()
  {
   bool valid = logan.IsValid("abcdefg");
   Assert.That(valid, Is.True);
  }
}
```
Look like the first Test calls the second test.





So the patterns about this are:
1. Trying to remove duplication : A developer try to be DRY in writing his tests

2. Laziness about separating his tests : Yes we can be sometimes lazy to separate our tests in the name of **i should finish it quickly**

... and the solutions to these patterns are:

1. Trying to remove duplication : **refactor
the code you don’t want to write twice into a third method that both your test and the other test call**

2. Laziness About Separating the tests: Again ( sometimes Roy is so funny ) look what he said **If you’re too lazy to separate your tests, think of all the extra work you’ll have to do if you don’t separate them. Try to imagine a world where the current test you’re writing is the only test in the system, so it can’t rely on any other test.**



Thanks for reading. Imagine a better world for your Unit test :)
รู้จักตัว Playwright คร่าวๆกัน
Tags: playwright, go, thai
Published: 2021-11-22 19:05:37

## Playwright ??

[Playwright](https://playwright.dev/) เป็น end-to-end testing framework ตัวนึงนอกจากโฟกัสที่การ test แล้วยังสามารถทำพวก browser automation ได้ไม่ยากเลยครับ

## ภาษาที่รองรับ 

- JS (TS)
- Python
- Java
- .NET
- Go

## สาเหตุที่ชอบ

จากการอ่าน doc และได้ลองเล่นคร่าวๆ รู้สึกว่าเรียนรู้และใช้ง่ายไม่ยากเท่าไร

เนื่องจากยังไม่ได้ลองเล่นทุก feature ของมันแต่เท่าที่อ่านคร่าวๆแล้วรู้สึกชอบก็คือ [codegen](https://playwright.dev/docs/codegen#generate-tests) รัน script ขึ้นมาแล้วแล้วมันจะ generate code ให้เราตามที่เรา action กับตัว browser 🤩

ทีนี้ผมได้ลองเอา playwright มาใช้ใน 3 usecase คือ

1. web scraping -> `go`

2. generate pdf (as a server) -> `ts`

3. testing e2e (frontend) -> `ts`

ในบทความนี้จะขอพูดถึงแค่ตัวอย่างแรกส่วนสองกับสามจะไปในบทความถัดไป

# ตัวอย่าง web scraping

โจทย์ก็แสนง่ายให้เข้าไปที่เว็บ `mangaplus` ค้นหา anime ที่ชื่อ `onepiece`
แล้วก็ไปหาว่าตอนล่าสุดตอนนี้คือ **ตอนที่เท่าไรและชื่อตอนอะไร**

เนื่องจากโจทย์ไม่ค่อยยากผมก็เลยเลือกภาษาที่ผมได้ลองเขียนได้ไม่นานนั่นก็คือภาษา `go` (ส่วนโจทย์ 2,3 จะเป็น javascript)

```go
package main

import (
	"log"

	"github.com/mxschmitt/playwright-go"
)

func main() {
	pw, err := playwright.Run()

	if err != nil {
		log.Fatalf("could not start playwright: %v", err)
	}

	browser, err := pw.Chromium.Launch(playwright.BrowserTypeLaunchOptions{
		SlowMo:   playwright.Float(800.00),
		Headless: playwright.Bool(false),
	})

	if err != nil {
		log.Fatalf("could not launch chromium: %v", err)
	}

	page, err := browser.NewPage()

	if err != nil {
		log.Fatalf("could not create page: %v", err)
	}

	_, err = page.Goto("https://mangaplus.shueisha.co.jp/updates")

	if err != nil {
		log.Fatalf("could not goto: %v", err)

	}

	err = page.Fill(`[placeholder="ค้นหาตามชื่อเรื่องหรือผู้แต่ง"]`, "one piece")

	if err != nil {
		log.Fatalf("could not fill: %v", err)
	}

	err = page.Keyboard().Press("Enter")

	if err != nil {
		log.Fatalf("could not press: %v", err)
	}

	err = page.Click("text=วันพีซ")

	if err != nil {
		log.Fatalf("could not click: %v", err)
	}

	list, err := page.QuerySelectorAll("text=ตอนที่")

	if err != nil {
		log.Fatalf("could not query selector all: %v", err)
	}

	latestChapter, err := list[len(list)-1].TextContent()

	if err != nil {
		log.Fatalf("could not get text content: %v", err)
	}

	log.Println("-----------------------------")
	log.Printf("ตอนล่าสุด -> %v", latestChapter)
	log.Println("-----------------------------")
}
```

อธิบายโค้ดข้างบน

1. ให้ทำการเปิด browser ขึ้นมาโดยจะใช้เป็น chromium โดยตั้งค่าให้มี slow-motion หน่อยเพื่อให้เห็นการทำงานมันไม่เร็วเกินไปและตั้งค่าให้ headless เป็น false เพื่อที่จะดู ui

2. สร้างหน้าขึ้นมาแล้วไปเว็บ mangaplus

3. search `onepiece` ลงในช่องค้นหา

4. ค้นหาตอนล่าสุด

[ผลลัพธ์](https://app.warp.dev/block/JspUspoZdmIGIGMqYqz683)

[source code](https://github.com/jungai/playwright-with-go)

ทั้งหมดนี้ก็แค่เป็นตัวอย่างเล็กๆตัวอย่างเดียวเท่านั้นครับ บทความถัดไปน่าจะเป็นการใช้ playwright มาเป็นตัวสร้าง pdf ให้เรากันครับ

## Refs

- [https://playwright.dev/](https://playwright.dev/)

ถ้าเกิดผิดพลาดไปตรงไหนขออภัยด้วยนะครับ 🙏
Dev Bloggers/Technical Bloggers Wanted
Tags: writing, tutorial
Published: 2021-11-22 19:04:06

Hit Subscribe is a company that hires engineers to write content for technical blogs. So, what we're looking for is quite straightforward: engineers interested in a side hustle writing technical content for companies that sell to engineers. Or, put more simply, we want you to write content (mostly blog posts) about technical topics like DevOps, testing, machine learning, security, and more.
If you like writing blog posts (or think you might, and have been meaning to start your own technical blog) let's talk.
Apply here: https://www.hitsubscribe.com/apply-to-be-an-author/