teleren/devto huggingface dataset:
Sequelize, Express.js, & Handlebars.js being turds?
Tags: expresjs, javascript, question, handlebarsjs
Published: 2022-09-13 14:45:01

My brain is sizzling, either I am overlooking a tiny detail or this is supposed to work and doesn't for whatever reason. Just trying to render by findAll() query to the page using handlebars. Here's what I have.

Controller:

```
const library = require('../models/Library');
exports.manage_library = (req, res) => {
    Library.findAll()
        .then(function(data) {
            res.render('manage-library', {
                title: "Manage Website",
                user: req.user,
                data: data
            })
        });
}
```

View:

```
                    {{#each data}}
                        <div class="list-group-item d-flex justify-content-between">
                        <div><strong>{{this.name}}</strong></div>
                        <div>
                            <a href="/edit-category/{{this.id}}" class="btn btn-sm btn-warning"><i class="bi bi-pencil"></i></a>
                            <a href="/delete-category/{{this.id}}" class="btn btn-sm btn-danger"><i class="bi bi-trash3"></i></a>
                        </div>
                    </div>
                    {{/each}}
```

I am new to Node & Express, this is my first serious project so forgive me if I am overlooking something minor. Basically, the above code renders the appripriate amount of `list-group-item` but I cannot display actual data within the `list-group-item`.

What the glorp am I doing wrong?! 👽
Kubernetes Pod/Container states
Tags: kubernetes, tutorial, k8s, kubectl
Published: 2022-09-13 14:44:41

The consideration for writing this post is this stackoverflow question  [How to get the status of a particular pod or container: kubectl get pods using jsonpath](https://stackoverflow.com/questions/45851945/how-to-get-status-of-a-particular-pod-or-container-kubectl-get-pods-using-json/73691294#73691294) which even if is 5 years old it's still relevant today (32K hits).

 `kubectl` gives you a powerful means to communicate with Kubernetes cluster's control plane. It's pretty handy when it comes to checking/debugging the status of your app...but it's very important to understand the basics

Pods follow a defined lifecycle, starting in the `Pending` phase, moving through `Running` if at least one of its primary containers starts OK, and then through either the `Succeeded` or `Failed`.

You can check a Pod's status (which is a PodStatus object) using:
```bash
# status for pods in all namespaces
kubectl get po -A -o jsonpath='{.items[*].status}'
```
Within a POD's `status` you can find a `phase` field, which can have one of the following values:

- Pending = the Pod has been accepted by the cluster, but one or more container has not been set up and ready to run
- Running = all container have been created and at least one container is running in the pod
- Succeeded = all containers in the Pod have terminated successfully
- Failed = all containers in the Pod have terminated and at leas one container exited with non-zero status
- Unknow = for some reason the Pod's state could not be obtained.

Furthermore you can check the PODS which Phase is different than `Running`:
```bash
kubectl get po -A --field-selector=status.phase!=Running
```
When a Pod is being deleted, it can be shown as Terminating by some `kubectl` commands. This `Terminating` status is not one of the Pod phases.

The *kubelet* is able to restart containers, so Kubernetes tracks the *container* states within the Pod, which can be one of the following:
- Waiting =  container still running the operations needed to complete start up
- Running = container is executing without issues.
- Terminated = container began execution and then either ran to completion or failed for some reason

You can check the container states using the following:
```bash
kubectl get po -A -o jsonpath="{.items[*].status.containerStatuses[*].state}"
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqlk0xtaawuo6snjx5q1.png)

Important notes, the output of some of the `kubectl` commands can be rather verbose so you can pipe it to `jq`.

[jq](https://stedolan.github.io/jq/) command is useful for transformations that are too complex for jsonpath, it can be found at https://stedolan.github.io/jq/
Seeking early adopters for our Web3 CRM
Published: 2022-09-13 14:35:47

Sharing on DEV for visibility! I am seeking #Web3  developers/founders to test our CRM for Web3 focused on analytics. You'll have free access and be the first to try out our amazing features. Web3 is about building together, LFG!🔥🚀

Contact info: ignacio@wagmivs.com
C++da cout buyrug'i
Tags: programming, cpp, beginners, tutorial
Published: 2022-09-13 14:32:15

Ushbu maqola orqali siz,c++ dasturlash tilidagi eng muhim buyruqlardan biri bo'lgan **'cout'** buyrug'i haqida bilib olasiz.
'cout' buyrug'i elementni **'console'**ga chiqarish vazifasini bajaradi.

---

## Misol:

```
cout<<"Tug'ilgan oyingizni kiriting: ";
```
Coroutines
Published: 2022-09-13 14:30:43

A coroutine is a concurrency design pattern that we can use on Android to simplify code that executes asynchronously. Coroutines were added to Kotlin in version 1.3 and are based on established concepts from other languages.

On Android, coroutines help to manage long-running tasks that might otherwise block the main thread and cause your app to become unresponsive. Over 50% of professional developers who use coroutines have reported seeing increased productivity.

Features : Lightweight , fewer leakage ,jetpack Integration.


Based on the Guide to app architecture, the examples in this topic make a network request and return the result to the main thread, where the app can then display the result to the user.

Specifically, the ViewModel Architecture component calls the repository layer on the main thread to trigger the network request. This guide iterates through various solutions that use coroutines keep the main thread unblocked.

ViewModel includes a set of KTX extensions that work directly with coroutines.
Tricky concepts in Go for beginners
Tags: go, beginners, programming
Published: 2022-09-13 14:28:19

Go has great features, but be careful with some conventions and concepts.

## Making sense of Go concurrency

Concurrency is not exactly the ability to run multiple tasks at the same time. I read that statement everywhere, including in official documentation, but this definition is for another term: **parallelism**.

Concurrent tasks can actually run in parallel, but it's not the main goal. The difference is important, as parallelism requires multiple threads while concurrency does not.

Go provides a killer feature called **goroutines**, but many of these functions can run in the same thread, and it's the Go Runtime that allocates processes automatically. The developer only needs to write a `go` keyword before the function and can use `channels` to make multiple goroutines communicate to each other.

As a result:

> Parallelism is simply running things in parallel. Concurrency is a way to structure your program

[Source: divan.dev](https://divan.dev/posts/go_concurrency_visualize/)

This _Go magic_ is pretty cool and allows very inexpensive implementations of concurrency, but nothing is free, and not knowing the difference can lead to unexpected errors.

## Go encapsulation

Unlike many other programming languages, there's no public or private keyword to encapsulate code. Instead, Go uses capitalized and non-capitalized formats. 

You have to capitalize the name of your data structure to **export** it. 

In other words, if you need to call your structure from another package, you need to export it. It's the same for variables, functions, constants and other types. If you only need it internally in your script, you can keep it non-capitalized.

However, even the following sample can be pretty annoying to debug if you misunderstand this concept:

```go
package main

import (
	"encoding/json"
	"fmt"
	"log"
)

type user struct {
	id    int
	name  string
	email string
}

func main() {
	data := `{
        "id": 1001,
        "name": "Hello",
        "email": "hello@test.com"
    }`
	var u user
	err := json.Unmarshal([]byte(data), &u)
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(u)
}
```

Running the above code will output:

```
{0  }
```

To fix it and get the data, export the fields in your Struct:

```go
type user struct {
	Id    int
	Name  string
	Email string
}
```
Hilt Dependency Injection
Published: 2022-09-13 14:23:32

Hilt is a dependency injection library for Android that reduces the boilerplate of doing manual dependency injection. 

Doing manual dependency injection requires to construct every class and its dependencies by hand, and to use containers to reuse and manage dependencies.

Hilt provides a standard way to use DI in your application by providing containers for every Android class in your project and managing their lifecycles automatically. 

`var a = "string"`

Hilt is built on top of the popular DI library Dagger to benefit from the compile-time correctness, runtime performance, scalability, and Android Studio support that Dagger provides. For more information, see Hilt and Dagger.
Backup of Laravel Web Applications
Tags: php, laravel, database, backup
Published: 2022-09-13 14:11:33

## The Need for Backup

Generally, any web application must back up its data, including databases and objects. There are many choices available, and we are to present the alternatives.

## The Setup

A Laravel project is running in a server such as a Droplet in Digital Ocean or an EC2 Instance in AWS EC2.

There is a weekly backup of the droplet by Digital Ocean.

The project is a platform for auctions, so auctioneers and users upload media files, such as images. 

All uploaded media files are stored in Digital Ocean Spaces.

The project is deployed and managed with Laravel Forge. 

## What Do We Backup?

We are using object storage for uploaded media files. Object storage in the public clouds already has redundancy and availability, so we do not need to worry about backup for media files. 

So we need to take care of database backup only.

## How Do We Backup?

[Laravel Backup](https://spatie.be/docs/laravel-backup/v8/introduction) can back up your database at whatever frequency you choose to object storage.

Now you can have three common ways where your database may reside:

1. On the application server, together with the application
2. A separate database server
3. Managed database service

Managed database services do database backups, whose frequency may not satisfy you. 

So you have two choices to do the database backup, running Laravel Backup or using Laravel Forge to do the database backup.

## Cost Comparison

Laravel Backup is free and easy to set up. However, backups have to be monitored to make sure they are being done. This requires a separate monitoring server to be set up. The monitoring service will notify of backup failure.

This will bring up the running cost of the application.

Laravel Forge has a backup service in the Business Plan, with an additional monthly cost. The backup service includes backup monitoring with notifications. 

However, setting the backup service is simple; just fill out the setup form in Forge. 

Prices do change over time, so the break-even point in terms of the cost may shift. However, the break-even point regarding setup work is clearly in favor of Laravel Forge.
When Your Machine Learning Model Performance Starts to Fade ...
Tags: machinelearning, datascience, devops, career
Published: 2022-09-13 14:22:46

Would you raft with no paddles in a river no one had traveled before?

Hoping everything will be okay after deploying an ML model is also like that. 

ML models in production degrade in performance over time. Finding them before they happen and making a course correction is vital. 

Data scientists often use these strategies to recover their failing models. 

[3 Tested Techniques to Recover Your Failing Models](https://towardsdatascience.com/3-tested-techniques-to-recover-your-failing-models-67c070fb591?sk=500c05bf55bd51486bea06faa8d06d15)
Build awesome🔥 landing page for Apple iphone using ThreeJS + ReactJS
Tags: react, javascript, tutorial, webdev
Published: 2022-09-13 14:12:58

Hey there👋,

I have seen lot of website that render 3D model which really looks cool, So I wanted to create similar website in React JS and then I stumbled upon the three JS. Here, in this website I have used react-three-fiber and react-three-drei to render 3D model of iPhone and used GSAP for some cool scrolling animations.  

You can see the Demo from here👇
https://apple-iphone14.netlify.app/

For this project, I have used these libraries,
▶️ React JS (CRA)
▶️ GSAP for smooth scrolling animations
▶️ Styled-Components for styling
▶️ @react-three/fiber
▶️ @react-three/drei

I wanted to make it more interactive so I have added GSAP scroll-trigger for some effects on scroll. 

Here is the tutorial on how I have created this website!

{% youtube cT160dOzpGY %} 

> Before using this website for commercial purposes, make sure to check the license of all images and other assets.

I will try to improve its speed and performance.
Feel free to try different designs and animations with it, 
Try to tweak some of these effects and you can also tag me on [twitter](https://twitter.com/code_bucks) or share your link in the comments.

Any suggestions are welcomed!

### Thanks For Reading😄

Feel free to visit my youtube channel: 
[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)


Follow me on Twitter where I'm sharing lots of useful resources!
[@code_bucks](https://twitter.com/code_bucks)😉
Turn a Directive Into a Fragment
Published: 2022-09-13 03:20:49

You probably shouldn't do this. It's a bad idea. So anyway here's the code. 

```ts
@Directive()
export class Fragment {
  nativeElement;
  comment;
  childNodes

  constructor() {
    this.nativeElement = inject(ElementRef).nativeElement;
    this.comment = document.createComment(
      ` ${Object.getPrototypeOf(this).constructor.name} `
    );
  }

  ngAfterViewInit() {
    const { nativeElement, comment } = this;
    const parent = nativeElement.parentElement;
    this.childNodes = Array.from(nativeElement.childNodes)
    parent.insertBefore(comment, nativeElement);
    for (const node of this.childNodes) {
      parent.insertBefore(node, nativeElement);
    }
    nativeElement.remove();
  }

  ngOnDestroy() {
    this.comment.remove();
    for (const node of this.childNodes) {
      node.remove()
    }
  }
}
```

This will replace the host element of a directive with whatever is inside it. It even leaves a nice little comment behind.

To see how it's used let's create a provider that will pass through values from the template.

```ts
@Directive({
  selector: 'MyProvider',
})
export class MyProvider extends Fragment {
  @Input() value;
}
```

We're using TitleCase here to distinguish it from rendered DOM elements. Remember that Angular selectors are case sensitive.

Now we can import the directive and use it in a template.

```html
<MyProvider [value]="name">
  <hello></hello>
</MyProvider>
```

The `hello` component can then inject the provider to read its value.

```ts
@Component({
  selector: 'hello',
  template: `<h1>Hello {{provider.value}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
  provider = inject(MyProvider);
}
```

[See it in action on StackBlitz](https://stackblitz.com/edit/angular-ivy-fkhche?file=src/app/hello.component.ts)

When we look at the DOM we can see that the host element is replaced with a HTML comment.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/232jpcuumq15mqcv80sh.png)

## Is This a Good Idea?

Probably not. All it does is add some sugar to `<ng-container>` in a not-very efficient way. There are probably other side effects I'm not aware of. 

Can you think of a use case?
Android Shopping List
Tags: android, javascript, mobile, shopping
Published: 2022-09-13 14:06:48

Hello everyone, I finally managed to publish my first app on google play! 😍 It is nothing special but I have taken away a satisfaction!
If you give me a contribution by downloading it (it's free I don't earn anything) and putting a nice review, I would be grateful! 🙂
https://play.google.com/store/apps/details?id=io.kodular.caputoluca88.Shopping_List
The Easiest Way to Detect Device Orientation in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-09-13 14:06:07

In this post, we'll take a look at the **easiest** way to detect device orientation on the web with JavaScript.

This is compatible with all major browsers (including Safari) and works on mobile/tablet devices.

## [Video Tutorial](https://youtu.be/uXKCDwPwUZg)

If you'd prefer to watch a video, you can find my 4 minute tutorial down below on YouTube:

{% youtube uXKCDwPwUZg %}

OK, let me show you how easy this is.

### Detect Portait/Landscape Mode with `matchMedia()`

We can use `window.matchMedia(...)` to detect if we are in **portrait** mode. The best part about this is that if you're **not** in portrait mode, you must be in landscape mode.

```js
const portrait = window.matchMedia("(orientation: portrait)").matches;

// portrait = `true` or `false` 😮
```

Using the above technique, we're able to detect if a user is in portrait mode **at the current point in time.**

But what if we want to **react** when a user changes their device orientation? This includes when they rotate their mobile device.

This is easily done by using `addEventListener`.

```js
window.matchMedia("(orientation: portrait)").addEventListener("change", e => {
    const portrait = e.matches;

    if (portrait) {
        // do something
    } else {
        // do something else
    }
});
```

And that's it! Very easy to do 😎

## [Enrol Now 👉 JavaScript DOM Crash Course](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)
If you're learning web development, you can find a complete course on the JavaScript DOM at the link below 👇
[https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)

![Course Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bvgiysr9oofy3g5lxe8.jpg)

Enjoy.
Transitioning to React (from vanilla JS)
Tags: beginners, webdev, react
Published: 2022-09-13 14:03:13

## Introduction
Good morning, DEV community! Today's topic will be about my experience switching to React from using vanilla JavaScript. It was definitely a rocky start, but soon enough it became easier and easier. It takes a lot less code in React to provide the same functionality that you'd get in JavaScript! Even though there's always more to learn about it, finally learning the basics feels like a big accomplishment for me and I'm excited to share it with you guys!

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

## The Initial Shock
To start off, React is a JavaScript library that's used for building UI components. When I was first shown what syntax I'd be using for React, JSX, it didn't seem all that unfamiliar for me. Creating buttons and headers is much easier in React, so that was a pleasant surprise (provided below this paragraph is a simple example of React versus vanilla JS!) It didn't take as long for me to grasp that right off the bat, so the initial shock didn't settle in until I started learning about later concepts, such as useState and useEffect hooks. Hooks are a way for functions to access state, otherwise known as data. It can be overwhelming to learn how to use hooks when you're coming from a more simplistic approach, but that's completely fine! As web developers, we will often times be confused, but not giving up is how we'll be successful.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l4xvedw5om1qyudus6p.png)

## Wireframes
After being shown all of these new concepts, I was confused but eager to learn. At the school I'm currently attending, we were also introduced to wireframes. Wireframes are a way to visualize what you'll be building out (essentially a blueprint.) Building out these wireframes really does help you be able to create React applications smoothly without the struggle of internally visualizing what you're building. I recommend to any beginner to try building out a wireframe before they tackle their new project! You'll be surprised at how much easier it is to build them when you have a template visually in front of you.

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

## Final Thoughts
Whether you're learning about JavaScript for the first time or switching to React, we'll all struggle at some point! I learned that it's okay to take your time learning new concepts and you shouldn't feel rushed to do so. React is a great way to create applications efficiently and provides reusable components that you can use in different parts of your app (if needed!) Despite the struggles with relearning some old concepts with new syntax and learning about hooks, I think that React is fun and rewarding to use! Thank you for taking your time to read this short summary of my journey thus far.