teleren/devto huggingface dataset:
ListView and Current Data from Subcollection firebase
Published: 2021-12-16 00:40:01

My current database structure

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzc0nv09uhyuakbi09mj.png)
After the user logged in to their account, then they click a Premise button. when they click the button, a clickable list of their premise will be displayed. like this: premise screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la76j2anzsbrkuh33lyp.png)
the user can click the premise and will show the premise details.

The problem now is how to display that listview of the user's premise?
100 días de código: 43, TDD se siente como la copa de un pino
Tags: spanish, 100daysofcode, webdev
Published: 2021-12-16 00:38:27

Foto de [Alora Griffiths](https://unsplash.com/@aloragriffiths?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/s/photos/cold?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
  

¡Hey hey hey!

Bienvenidos a este día 43 del reto, como dice el refrán del titulo creo que cuando comienzas a aprender TDD sientes que vas a dominarle rápidamente pero pronto te das cuenta de la cruel realidad.

Realmente es un concepto simple que consiste en crear test para probar las funciones antes de crearlas y asi pensar en casos de uso para estas y con ese planteamiento escribir código mas limpio.

Cuando comienzas es relativamente sencillo porque aunque puedes hacerlos a mano, existen herramientas como Jest, Mocha, etc. que te permiten introducirte rápidamente y que con ayuda de su documentación comienzas a dar tus primeros pasos pero al ver el contenido ya comienzas a notar que algo no cuadra, no es realmente el panorama sencillo que te imaginabas y es que para bien o para mal, existen multitud de formas de probar una cosa u otra entre las que destaca la simulación y la prueba de código asíncrono.

Realmente es un trabajo complejo y a la vez uno muy interesante. 

Ahora para recuperar la sonrisa veamos a que dedique mi tiempo.

### Ayer:
- Practique 30 min de Touch Typing.
- Avance hasta la sección practica de Testing en The Odin Project.

### Hoy:
- Practique 30 min de Touch Typing.
- Retome el aprendizaje de Jest para el test unitario.
- Aprendí las bases para crear funciones puras las cuales principalmente se basan en crear funciones que no muten ninguna variable y no modifiquen ningun valor fuera de su alcance.
- Avance hasta la sección Introducción a React en The Odin Project.

Realmente no han sido días tan productivos pero me siento contento con mi desarrollo. 

Espero que tengan mucho éxito con sus proyectos y animo.

Adiós mundo!
Solving day 15 of Advent of Code 2021 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2021-12-16 00:24:48

---
title: Solving day 15 of Advent of Code 2021 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2021 (day 15)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2021 in Javascript
---

{% youtube 1mDDed3MlSo %}
Hand-game
Tags: python, github
Published: 2021-12-15 23:26:34

project link [https://github.com/sai-tilak/Hand-game-#hand-game-]
playing game(Rock Paper scissors) with computer. it is a hand game, usually played between two people but here we play with system . Code your own rock paper scissors game. Take user input with input(). Make the computer choose. Determine the winner.

How to play the game? Rock paper scissors is one of the classic hand games we have been playing since we were all small kids. It is typically played between two players (can be played with more than two players as well) each one forming one of three shapes (rock, paper, and scissors) at the same time, with an extended hand.!

Rules of the Game Although the coding part of the game can get a little complex the game rules are simple which are as follows:

Rock wins against scissors. Scissors win against the paper. Paper wins against the rock. Building Rock Paper Scissors in Python We will divide the whole game building into parts to![] make it simple for you! All the steps we will be taking for building the game are mentioned below:

Importing all the necessary modules Printing Greeting Messages and asking the player about how it wants to play the game. Creating separate functions for the following purposes: Draw the Hand Diagrams Play with the Computer! Play with a Friend!
Updates from the 87th meeting of TC39
Tags: javascript
Published: 2021-12-15 23:07:05

There were several items on the agenda, this post focuses on feature proposals and their progress from the meeting that was held between December 14th-15th, 2021.

__Stage 4:__

* [Extend TimeZoneName Options](https://github.com/tc39/proposal-intl-extend-timezonename): Extend the timeZoneName option in `Intl.DateTimeFormat` object to support more formatted options.

* [Intl.DisplayNames v2](https://github.com/tc39/intl-displaynames-v2): Adding more display names to the already favorite DisplayNames object, allowing more "items" to be displayed in a localized manner.


__Stage 3:__

* [array-grouping](https://github.com/tc39/proposal-array-grouping): A proposal to make grouping of array items easier.

__Stage 2:__

* [Array.fromAsync](https://github.com/tc39/proposal-array-from-async): Like `Array.from` but it converts an async iterable (or a sync iterable of promises) to a promise that will resolve to an array.
* [RegExp Modifiers](https://github.com/tc39/proposal-regexp-modifiers): Capability to control a subset of regular expression flags `imsx`.
* [RegExp Buffer Boundaries](https://github.com/tc39/proposal-regexp-buffer-boundaries): Buffer Boundaries also allow you to match the start/end of a line and the start/end of the input in a single RegExp using the m flag.


__Stage 1:__

* [Intl.Segmenter v2](https://github.com/tc39-transfer/proposal-intl-segmenter-v2): Unicode segmentation in JavaScript.


<hr/>

<center>[@gnumanth](https://twitter.com/gnumanth)</center>

</hr>
OSD600 Release 0.4: Plan 
Tags: osd600, opensource
Published: 2021-12-15 23:03:36

## Introduction

In this blog, I am going to give a brief review of what I have planed to do for this stage of the project. At this stage, we are encouraged to submit more pull requests in the GitHub open source development community, meanwhile, do  some code reviews in 

## Plan

The plan including the issues I was trying to get assigned, including an issue from [IBM](https://github.com/IBM/compliance-trestle/issues/883), this was an issue about "Create a custom jinja tag to insert a specific markdown content header". I found this issue is interesting and doable. Another issue was from [Microsoft China](https://github.com/microsoft/qlib/issues/691), this is a project about Quant Trading. 
Moreover, since I was not sure if I could get those issues assigned, I reached out to a Seneca Open Source project [Telescope](https://github.com/Seneca-CDOT/telescope). For this project, I took two issues, the first one is a small [issue](https://github.com/Seneca-CDOT/telescope/issues/2521) of update of the API url, and the second one is a larger [issue](https://github.com/Seneca-CDOT/telescope/issues/2511). This issue is about debugging the value of `referenceButton` value of the Telescope build-log dashboard. This variable had an uncaught type error, and its details remain to be investigated through the Console log.

## Code Review
The most interesting part of contributing to Open Source project is reading the Code Review and providing Code Reviews. With the Seneca Open Source projects, we are given the right to give Code Reviews. So I will provide at least one Code Review during this project.
Day 498 : Saturday
Tags: hiphop, code, coding, lifelongdev
Published: 2021-12-15 22:53:25

_liner notes_:
- Professional : Got stuff done, but not as much as I would have liked. I did get to clean up and update some code, but I didn't get to update the corresponding blog post. Had a couple of meetings and a presentation in one.

- Personal : Did a whole bunch of refactoring on my side project last night. In the previous version, I repeated some code in a couple of places. I took out the duplicate code and made it its own component and just called it from the different pages. Cool. Only thing is that when it was duplicate, things were available, but now that it's only loaded at a certain point, I need to get that data another way. So I worked that out. Got a lot of it working like in the original. I was using CDNs to load certain libraries and noticed that errors were popping up every once in a while about something not being available. Looked at the network tab and saw errors coming from the CDNs. Maybe they were having issues because of the AWS shutdowns, not sure. Spent some time installing the libraries and referencing them in my code. It should make the site faster since I don't have to wait for files from the CDN. We'll see. Also, noticed that some data that I was expecting wasn't there because it changed when a library got updated. That took some time.  

![Rows and rows of yellow tulips in a field in Skagit Valley, WA, United States with mountains in the distance under a blue sky with every large clouds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irk7zuprvjiifnguq5hj.jpg)

I keep saying this, but I'm super close to finishing this side project. There's just a couple of weird UI issues that I need to figure out, then fill out some data and then make everything look nice! I also need to go through some tracks for this week's radio show as well. I want to most if not all of this stuff done before Friday evening because I've got some goodies on the way and want to play from Saturday and beyond for my holiday break. haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube ahsWIMfzFWo %}
Prototype in javascript
Published: 2021-12-15 22:50:06

 The prototype is an object that is associated with every functions and objects by default in JavaScript. Prototype property is accessible and modifiable and object's prototype property (aka attribute) is not visible. Every function includes prototype object by default. This allows you to define properties on objects that can be accessed via the object’s instances.

let us look at an example

```javascript

let person = {};

person.name = "David";
person.age = 45;

person.eat = function() {
console.log(`person is eating`);
}
```
Here we are creating new instances for the object. If you console.log this object you won’t see any methods, but you can use methods like set or get for the object prototype.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwugv2wnerya1x1eu60z.jpg)

When you use map, JavaScript looks for map in the object itself. If map is not found, JavaScript will try to look for a Prototype. If JavaScript finds a prototype, it continues to search for map in that prototype.

So the correct definition for Prototype is: An object that instances can access when they’re trying to look for a property.

#### Prototype chain
When a property is accessed in javascript, javascript checks to see if the property is available inside the object. If yes, JavaScript uses the property straight away.  If the property is not inside the object, JavaScript checks if there’s a Prototype available. If there is a Prototype, repeat Step 1 (and check if the property is inside the prototype). If there are no more Prototypes left, and JavaScript cannot find the property, it does the following:

Returns undefined (if you tried to access a property).
Throws an error (if you tried to call a method).
SPO600-Lab6, Project Stage 3: SVE2
Tags: spo, simd, aarch64, sve2
Published: 2021-12-15 21:20:43

## Introduction

In the previous [blog](https://dev.to/qiwenyu/spo600-lab6-project-stage-2-23fk), I introduced the Python numeric calculation package NumPy and the SIMD optimization implemented in it. I have checked the code: 

```
#ifdef _MSC_VER
     #include <Intrin.h>
 #endif
 #include <arm_neon.h>

 int main(void)
 {
     float32x4_t v1 = vdupq_n_f32(1.0f), v2 = vdupq_n_f32(2.0f);
     /* MAXMIN */
     int ret  = (int)vgetq_lane_f32(vmaxnmq_f32(v1, v2), 0);
         ret += (int)vgetq_lane_f32(vminnmq_f32(v1, v2), 0);
     /* ROUNDING */
     ret += (int)vgetq_lane_f32(vrndq_f32(v1), 0);
 #ifdef __aarch64__
     {
         float64x2_t vd1 = vdupq_n_f64(1.0), vd2 = vdupq_n_f64(2.0);
         /* MAXMIN */
         ret += (int)vgetq_lane_f64(vmaxnmq_f64(vd1, vd2), 0);
         ret += (int)vgetq_lane_f64(vminnmq_f64(vd1, vd2), 0);
         /* ROUNDING */
         ret += (int)vgetq_lane_f64(vrndq_f64(vd1), 0);
     }
 #endif
     return ret;
 }
```

As ARMv9 is approaching, I am thinking that NumPy should support the improved SIMD implementation called Scalable Vector Extensions v2 (SVE2) coming together with ARMv9.

## SVE2

It is important to know that the existing implementations are for fixed-width SIMD, while SVE2 is variable-width, and that AArch64 code will need to detect either at compile-time or runtime whether advanced SIMD or SVE2 SIMD instructions should be used.

SVE2 is following the development of Neon architecture, which has a fixed 128-bit vector length for the instruction set. SVE is an extension to AArch64, and a superset of SVE and Neon, to allow for flexible vector length implementations. SVE improves the suitability of the architecture for High Performance Computing (HPC) applications, which require very large quantities of data processing. Particularly, SVE2 can be implemented from 128 bits up to 2048 bits with 128 bits increment.

## Code Example and Recommendation

The code examples were provided in [official documentation](https://developer.arm.com/documentation/dai0548/latest).
In this documentation, the **Section B** of Generic Vector and Matrix Operations examples are very useful for update of NumPy SIMD optimization.

They have example such as shown below for vectors dot-product with complex SP floating-point elements:

```
struct cplx_f32_t {
float re;
float im;
};
void vecdot(int64_t n, cplx_f32_t* a, cplx_f32_t* b, cplx_f32_t* c) {
cplx_f32_t acc;
acc.re = 0;
acc.im = 0;
for (int64_t i = 0; i < n; ++i) {
acc.re += a[i].re * b[i].re - a[i].im * b[i].im;
acc.im += a[i].re * b[i].im + a[i].im * b[i].re;
}
c->re = acc.re;
c->im = acc.im;
}
```
My Coding Bootcamp Odyssey - Week 8
Tags: beginners, react, webdev, codenewbie
Published: 2021-12-15 21:25:25

## Vanilla & Icing

Once again  [Northcoders](https://northcoders.com/)  gave us the vanilla and the icing on the cake, the rough and the smooth, the good and the bad (you decide which is which!)

We were shown the Document Object Model (DOM) - how your browser "sees" the HTML served up to it. We learnt how to manipulate it, listen for clicks and validate forms. All with "vanilla" JavaScript (AKA JavaScript - see it now needs to be distingushed from other things like "HTML-in-JS", anyway more of that later)

As a consequence of that I can now type `document.getElementById` and `.addEventListener` with my eyes closed 🙄

This was all leading up to a thing called - tada - React

> 
A JavaScript library for building user interfaces

What is this strange beast? Turns out it is quite a cool thing that means I don't need to close my eyes anymore. It has its own version of the DOM, a "virtual" one that is really a lot faster than the boring old original one.

Also JavaScript XML (JSX) which allows you to combine JavaScript and HTML and avoid all that stuff that I could type with my eyes closed. It is HTML-in-JS. If that is a mind bender this is an example of JSX:
```jsx
const element = <h1>Hello, world!</h1>;
```

What?! Yep that little beauty does away with all the `createElement`ing and `appendChild`ing , this is a React element that does all that shizzle for you. 🤯 eh?

Neat, huh?

Now as this is front end stuff we needed to start doing "designs" for a React website to build. This is where I confess I am **very** not confident as I consider myself very bad at "design" of any sort. So what I present here is in that context.

So after learning a bit about planning an app, React state, props and components (controlled and uncontrolled) I came up with my first React app and below is a little video of it in use.

Actually for all my flippancy I really enjoyed using React and can see the benefits for medium/large (and maybe some small) projects. Looking forward to learning more after a well deserved Christmas break.

Merry Christmas all X

## My First React App

My image gallery has the following features:
* Pre-populated with 3 images randomly pulled from picsum.photos
* A button to add a random image to the gallery
* Each image has a delete button to remove it
* A sort function for sorting on file size or date taken

I used state, props and components to build the app virtually from scratch using create-react-app.

There are lots of enhancements I envisage including:
* Uploading photos from a computer or URL
* Storing the gallery in local storage or external database for persistency
* Extracing metatdata from images to populate the date taken, file size, and many other data potential fields
* Popups for full size image viewing
* Etc....

{% youtube L-d_UclMKNE %}
Pattern Search - Naïve Algorithm
Tags: algorithms, computerscience, programming
Published: 2021-12-15 21:01:05


Pattern Searching algorithm is string matching algorithm which is used to find a pattern or a substring in another string.

#1) Naïve Algorithm: 

![string and pattern](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy1ywwfzb8bulwj0wbc4.png)
- Slide the pattern over the string and check for the match.
![Search 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5x3wzdbq6i5qmbmgffk.png)
- Once you find the match, start iterating through the pattern to check for the subsequent matches. 
![Search 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5bu3zqfb9oy0oiu875q.png)
- Length of pattern has to be less or equal to length of string, if pattern's length is greater than length of string return pattern not found.
```python
def naïve_algorithm(string, pattern):
    n = len(string)
    m = len(pattern)
    if m > n: 
        print("Pattern not found")
        return
    for i in range(n - m + 1):
        j = 0
        while j < m:
            if string[i + j] != pattern[j]:
                break
            j += 1
        if j == map:
            print("Pattern found at index: ", i)

string = "hello"
pattern = "ll"
naïve_algorithm(string, pattern)

```
###Time Complexity: 
Complexity | value
--- | ---
*Best* | **O(n)**
*Worst* | **O(m * n)**

- Where **m** is the length of **pattern** and **n** is the length of **string**.
####Best Case - O(n): 
Happens when the string doesn't have the pattern. 
####Worst Case - O(m * n): 
Happens when: 

- All characters in both string and pattern are the same. 
- All characters in both string and pattern are the same except for the last character.
You can't create a constant using useMemo in React
Tags: webdev, javascript, react, ui
Published: 2021-12-15 20:19:56

There are 3 possible options to create a constant in React: `useState`, `useMemo` and `useRef`. We're going to see which one is the best way to create real constants (not constant-like values).

I talked about the [`useConst`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/hooks/src/use-const.ts) hook from [chakra-ui](https://chakra-ui.com/docs/hooks/use-const) in a [previous post](https://dev.to/cloudx/chakra-ui-the-hidden-treasures-1gl9), and I recently found the same hook in [Fluent UI](https://www.npmjs.com/package/@fluentui/react-hooks#useconst) so we are going to see why they've implemented it.

## Remember useMemo

The first thing I think of when I look for a constant in a render function is the use of [`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) hook. This is a good option, but only if your "constant" value shouldn't change based on the dependencies.

```javascript
const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b),
  [a, b]
);
```

There is no guarantee that the returned value of `useMemo` is always the same even when the dependencies didn't change. For this reason React runs the factory function if the tool believes that the value should be re created.

🧠 The official documentation says:

> Write your code so that it still works without `useMemo` — and then add it to optimize performance.

## The useState option

If a state doesn't change, then it's a constant.

```javascript
const [value] = useState(initialValue);
```

Yeah, we can create a constant with [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate) but it's expensive due to reducer handling which we don't need.

🧙‍♂️ If you want to learn how React handles its hooks inside the Fiber reconciler, you should read the [Fiber hooks](https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js) code.

## A useRef approach

The [`useRef`](https://reactjs.org/docs/hooks-reference.html#useref) hook can hold a value, and it neither has an internal reducer nor checks on the dependencies array. Also, React doesn't re-create the value for performance reasons.

```javascript
const useConst = (initialValue) => {
  const ref = React.useRef();
  if (ref.current === undefined) {
    ref.current = typeof initialValue === 'function' ? initialValue() : initialValue;
  }
  return ref.current;
}
```

💡 This is the cheapest way to create a constant value over the lifecycle of a component.

## Conclusion

❌ Don't use `useState` to create constants because it's expensive.

🥸 If you need a constant-like value based on some dependencies then `useMemo` is for you (but your code should still work without this hook).

✅ If you need a real constant over the lifecycle of a component, `useRef` is the solution that you need, and remember that some libraries like Chakra UI or Fluent UI provides a built-in `useConst` for this.

![He-Man saying you shouldn't use the use state hook, and riding his motorcycle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7i8z6fhbdayy7bqqboph.png)
Dynamically Create Jenkins Executors Using Docker
Tags: docker, jenkins, devops, containers
Published: 2021-12-15 20:42:07

Jenkins is great until you run out of executors and are waiting on other jobs to finish before you get to run yours.

Inspired by and based off of https://devopscube.com/docker-containers-as-build-slaves-jenkins/ I created a simple docker image that uses Volta to install NodeJS so I can farm jobs to a pool of docker containers that dynamically provision and disappear as needed when jobs complete.

{% github jonathan-irvin/jenkins-docker-nodejs %}
Calculating length of ntext data type with T-SQL
Tags: tsql, query, mssql
Published: 2021-12-15 20:27:47

> We use the LEN() function when calculating the length of a String field. But when you use this function in fields with ntext datatype, you will get the following error.
```sql
Argument data type ntext is invalid for argument 1 of len function.
```

In this case, another function you can use as an alternative is DATALENGTH()

But DATALENGTH returns us the number of bytes instead of the number of characters. Each character in the String is 2 bytes.

For example, if the result is 28, it means it's 14 characters. 
```sql
select top 1 datalength(NameSurname), NameSurname from Customer order by CreateDate
```