teleren/devto huggingface dataset:
Ideal Code, I can't today
Tags: angular, therealworld, bestpractices
Published: 2021-09-01 15:42:44

## The real world, is rarely ideal

Today, I had to hack it. And I don't mean hammer on the keyboard to get a feature done. Nor do I mean "debug it until I make it", I mean, work against everything I think good, ideal code is. I mean, make something that I feel like it shouldn't be in a code base, part of a library until legacy code is updated.

###Backstory

We have an angularJS application, running with jQuery, MVC, and various libraries written for that stack. I've been architecting for months now a path to Angular using ngUpgrade. Most of it has been going great:

1. Make a thing
2. Set up the components, services, and classes to make an Angular native and well designed pattern.
3. Do a little hackery with window variables from the MVC views.
4. Looks good, functions well, and doesn't break anything the Angular creators would warn against in a style guide.


### Hacking it
This though, isn't something I ever thought would be a thing.
Todays goal: 

1. Create a parent Angular component
2. Define some meta data to pass to a directive component
3. Have the directive convert the parent components meta data to HTML
4. Insert the HTML into a rendered element from a library
5. Have the child component attach the parent component's functions to the window as a function for the onclick attribute of the library rendered angularJs / HTML to call. 

### It worked!

And it works!

I can create an instance of a class, and assign it something like:

```typescript
myFunction(myArgument: type){
  // the stuff we need to do in the parent component
  // from the 3rd party angularJs/ Jquery library inserted to the 
  // DOM in a child component rendered HTML
}

element.Function = this.myCallbackFunction;
```

I am both stoked that I was able to get the basic functionality, but also heartbroken that I had to write something this janky.

### Conclusion

The real world is rarely as ideal as the code standard we push. I don't know how long I will have to support this code, but until the called library is fixed / modernized we are stuck. I pity all of our developers just learning Angular, and who might have to grok this concept. And I especially fear for those supporting it years or a decade down the road if the library isn't ever modernized properly.
Chaotic Comparison
Published: 2021-09-01 15:24:24

```python
# chaotic_comparison.py
#   A simple program comparing chaotic behavior between an x value and
#   a y value in a table format.
# by: Scott Gordon

def main():

    # Add user input for two initial values and the number of iterations.
    print("***** Welcome to Chaotic Comparison *****\n")
    x = float(input("Enter a value between 0 and 1: "))
    y = float(input("Enter a second value between 0 and 1: "))
    print()

    # Print a formatted table showing how the values change over time.
    print(f"index {x:>5} {y:>10}")
    print("------------------------")
    for i in range(1, 10+1):
        x = 3.9 * x * (1 - x)
        y = 3.9 * y * (1 - y)
        print(f"{i:2} {x:>10.6f} {y:>10.6f}")


main()

```
Photo by <a href="https://unsplash.com/@sloppyperfectionist?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Hans-Peter Gauster</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Where can I find projects to join as beginner webdev?
Tags: codenewbie, beginners, opensource, webdev
Published: 2021-09-01 14:59:33

Hello. I am learning Frontend for 3 months and I'm bored with coding projects alone, so I'm looking for place where I can find projects or peoples to cooperate. I was researching into 'first commits' but they are 2 types of projects: 
- your first commit (just basics of github)
- super hard project with a lot of libraries

But I'm looking for community like on Discord or something where I can finds peoples that are looking for programming buddies
Android Game with Angular Ionic
Tags: angular, ionic, android, game
Published: 2021-09-01 14:57:05

Hello, I create this post only to share my first trivia game for Android created with Angular Ionic 5.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08pyg75zct2u8p5rr5kb.gif)

I did this small game to get some knowledge with Angular Ionic, I already have experience working with Angular, and was easy to adapt to Angular Ionic.


It's a simple game about flags from countries, you have to select the correct one. (I know you can found a thousand games similars)

I still working to improve and fix some bugs, but the game is already done to play.

Also, this game has a ranking where every user can compete with other players.

If you are starting with angular ionic like me and need help creating your first game, let me know I will try to help you.

If you want to download the game for Android:

https://play.google.com/store/apps/details?id=com.fsystem.flageando&gl=ES
Hindsight 20/20: Querying Any Point in Time
Tags: sql, database, datascience
Published: 2021-09-01 14:52:15

Today I'll be showing you how to use transactions to simulate snapshots in [bSQL](https://bsql.org/). Because of its multi-version protocols users can access old data by running queries with a set *query time*. By setting a *query time* all subsequent queries run as if they had been run at that time. This allows for analysis of old versions of the database, giving you rich data insights. The following diagram illustrates snapshotting in traditional databases and setting the query time with [blockpoint's](https://blockpointdb.com/) immutable database.

![snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08hr0dl9318psvj7nt76.png)

## Syntax
```
SET TRANSACTION 
    QUERY TIME <query_time>
    
<query_time> ::=
    timestamp
    | STATE
```

`QUERY TIME`
Sets queries to run in a snapshot-like environment at the time specified. Values that were [AMENDED](https://bsql.org/docs/mutations/amend) or [DISCONTINUED](https://bsql.org/docs/mutations/discontinue) after the specified time will be restored and relational entities are guaranteed to hold.

  > [!NOTE]
  > The query time is currently specified in UTC time format.

*STATE* 
Specifies that queries should operate normally, on the current state of the system.

- Limitations
    - [LIFETIME queries](https://bsql.org/docs/query/time-travel) and `QUERY TIME` are mutually exclusive. An error is thrown if a lifetime query is run on any version other than `STATE`.
    - Queryies run on a previous database version always use the `READ UNCOMMITTED` isolation level. 

*timestamp*
The time to read from. *timestamp*   can be specified as a timestamp in quotations or an expression that computes to a valid timestamp.

### Setting the query time.
We can use the `QUERY TIME` keyword to simulation a snapshot at the time specified. Because the system continuously tracks changes setting the transaction time should have only a small effect on performance. Although all the statements below were technically committed, we can still view previous states. 

```sql
CREATE BLOCKCHAIN users TRADITIONAL (id UINT64 AUTO INCREMENT PRIMARY, name STRING PACKED);

INSERT users (name) VALUES ("john"), ("jimmy"), ("jeff");

--Assume Time = "2021-02-26 00:07:10.000000000"

DISCONTINUE users (id, name) VALUES (1, "jimmy");

SET TRANSACTION QUERY TIME "2021-02-26 00:07:10.000000000";

SELECT * FROM users;
``` 

### OUTPUT
Since "jimmy" was inserted into the blockchain before the specified transaction time. The record persists in that state of the database.

| ID | NAME |
|----|------|
|0|john|
|1|jimmy|
|2|jeff|

### Conclusion
Although this example is trivial, the same logic is used for audits and data analysis. It uses the database structure in a unique way to give users access to data evolution over time.
How to set up Moesif with Tyk API Gateway
Published: 2021-09-01 14:43:33

Looking to step up your API analytics game? Using the Moesif Tyk plugin you can easily leverage Moesif’s diverse offering to do just that!

Tyk Pump, the component used to forward analytics in Tyk, can be easily configured to forward to many different analytics backends including Moesif. Let’s walk through exactly how easy it is to start utilizing Moesif to make sense of your analytics data coming from Tyk in 5 easy steps!

Step #1: Install the Tyk Pump
If not done so already, the first step is to set up an instance of Tyk Pump which has native support for sending data to Moesif in an asynchronous design. The Moesif backend for Tyk pump handles batching and queueing automatically and Tyk Pump sits out of band from your critical path ensuring no impact to your applications. If you’re using a container orchestration layer, there is an official Docker image available on Docker Hub. 

Step #2: Sign up for a free Moesif account
Go to www.moesif.com, and sign up for a free developer account. During the onboarding, you will be provided with a guide for Tyk along with your Application Id. Application Ids are write-only API keys specific to an application in Moesif such as “Development” or “Production”. You can always create more applications in Moesif. 

Step #3: Add Moesif as a backend
In your pump.conf, you’ll need to add the Moesif Application Id and configuration you obtained in the last step. 

"pumps": {
  "moesif": {
    "name": "moesif",
    "meta": {
      "application_id": "Your Moesif Application Id"
    }
  },
}

Step #4: Reload Tyk Pump
You may need to reload the Tyk pump once your configuration is updated to take effect. You should then start seeing data arrive in Moesif. 

Step #5: Start exploring your API analytics in Moesif!
At this point you can start to really dig into the analytics gathered through Tyk within Moesif.
Developing Team Culture with Andrew Dunkman
Tags: podcast, culture, leadership, career
Published: 2021-09-01 14:21:16

Andrew Dunkman talks about setting boundaries both as an employee and a leader. He talks about ways to perform health checks on teams, keeping members happy to avoid things like burnout, and how psychological safety is of the utmost importance in a workplace.

{% podcast https://dev.to/greaterthancode/248-developing-team-culture-with-andrew-dunkman %}

Check out more awesome episodes (with transcripts!) at [GreaterThanCode.com](https://greaterthancode.com)!
A few words of shared understanding, i.e. a review of Jeff Patton's books User Story Mapping
Tags: book, review, userstorymapping, userstory
Published: 2021-09-01 14:11:16

---
title: A few words of shared understanding, i.e. a review of Jeff Patton's books User Story Mapping
published: true
description: Biased review of Jeff Patton's books User Story Mapping
tags: book, review, userstorymapping, userstory
canonical_url: https://pplotka.dev/post/jeff-pattons-user-story-mapping/
---

Recently I have finished [Jeff Patton's books *User Story Mapping*](https://www.amazon.com/User-Story-Mapping-Discover-Product/dp/1491904909). As we can read in the book summary, Jeff will explain the technique called user story mapping. In practice, in his book, the author shows us plenty of real-world examples, all of which serve another goal of usage story mapping and the consequences of not using it. So, we have the example of Gary, who is a music producer. Thanks to the story mapping, Gary was able to search the big picture and limit the scope of the project.
 
More examples discover other possible usages:
* using user story mapping to coordinate work of teams 
* using user story mapping to better estimation
* using user stories to choose features for MVP and then faster validate this MVP

In each example, Jeff smuggles a few tips on how to lead a user story workshop. Despite this, I regard this book too long and its examples too detailed. The actual content could easily fit in half of the book’s length.

For me, the main takeaway is shared understanding being the most vital. All stakeholders should understand the system goal and its features in the same way, which is more important than good written, detailed documentation. 

On my scale, the book gets [3/5](https://www.goodreads.com/review/show/4001253486?book_show_action=false). I recommend these books to every developer that would like to be more than only a coder.
Operadores Relacionais (Parte 1)
Tags: javascript, algorithms, relationaloperations
Published: 2021-09-01 14:08:15

## O que são operadores relacionais?

São operadores que criam relações entre variáveis, valores e expressões e geram resultados lógicos (verdadeiro ou falso). Em outras palavras, são operadores de comparação.

```
/*  >   Maior que  */
/*  >=  Maior ou igual a  */
/*  <   Menor que  */
/*  <=  Menor ou igual a  */
/*  ==  Igual a  */
/*  !=  Diferente de  */
/*  ===  Exatamente igual a  */
/*  !==  Exatamente diferente de  */
```

## Cuidado com `!=` e `==`!!!!!

É bom tomar cuidado com esses operadores! Existem algumas diferenças entre eles e os operadores `!==` e `===`.

```
// !=  Compara valores
// !== Compara valores e tipos
// ==  Compara valores
// === Compara valores e tipos
```

Vamos a um exemplo:

```javascript
2 == "2"; // true
```

Por que o resultado dessa comparação é `true`? Porque comparamos apenas os valores, ainda que sejam tipos diferentes (***number*** e ***string***).

```javascript
2 === "2"; // false
```

Por que o resultado dessa comparação é `false`? Porque apesar de os valores serem iguais, os tipos são diferentes (***string*** não é a mesma coisa que ***number***). O raciocínio acima também serve para `!=` e `!==`.

```javascript
2 != "2"; // false (considera somente o valor)
2 !== "2"; // true (considera o valor e o tipo)
```

E aí? Gostaram? Até a próxima anotação! 😊
React Upload Button Concept Design
Tags: codepen, react, showdev, webdev
Published: 2021-09-01 13:58:08

<h1>Upload Button Concept Design</h1>

<h2>Description</h2>

<p>This is just an experiment of web UI element.</p>

<p>After the plus mark button (Or should I say upload button) was clicked, available file types would appear, and the user may select which type of file they could upload.</p>

<p>I created few simple component to implement the buttons.</p>

<p>I created the animation only on CSS. I calculated the direction and angle where they should go depends on the number of buttons available.</p>

<p>I used <code>sass:math</code> Sass library to implement the calculation for the CSS animation and something.</p>

<h2>Resources</h2>

<p><a href="https://reactjs.org/">ReactJS</a></p>

<p><a href="https://fontawesome.com/">Font Awesome</a></p>

<p><a href="https://fonts.google.com/specimen/Open+Sans">Google Fonts (Open Sans)</a></p>

{% codepen https://codepen.io/takaneichinose/pen/RwgrwJx %}
Linux make install command
Tags: linux, install, makefile, shellscript
Published: 2021-09-01 13:56:49

While installing packages in linux, we come across the following command many times.
```
$ make install
```
Let's understand this with a simple example.

`install` is a command that was written for software installation, but it can do more than that. `make install` will do whatever instruction is defined in `makefile`.

This example uses a sample hello world C program.
```
#include <stdio.h> 
int main() {
 printf("Hello, World!"); 
}
```
Here is the directory structure of `testapp` which is created for this example.
```
$ ls testapp
installer.sh  makefile  testapp  testapp.c  testapp.conf 
```

Let's take closer look at `installer.sh`
```
#!/bin/bash
ROOTDIR=${1:-/opt/testapp}
OWNER=${2:-testapp}
GROUP=${3:-testapp}

# Create bin and opt directories
install -v -m 755 -o $OWNER -g $GROUP -d $ROOTDIR/bin $ROOTDIR/etc
if [ "$?" -ne "0" ]; then
  echo "Install: Failed to create directories."
  exit 1
fi

# install binary
install -b -v -m 750 -o $OWNER -g $GROUP -s testapp $ROOTDIR/bin
if [ "$?" -ne "0" ]; then
  echo "Install: Failed to install the binary"
  exit 2
fi

# install configuration file
install -b -v -m 600 -o $OWNER -g $GROUP testapp.conf $ROOTDIR/etc
if [ "$?" -ne "0" ]; then
  echo "Install: Failed to install the config file"
  exit 3
fi

echo "installation completed.."
``` 
All the `chown` `install` ect commands are defined in `installer.sh` and `insatller` itself is wrapped up in `makefile` so that `makefile` can be kept clean.

Here is `makefile`
```
all:	testapp.c
	$(CC) -o testapp	 testapp.c

clean:
	rm -f testapp

install: testapp
	./installer.sh /opt/testapp kiwi kiwi

purge:
	rm -rf /opt/testapp
```
In the `install` command, `kiwi` refers to the username. You can have your custom name here.

And the content of sample conf file `testapp.conf`
```
$ cat testapp.conf
testapp=testapp
```

Finally, running it.
```
$ sudo make install
./installer.sh /opt/testapp kiwi kiwi
'testapp' -> '/opt/testapp/bin/testapp' (backup: '/opt/testapp/bin/testapp~')
'testapp.conf' -> '/opt/testapp/etc/testapp.conf' (backup: '/opt/testapp/etc/testapp.conf~')
installation completed..
```
`testapp` can be found in `/opt` directory if the installation is successful.

That's a very simple example. Here is one [useful link ](https://thoughtbot.com/blog/the-magic-behind-configure-make-make-install) for further reading.

Download the code [here](https://github.com/skypy/sample/tree/main/testapp).

*Reference*:
* <sup><sub>[Shell Scripting: Expert Recipes for Linux, Bash, and more](https://www.amazon.in/Shell-Scripting-Expert-Recipes-Linux/dp/1118024486)<sup><sub>
MongoDB equivalent of SQL LIKE query
Tags: mongodb, sql, regex
Published: 2021-09-01 13:54:24

A quick snippet for anyone looking for equivalent SQL LIKE queries for mongodb.

```
db.users.find({name: /a/}) 
SELECT * FROM USERS WHERE name LIKE '%a%';

db.users.find({name: /^ja/}) 
SELECT * FROM USERS WHERE name LIKE 'ja%'

db.users.find({name: /jo$/}) 
SELECT * FROM USERS WHERE name LIKE '%jo'
```
Advanced Typescript
Tags: programming, frontend, javascript, typescript
Published: 2021-10-28 17:01:15

---
title: Advanced Typescript
published: true
date: 2021-09-01 13:42:11 UTC
tags: programming,frontend,javascript,typescript
canonical_url: https://kevinkreuzer.medium.com/advanced-typescript-43331bb4a875
---

[![](https://cdn-images-1.medium.com/max/2600/1*Rcdf1E9P6mDGTCYUiYeX7g.png)](https://kevinkreuzer.medium.com/advanced-typescript-43331bb4a875?source=rss-6cd4fff6b841------2)

Get familiar with some of Typescript's greatest advanced features.

[Continue reading on Medium »](https://kevinkreuzer.medium.com/advanced-typescript-43331bb4a875?source=rss-6cd4fff6b841------2)
Working with Vault and Golang
Tags: go, hashicorpvault, security, credential
Published: 2021-09-01 13:36:06

Hi, This is my first post on this portal.

**What is Vault:**
Vault is a tool by which you can securely access you credentials. It is developed by Hashicorp. It is similar to AWS Parameter store. It helps in managing credentials effectively.



**Sample Code for CRUD Operations in Vault:**
```go
package main

import (
	"fmt"
	"net/http"
	"time"

	"github.com/hashicorp/vault/api"
)

var httpClient = &http.Client{
	Timeout: 10 * time.Second,
}

func main() {
	token := "your token"
	vaultAddr := "your url"

	client, err := api.NewClient(&api.Config{Address: vaultAddr, HttpClient: httpClient})
	if err != nil {
		panic(err)
	}
	client.SetToken(token)

	//writing the data
	inputData := map[string]interface{}{
		"data": map[string]interface{}{
			"first": "ankit",
		},
	}
	output, err := client.Logical().Write("secret/data/abd", inputData)
	fmt.Println(output)
	if err != nil {
		panic(err)
	}

	//deleting the data
	data, err := client.Logical().Read("secret/data/hello")
	if err != nil {
		panic(err)
	}
	fmt.Println(data.Data)

	//deleting the data
	output, err = client.Logical().Delete("secret/metadata/abd")
	fmt.Println(output)
	if err != nil {
		panic(err)
	}
}

```

**Things to Focus here is code**
If we look at in this code then it is very easy to miss the write operation. We need to check `inputData` and how it is structured because according to golang object type it seems that we should use in this way rather than of how we used it.
```go
inputData := map[string]interface{}{
		"first": "ankit",
	}
```

**Where should I use Vault?**
* It should be used when we are initialising the project. 
* All the configurations should be read from Vault or any other secret manager. 
* There should be no configurations saved on server.
Wednesday Links - Edition 2021-09-01
Tags: java, jvm, spring, microservices
Published: 2021-09-01 13:34:53

3 techniques to stream JSON in Spring WebFlux (4 min)🚿
https://nurkiewicz.com/2021/08/json-streaming-in-webflux.html

The best HotSpot JVM options and switches for Java 11 through Java 17 (12 min)🔦
https://blogs.oracle.com/javamagazine/java-hotspot-jvm-switches-jdk11-jdk17

JEP 413: Code Snippets in Java API Documentation (1 min)🔣
https://openjdk.java.net/jeps/413

ShedLock with Spring Boot (2 min)🔒
https://42talents.com/blog/2021/08/29/shedlock-with-spring-boot/

It’s time to move your applications to Java 17. Here’s why. And here’s how. (10 min)💺
https://blogs.oracle.com/javamagazine/migrate-to-java-17

WireMock 2.31.0 with JUnit Jupiter support (30 sec)🪐
https://twitter.com/beatngu1101/status/1431598691228475396

IntelliJ IDEA warnings in Action (40 sec)⚠️
https://twitter.com/tagir_valeev/status/1432181190438625280

Micrometer.io tip for registering gauges that do expensive things (1 min)🩺
https://twitter.com/jon_k_schneider/status/1430938672044462083

zx - bash in JS (1 min)🖥️
https://github.com/google/zx

Useless use of GNU (10 min)💥
https://jmmv.dev/2021/08/useless-use-of-gnu.html

Software Development Waste (4 min)🗑️
https://neverworkintheory.org/2021/08/29/software-development-waste.html