teleren/devto huggingface dataset:
Essential Non-Trivial Skills for Frontend Developers
Published: 2023-06-11 18:33:39


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1u6qwgklbfenqs60hw3.png)I know that there are quite a lot of developers who have just started their journey. I am aware of how challenging it can be to find valuable information that helps you grow as a professional.

Today, I would like to share my top 5 recommendations:

🔹 [Learn patterns](https://www.patterns.dev/). A concise explanation of almost every pattern that you may encounter while working. If you break out in a cold sweat after a question about factory and singleton patterns - highly recommended💡

🔹 [Advanced Static Types in TypeScript](https://egghead.io/courses/advanced-static-types-in-typescript). Best practical course related to TypeScript. Saved a lot of time and nerves. Function assertNever is my must-have for switch statements.

🔹 [Grokking Algorithms: An Illustrated Guide for Programmers and Other Curious People](https://www.amazon.com/Grokking-Algorithms-illustrated-programmers-curious/dp/1617292230). You can not use algorithms directly in your work, but it’s extremely important to understand basic structures. This book is a good entry point. Besides, it’s easy and simple to read🤓

🔹 [Design Patterns in TypeScript By Dimitris Loukas](https://www.packtpub.com/product/design-patterns-in-typescript-video/9781789347951). A broader and more voluminous explanation of patterns. And as for me one of the most understandable.

🔹 [Personal blog by Dan Abramov](https://overreacted.io). Here you can find great articles about React And some other not less interesting information. One of my [favorites](https://overreacted.io/making-setinterval-declarative-with-react-hooks/). But please, try to solve this task on your own before reading the article😉
Using UUID in AdonisJS v5
Tags: javascript, adonis, backend
Published: 2023-06-11 17:55:09

---
title: Using UUID in AdonisJS v5
published: true
description:
tags: javascript, adonis, backend
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-11 17:50 +0000
---

Just want to share simple tips how to using UUID in AdonisJS v5. This will help you to define a migration file when using uuid data type and give the default value for it. So, you will no need to use `@beforeCreate()` on model file.

Before creating the column, you need to create extension of `uuid-ossp` first by using this query:
```
this.db.rawQuery('CREATE EXTENSION IF NOT EXISTS "uuid-ossp";').knexQuery
```

Next, define the uuid column and give default value:
```
table.uuid('id', { primaryKey: true }).defaultTo(this.db.rawQuery('uuid_generate_v4()').knexQuery)
```
User Defined Functions in Apache AGE
Tags: apacheage, postgres
Published: 2023-06-11 17:44:45

User-defined functions in Apache AGE are defined using the `CREATE FUNCTION` statement. The syntax for the `CREATE FUNCTION` statement is as follows:
```
CREATE FUNCTION function_name(argument_1 data_type, argument_2 data_type, ...)
RETURNS return_data_type AS $$
BEGIN
-- function body
END;
$$
LANGUAGE language;
```
The `function_name` is the name of the function, `argument_1`, `argument_2`, ... are the arguments to the function, `return_data_type` is the data type of the return value, and language is the language in which the function is written.

The function body is a block of code that is executed when the function is called. The function body can contain any valid SQL statements.

The language parameter can be one of the following:
`plpgsql`: The function is written in PL/pgSQL.
`c`: The function is written in C.
`java`: The function is written in Java.

Once a user-defined function has been created, it can be called from a _Cypher_ query using the following syntax:

```
age_function_name(argument_1, argument_2, ...)
```

### Example
The following Cypher query creates a function called `my_function` that takes two integers as arguments and returns the product of those integers:
```
CREATE FUNCTION my_function(a integer, b integer)
RETURNS integer AS $$
BEGIN
RETURN a * b;
END;
$$
LANGUAGE plpgsql;
```

The following Cypher query calls the my_function function and returns the result:
```
RETURN age_my_function(10, 20);
```

User-defined functions can be used to perform a variety of tasks, such as:

- Filtering data
- Calculating values
- Formatting data
- Converting data between different formats

User-defined functions can be a powerful tool for extending the functionality of Apache AGE.
Configuration Managament & IaC
Tags: ansible, terraform
Published: 2023-06-11 17:37:35

## **Configuration Management** 

Configuration management is commonly referred to as IT Automation or Server Orchestration.

- CM ensures application implementation, function and performance.
- CM is key to DevOps because it can be automated with code to accomplish common tasks instead of relying on manual intervention.
- CM uses Ansible to integrate with OCI DevOps service.


![cm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhpxe7vs90ff11tp6w65.png)


## **Infrastructure as Code (IaC)**

- IaC defines, configures and provisions infrastructure using readable code, eliminating the need for manual system setup.
- IaC is a key DevOps practice that allows for infrastructure automation, which works together with the continuous delivery model.
- IaC uses Terraform to integrate OCI DevOps service

**There are 3 main task categories:**
1: _**Infrastructure provisioning**_
    - Spinning up new servers
    - Network configuration
    - Creating load balancers
    - Configuration on infrastructure level

2: _**Configuration of provisioned infrastructure**_
    - Installing applications on servers
    - Managing the apps
    - Prepare the infrastructure/servers to deploy the app

3: _**Deployment of application**_

**Distinction of phases**

**Initial setup phase** | **Maintaining phase**
------| -----
Provision infrastructure | Adjustment to infrastructure
Configure infrastructure | Add and remove servers
Initial installation of software | Update software
Initial configuration of software | Re-configuration of software

**Difference of IaC tools**
1: Automate tasks in different categories for different phases
2: Combination of 2 or more IaC tools. Example terraform does the initial infrastructure setup and manage infrastructure but also it can also do initial application setup.However Ansible can configure and management applications but also can configure already managed infrastructure


_**Note: Infrastructure as code asks, what resources are there? And configuration management asks, how are they configured?**_


_**Hence its recommended to use Terraform for provisioning and de-provisioning and Ansible for configuration, patching, deployment, and maintenance.**_


**Ansible**| **Terraform**
----|-------
Is a Configuration Management tool | Is a Infrastructure as Code tool
Support mutable infrastructure | Support immutable infrastructure
Works via SSH | Works via API calls
Follows procedural language | Follows declarative language

Benefits of configuration management for servers comes from defining infrastructure as code. This enables you to:

1: Use a version control system to keep track of any changes in your infrastructure.
2: Reuse provisioning scripts for multiple server environments such as development, testing and production.
3: Share provisioning scripts between coworkers to facilitate collaboration in a standardized development environment.
4: Streamline the process of replicating servers which facilitates recovery from critical errors.
Don't tell me how, tell me why!
Tags: beginners, programming, development, tutorial
Published: 2023-06-11 16:38:03

Is it clear this is about comments? If not, wouldn’t it be better if the title were “Comments: Don’t tell me how, tell me why!”?

This is a problem we see everywhere. There are comments that without any context mean nothing. Others you would need to read the whole code (or article) to figure out the meaning and even then it might be misleading or just outdated.

This should probably apply to most cases, but you really want a clear, clean code that anyone can read and figure out what's happening.

That is unless you really need some less readable, more complex code for any reason (usually because of performance). In this case, then please do comment on what is happening and how. But also do…

## Comment the WHY!

Why are you using less readable code?

Why shouldn’t I change the order of something?

Why is this here?

Why was this used instead of XYZ?

Depending on what you’re doing, your level, and that of your colleagues, something commonplace for one would be rocket science to another. This is not what this is about.

If you have to revisit the code the next month, you should know what the code is doing by reading it. The thing is: why is that here?

Some pieces can be self-explaining like `transformXtoY` but why and where should I do that?

I’m also not saying to put a “why” everywhere, but if you revisit the code and spend time figuring out something, or if even after refactoring it someone is always confused about something… then yes, add a “why”.

Not only that, Pull Requests are a great source to find some of those places that need commenting on the “why”. 

On the PR someone asked why you did something? 

Don’t just tell them! Not only that, don’t do it outside the PR and call it a day. 
Refactor the code, add the comment of why it’s there, and then every time someone revisits that piece of code it will be there the why.
Set the value of datetime-local input field from an Date object
Tags: javascript, html, beginners
Published: 2023-06-11 17:31:34

We can use `datetime-local` to let user enter a date-time string. Most browsers have already implemented a native UI for it. It should be the most ideal way to have date-time input.

```html
<input 
  id="start-time" 
  type="datetime-local" 
  name="start_time"
>
```

The input is always blank at the beginning. I wanted to give it the current time as its default value but it didn't work.

```javascript
const currentTime = new Date()
document.getElementById('start-time').value = currentTime // does not work
```

Because `datetime-local` only accepts a specific string value, `YYYY-mm-ddTHH:MM`
* `YYYY-mm-dd` is the year-month-date
* `T` is just the seperator of date and time
* `HH:MM` is the hours and minutes

Therefore, instead of assigning a `Date` object directly, you have to convert it first into that form. You can use `toISOString()` because the it will convert the Date object to
`YYYY-MM-DDTHH:mm:ss.sssZ` and the first part is exactly the same format the `datetime-local` needs.

```javascript
const currentTime = new Date()
document.getElementById('start-time').value = currentTime.toISOString().slice(0, 16);
```

However, it has a problem that it will use the UTC time which is timezone `+00:00`. I guess not so many people live within that time zone compared to all populations on Earth. I think most developers want to convert that to the local time.

Unfortunately, I found it ridiculously difficult to do that because there's no suitable method for handling that. I think it's due to the fact that most languages have a method similar to `strftime` so we are used to using an existing method to do what we want. There are some methods like `toLocaleString()` which seems like we can convert Date into some specific format but none of the format fits our needs. It feels like a basic functionality so I don't want to use any other libraries, either. 

Finally, with some help from chatGPT and looking up of MDN page of the Date library. I finally realize the best to do that is to compose the string by myself.

```javascript
// getFullYear, getMonth, getDate, getHours, getMinutes all return values of local time.
const convertToDateTimeLocalString = (date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");

  return `${year}-${month}-${day}T${hours}:${minutes}`;
}
const currentTime = new Date()
document.getElementById('start-time').value = convertToDateTimeLocalString(currentTime)
```


## Reference
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
HTML Elements and Div. Positioning
Tags: beginners, css, webdev, frontend
Published: 2023-06-11 17:21:15

The **CSS** property called position controls the rendering of HTML elements and divs by specifying where they should appear on the screen. 

The Position property has five primary attributes listed as follows:
- static 
- relative 
- fixed 
- absolute 
- sticky

> It is important to note that all HTML elements and DIVs are positioned **static by default**, but this attribute can be changed to any of the available options listed above to suit our development goal.

Since all HTML elements and divs are positioned static by default, let's start by looking at how the static attribute affects the positioning of these elements. 

- 
**Position: static;**

Since all HTML elements and Divs have their position attribute as static by default, you might not always see this property and attribute used in those elements and Divs. 

Most of the time, removing the default static attribute is the reason you need to use the position property alongside other attributes other than static.

> With **attribute static**, The element or div with only aligns according to the document flow. 
> They do not move across the page as we desire.
 

---

Here is an illustration.

[Box1](https://codepen.io/whozormah/pen/bGQdLgy)


![Static Position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnkkkz4mzw6qn5f3kipy.PNG)

In the example shown, there are two divs in the HTML document's body section. The child div with the class name box1 and the parent div with the class name container. 

The position property of the child div (box1) includes the attribute static, along with additional attributes like top, bottom, and left that work with the position property to determine where an element should be placed in the document.

The child element did not respond to the top, bottom, or left properties, as you can see.

Why 😫 ?

This is simply because **static position** only follows the regular document flow, not our desired setting. 😎

Again, if you run the code with the position attribute commented out, the outcome would be the same because the default property would still be present.

[without Position Property]

```
.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  /*position: absolute;*/
  top: 50px; 
  left: 50px; 
}
```
(https://codepen.io/whozormah/pen/qBQdxeM)

See my next post on the relative attribute. 🙂
Launching DevTools
Tags: startup, sideprojects, webdev, beginners
Published: 2023-06-11 17:19:54

Thrilled to unveil "[DevTools](https://ray.run/tools)," an all-in-one, free utility toolkit. From JSON to YAML conversion, line sorting, to JSON tree visualization - it's got it all!
Why DevTools? Unlike the ad-infested and SEO-optimized fluff out there, DevTools is ad-free, super usable, and online. Designed by a developer, for developers, its nifty features include:

* Practical tools: Only the ones I personally use
* Quick Load: No waiting, just working
* Switching ease: Jump between tools using cmd+k
* Personalization: Save preferences right in the URL
* Transparency: Open-source libraries for each tool, revealed
* Privacy: 100% client-side operation, even works offline
* User-friendly: Double-categorized tools (e.g., function and technology)
* Feedback-ready: Send me your thoughts directly
* Bonus: Related tools handpicked for every tool

Try DevTools and share your feedback.

https://ray.run/tools

I would in particular appreciate:

* Suggestions of tools for your use cases
* Feedback on the design and usability (like the eaee of finding tools)
DAY 8 - Jump Game
Tags: programming, learning, cpp
Published: 2023-06-11 16:37:38

Hello to anyone reading this. I am still relatively new to coding and this platform as well, so please feel free to drop any corrections/advice for me.
I am trying to do the 100 Day-Challenge of consistent coding and this is Day 8.Looking forward to a positive interaction with all of you.

Today we are going to do a rather famous question. Well it's one of my all time favourites.

## DAY 7 Problem 1: Jump Game

_You are given an integer array nums. You are initially positioned at the array's first index, and each element in the array represents your maximum jump length at that position._

_Return true if you can reach the last index, or false otherwise._

_Example 1:_

> Input: nums = [2,3,1,1,4]
> Output: true
> Explanation: Jump 1 step from index 0 to 1, then 3 steps to the last index.

_Example 2:_

> Input: nums = [3,2,1,0,4]
> Output: false
> Explanation: You will always arrive at index 3 no matter what. Its maximum jump length is 0, which makes it impossible to reach the last index.


## Approach:

Although we can take many approaches to this question such as using basic recursion and using DP with recursion. We are going to solve this question using greedy approach.
Let's note down the observations first.

Let's assume we have a finger at the starting index and the max jump is index's value. The value our finger can point maximum is that index + index[value]. We just need to make sure when we are going through the array if the final position or our goal is ever in our reach.

Hence we are being greedy and not worrying if we are able to reach the final position. We are just worrying if we can reach any position than the current index we can reach.

## Code:

```
bool canJump(vector<int>& nums) {
        if(nums.size() == 1)
        {
            return true;
        }
        if(nums[0] == 0)
        {
            return false;
        }
        int reach = 0;
        for(int i = 0; i < nums.size(); i++)
        {
            if(reach < i)
            {
                return false;
            }
            reach = max(reach, i + nums[i]);
        }
        return true;
    }
```

Let's do a dry run of our approach on Example 2: for better understanding.

- At the start we are at index 0. Hence our reach is 0 as well.
- Then inside the loop our reach updates to (0 + nums[0])  which is basically 3.
- Our reach is index 3.
- Then traversing the array further , we see our max reach comes again to be the same index. Hence it is not updated but it does not return false as our reach is still greater than equal to our index.
- Then at the end of our loop our reach finally reaches at end when it finds that our reach(which basically stays at 3) is less than index(4).
- Hence it returns false.

I hope this example 2 helped in understanding the approach better.

This is it for today. Thanks for reading the post.
Hey - want to learn to code the Canvas?
Tags: learn, zimjs, canvas, javascript
Published: 2023-06-11 17:15:04


[ZIM](https://zimjs.com) is the easiest fastest way to code the HTML Canvas with nice simple JavaScript!

```
new Circle(100,red).center().drag();
```

We have an online editor at https://zimjs.com/editor and this has a [Starting Example](https://zimjs.com/editor/view/Z_9B2FV)!


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hm3daudtk4j5sgiu55jh.jpg)](https://zimjs.com/editor/view/Z_9B2FV)

Have fun!
Composite Data types part 2
Tags: apache, postgres, database, json
Published: 2023-06-11 16:27:10

In part 1 we discussed the composite datatypes part 1. Now in part 2 we will discuss part more on composite datatypes. Our focus would be on Maps. 
## Maps:
You can construct maps in cypher.
A simple map using an agtypes. 
Query: 
The below query represents a literal maps with simple Data types.
```
SELECT *
FROM cypher('graph_name', $$
    WITH {int_key: 1, float_key: 1.0, numeric_key: 1::numeric, bool_key: true, string_key: 'Value'} as m
    RETURN m
$$) AS (m agtype);
```
It returns the map in the graph.

### Maps using Composite Data types:
A map can also contain composite data types e.g. lists and other maps.
Query:
```
SELECT *
FROM cypher('graph_name', $$
    WITH {listKey: [{inner: 'Map1'}, {inner: 'Map2'}], mapKey: {i: 0}} as m
    RETURN m
$$) AS (m agtype);
```
The above query will return the list and map on the screen.

You can also access the properties inside the map while querying. For example below query will return the value of the int key which in turn is 1.
Query:

```
SELECT *
FROM cypher('graph_name', $$
    WITH {int_key: 1, float_key: 1.0, numeric_key: 1::numeric, bool_key: true, string_key: 'Value'} as m
    RETURN m.int_key
$$) AS (int_key agtype);
```


You can also access list elements in the maps.
Query:
The below query contains a list of maps. You can access the contents of the list using square brackets and an index number in it.

```
SELECT *
FROM cypher('graph_name', $$
    WITH {listKey: [{inner: 'Map1'}, {inner: 'Map2'}], mapKey: {i: 0}} as m
    RETURN m.listKey[0]
$$) AS (m agtype);
```

You can also read about lists in the part 1 of the blog [here](https://dev.to/talhahahae/composite-data-types-part-1-1d8g).

## References: 
You can follow for more content on age website and github.

1. [Apache age](https://age.apache.org/)
2. [Apache age Github](https://github.com/apache/age)
is collab good enough for video processing for training a model for lips reading
Tags: ai, cnn, deeplearning, gpu
Published: 2023-06-11 16:00:21

I am trying to choose a final year project as lips reading but there are resources problems that needs to consider can google collab provide engough GPU and RAM to train model on LRW dataset which consists of 40 GB with 4 parts each with 10 GB how much approx time will be required if i train the model in google collab