teleren/devto huggingface dataset:
Angular transforming data use rxjs operators
Tags: angular, webdev, beginners, typescript
Published: 2023-01-29 06:35:32

There are several cases that I am currently experiencing, namely, How to get response data from firebase whose response is in the form of an object like this

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

Honestly it's a bit difficult to display the data as follows, and try to transform that response use RXJS operators

this is exmple code for display data or transforming data

```
///write method to get that data
fetchData(){
this.nameService.namemethodfromService().pipe(map((items: any) => {
  const arrayData = [];
  for(const key of items){
 if(items.hasOwnProperty){
   postArray.push({...items[key], id: key})
 }
  }
return arrayData
})).subscribe((value: any) => {
      console.log(value);
this.dataItems = value
    })
}

```


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


the rxjs I used is, map from rxjs/operators, pipe from rxjs

please sahre if there the other ways
Suggu Sandeep
Tags: career, saas, beginners, motivation
Published: 2023-01-29 06:35:18

Hi Everyone,
Hope You Guys are doing great :)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/koku958qir7kxnbi35q2.png)
Introducing My Self
I was born in Chapara, Srikakulam (District), Andhra Pradesh (State), INDIA. I am super Desi when it comes to Cricket and Tollywood. I love to read and travel. I volunteer regularly and passionate about social good and technology.

Currently, I am working at YASH Technologies as a SAP MDG Consultant. My job is to do Functional & Technical in SAP Era.

I love my job! I hang out with a lot of tech nerds. I am a tech and political geek myself. I regularly attend tech meetups and I know a lot of powerful people in the tech industry.

I do not like pushy people. If you are nice, I will go out of my way to help you. I like to treat people with respect. I enjoy helping people and I love to learn about new technologies... Story of my life :)

To Know more about me:
[Website](https://suggusandeep29.github.io/), [Linkedin](https://in.linkedin.com/in/suggu-sandeep-4b572a1a1?original_referer=https%3A%2F%2Fwww.google.com%2F), [Instagram](https://www.instagram.com/suggu_sandeep/), [Twitter](https://mobile.twitter.com/suggu_sandeep) & [many more](https://campsite.bio/suggu_sandeep).

I Love to Listen Songs too: [Spotify Playlist](https://open.spotify.com/playlist/32HeLFXISxtfWsJWtOUUee?si=6461a8c3c6694050).

I Love Creating Content
[SAP Community](https://people.sap.com/sandeepsuggu#about),
[SAP People](https://people.sap.com/sandeepsuggu#about),
[Blog Post](https://sandeepsuggu29.medium.com/)
[YouTube](https://www.youtube.com/@suggusandeep)
& Many more [Social Platforms](https://campsite.bio/suggu_sandeep).

:)
FizzBuzz Theory
Tags: javascript, webdev, interview, programming
Published: 2023-01-29 06:18:13


In this article, we look at FizzBuzz, a very common programming task in software development interviews. Since the solution utilizes a few major concepts, this task has become a go-to for interviewers.

If you are new to the concept, I’d recommend you follow step by step to understand the concept as a whole. However, If you are here to refresh your knowledge, you can jump straight to the solutions.

## What is FizzBuzz?

Firstly, let’s get this out of the way, FizzBuzz is a task where the programmer is asked to print numbers from 1 to 100, but here’s the catch, multiple of three should print “Fizz” and similarly print “Buzz” for multiples of 5 and lastly print “FizzBuzz” for multiples of three and five.

Although the last may seem straightforward, even seasoned programmers tend to get the logic wrong at times.

Given an integer n, return a string array answer (1-indexed) where:

answer[i] == "FizzBuzz" if i is divisible by 3 and 5.
answer[i] == "Fizz" if i is divisible by 3.
answer[i] == "Buzz" if i is divisible by 5.
answer[i] == i (as a string) if none of the above conditions are true.
```
**
 * @param {number} n
 * @return {string[]}
 */
var fizzBuzz = function(n) {
let answer = [];
    for(let i = 1; i <= n ; i++){
        if(i % 15 === 0){
        answer[i] = "FizzBuzz"
        continue
        }
        else if(i % 3 ===0 ){
         answer[i] = "Fizz"
         continue
        }
        else if(i % 5 === 0){
            answer[i] = "Buzz"
            continue
        }
        else{
         answer[i] = `${i}`
         continue
        }
    }
answer.shift();
    return answer;
};


```
Subgrid devlog.2
Tags: devjournal, tui
Published: 2023-01-29 05:42:19

## Setting up the library

Before I started this devlog, I have already spent few years learning Rust and writing various libraries. Usually as a learning tool I prefer to write the stuff by myself initially, this is how I have got a async executor library, the half baked win32 reactor and the the couple of logging libraries. The approach is very questionable, it always concerns me if I am wasting a ton of my time here. Besides of the learning explanation I have got for myself I also feel uncomfortable how the other libraries manage dependencies and making theirs performance choices. For example, once I though I need something in `futures` crate so I have added this a dependency to some demo app. When I have built the project with only `futures` dependency I have got this:

![Building the futures crate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3edje1hfsbqd82o1j9g4.png)

This was not totally that I expected thinkin about `futures` as a kind of utility code. Now for one small feature I have like 20 crates in dependencies and 45 sec of debug build.

Anyway when I proceed to subgrid I have started with some well known crates as dependencies for subgrid library and its demo app:

* `ab_glyph` - rendering font glyphs. making own ttf parsing and rendering is too much even for me. The author seems to care about his dependencies as well. 
* `winit` implement as win32 application that opens a simple GUI window
* `softbuffer` - helper library for winit to render a `Vec<u32>` as RGBA bitmap

So now I have an app that opens window and can render glyphs into the bitmap and then to a screen.
Stickers without the conference
Tags: bootstrap, stickers, conference, webdev
Published: 2023-01-29 05:40:39

About two years ago, I first released [stickertrade.me](https://stickertrade.me). Back then, [Vicki wrote about it](https://dev.to/vickilanger/no-conferences-no-stickers-joo).

It's been two years or so, but, not much happened to the site. It just... went along, with every now and then me getting an email for a sticker request, or an error from Sentry.

One thing about the site however, has bothered me from the start. Entirely inline with my frontend skills, the site looked... Questionable.


![I mean... Look at it! Screenshot of the old sticker page of stickertrade.me](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3naq80up705k4ef29rd4.png)*I mean... LOOK AT IT!*

Thankfully, finally, after 2 years, a friend of mine has started working on a Bootstrap based standard theme for the framework I used for stickertrade.me (It's Silverstripe, if you're curious).

So, I finally got out my ~awesome~ awful frontend skills, and redesigned the whole thing using only bootstrap and bootstrap elements.

I'm not saying I'm the new thing when it comes to frontend, but... it is a lot better!


![Screenshot of the new version of stickertrade.me](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqzvmdbz5h2tsyc4rd3d.png)*Not that the bar was set very high by the original design...*

So, if you are stuck at home, or unable to go to a conference to exchange stickers... Join the sticker trading revolution! (and more of those cliches) and start sharing and trading!
Change command prompt location from C to D
Tags: commands
Published: 2023-01-29 05:39:56

Assuming you are in the C directory and want to go to the D directory,

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

Use 

```
D:
```
And you will be prompted to the D drive.

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

Now you can do your works!
Inspirasi Muda Medi
Published: 2023-01-29 05:14:10

Provides information about successful youth at a very young age. so that it can provide information for us to be more innovative and creative [inspirasimuda](https://www.inspirasimuda.com/).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0eckczaj8t7kev2wpxf.png)
How to get into React Native?
Tags: reactnative, webdev, android, beginners
Published: 2023-01-29 04:31:48

To get started with React Native, you should first have a solid understanding of React and JavaScript. Here are the basic steps to getting started with React Native:

1. Install the React Native CLI (Command Line Interface) by running `npm install -g react-native-cli`

2. Create a new project by running react-native init MyProject

3. Run the project on an emulator or device by running `react-native run-ios or react-native run-android`

4. Begin developing your app by editing the files in the src directory of your project

5. Use React Native's built-in components, such as View, Text, and Image, to build your user interface

6. Utilize React Native's APIs, such as Fetch and AsyncStorage, to access device functionality and data

A simple Calculator Program:

```react
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Calculator = () => {
    const [input, setInput] = useState('');
    const [result, setResult] = useState('');

    const handleButtonPress = (val) => {
        setInput(input + val);
    }

    const handleClearPress = () => {
        setInput('');
        setResult('');
    }

    const handleEqualPress = () => {
        setResult(eval(input));
    }

    return (
        <View>
            <Text>{input}</Text>
            <Text>{result}</Text>
            <View>
                <Button title="1" onPress={() => handleButtonPress(1)} />
                <Button title="2" onPress={() => handleButtonPress(2)} />
                <Button title="3" onPress={() => handleButtonPress(3)} />
                <Button title="+" onPress={() => handleButtonPress('+')} />
            </View>
            <View>
                <Button title="4" onPress={() => handleButtonPress(4)} />
                <Button title="5" onPress={() => handleButtonPress(5)} />
                <Button title="6" onPress={() => handleButtonPress(6)} />
                <Button title="-" onPress={() => handleButtonPress('-')} />
            </View>
            <View>
                <Button title="7" onPress={() => handleButtonPress(7)} />
                <Button title="8" onPress={() => handleButtonPress(8)} />
                <Button title="9" onPress={() => handleButtonPress(9)} />
                <Button title="*" onPress={() => handleButtonPress('*')} />
            </View>
            <View>
                <Button title="." onPress={() => handleButtonPress('.')} />
                <Button title="0" onPress={() => handleButtonPress(0)} />
                <Button title="C" onPress={handleClearPress} />
                <Button title="/" onPress={() => handleButtonPress('/')} />
            </View>
            <View>
                <Button title="=" onPress={handleEqualPress} />
            </View>
        </View>
    );
}

export default Calculator;

```
View and View Controller
Published: 2022-12-26 09:33:49

**View**
  In iOS, a view is a rectangular area that displays content and can be placed within the hierarchy of an app's user interface. It is an instance of the UIView class, which is a subclass of UIResponder.

It provides the infrastructure for displaying visual content on the screen and for handling user interactions. UIView has a number of properties that you can use to customise its appearance, such as its background colour, frame, and alpha value (which determines its transparency).
You can also add subviews to a view, which allows you to create complex layouts by nesting views within one another. For example, you might have a view that contains an image view and a label view, which are both subviews of the main view.

Views are typically created programmatically or in a storyboard using Interface Builder. They are then added to the view hierarchy of an app and positioned on the screen using layout constraints. Layout constraints are a set of rules that describe how a view should be positioned relative to its parent view or to other views in the layout.

##View Controller

a view controller is a class that manages a view and its associated data. It is responsible for the presentation of the view on the screen and for handling user interactions with the view.
It is an instance of the UIViewController class, which is a subclass of UIResponder. It has a view property, which is an instance of UIView, and it is responsible for creating and configuring the view and for adding it to the view hierarchy.

A view controller can also manage the data displayed in its view, such as by fetching data from a network or a database and updating the view when the data changes. It can also respond to user interactions with the view, such as by handling button taps or gesture recognition.

## Content ViewController
 Content ViewControllers are the main type of View Controllers that we create. The Content View Controllers holds the content of the Application screen. In other words, we can say that the Content View Controller manages the discrete piece of the application content. The Content ViewController manages all the Views itself.

## Container ViewController
 Container ViewController is different from content ViewController in the sense that it acts as a parent View Controller, which collects information from the child view controllers. The task of the container view controller is to present the collected information to facilitate the navigation to the child view controllers. The container ViewController only manages the RootView, which incorporates one or more Child ViewControllers.

**ViewManagement**
  ViewController manages the hierarchy of views. As shown in the below image, each ViewController contains a RootView which contains all the content of the view controller. All the custom views needed to maintain an iOS application is added to the root view to display the content.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wboslp4f6x3x94ob2um.png)
Masalalar
Published: 2023-01-29 04:31:15

list = [3, 6, 9, 12, 15, 18, 20]
list2 = [4, 8, 12, 16, 20, 24, 28]
res = list()
odd_elelements = list[1::2]
print('Element at odd-indeks positsions from list one')
print(odd_elements)

even_elements = list[0::2]
print("even_elements at even-indeks posiysion from list two")
print(even_elements)

print('Priting final third list')
res.extend(odd_elements)
res.extend(even_elements)
print(res)


#revers() - bu funksiya biz kiritgan sonlarni tesgarisiga ogirib beradi va ekranga chiqaradi
list1 = [100, 200, 300, 400, 500]
list1.reverse()
print(list1)

#solution 2 
#-1 salbiy kesishdan foydalanish.Shunda biz kiritgan sonlarni teskarisiga ogirib beradi va ekranga chiqaradi
list1 = (300, 400, 500, 600, 700)
list1 = list1[::-1]
print(list1)

tuple1 = (10, 20, 30, 40, 50)
tuple1 = tuple[::-1]

tuple = ("orange",[10, 20, 30],(5, 15, 25))
print(tuple)
print(tuple[1])
print(tuple[2])
print(tuple[1][1])

tuple1 = (11, 22, 33, 44, 55, 66)
tuple2 = tuple1
print(tuple2[3])
print(tuple2[4])
tuple1 = tuple2[3::-1]
print(tuple1)

#range ga mashq
x = range(6)

#display x:
print(type(x))

#dict ga mashq
x = {"name": "John", 'age':36}

#display the data type of x:
print(type(x))

#set ga mashq
x = ({"Apple", "banana", "cherry"})

#display x:
print(x)

#display the data type x
print(type(x))

#frozenset ga mashq
x = frozenset({"Apple", "Apple", "Cherry"})

#display x:
print(x)

#diplay the data type of x
print(type(x))

#bool ga mashq
x = True

#diplay x:
print(x)

#display the data type of x:
print(type(x))

#bytes ga mashq
x = b"Hello"

#display x:
print(x)

#display the data type of x:
print(type(x))
Docsify.js single-page apps are indexable on Google!
Published: 2023-01-29 02:11:44

I recently got [LUME docs](https://docs.lume.io/), a single-page app, on real URLs instead of hash-based routing.

As an example, the Docsify site currently uses hash-based routing:

https://docsify.js.org

When you click an item in the sidebar, the URL will change to something like https://docsify.js.org/#/quickstart with a `/#` in the URL.

## Hash-based Routing

Since the old days, anything after the hash was dynamically modifiable with JavaScript and people took advantage of this to implement "single-page apps" with URL navigation that way. Clicking on a link would dynamically update the URL hash and the page's DOM without actually re-loading the whole site.

## History-based Routing

Eventually browsers added the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) to make it possible to dynamically modify normal URLs without using a hash. As an example, clicking on a link in the LUME docs sidebar will take you to a hashless URL like https://docs.lume.io/guide/scene-graph.

## SEO

Using Docsify's [`routerMode: "history"`](https://docsify.js.org/#/configuration?id=routermode) option switches from hash-based routing to history-based routing, and Google can see and index the dynamically-loaded content.

Here is a [Google search result](https://www.google.com/search?q=lume+%22defines+a+viewport+into+the+3d+scene+as+will+be+seen+on+screen%22) for specific text that Google has so far indexed from the LUME site.

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

Google has not indexed everything on the site yet as of this writing, and it is a slow process; I just started over a week ago.

In [Google Search Console](https://search.google.com/search-console), I can see what Google sees:

![Google Search Console screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9256qz4sxxy4npusobk.png)

# Yay!

This is awesome!

It means we can publish static websites that are single-page apps, without needing any build steps, without needing any build tools. The LUME docs site is just an HTML file with JavaScript, served from [Vercel](https://vercel.com)'s static web hosting. There is no backend, and none of the HTML pages are pre-built.
Data Type
Tags: programming, python, datatype
Published: 2023-01-29 02:05:45

revers() - bu funksiya biza kiritgan sonlarni teskarisiga o'girib beradi va ekranga chiqarib beradi.
list1 = [123,54,3654,32,777]
list1.reverse()
print(list1)

_Setting_ the specific data tupe - maxsus ma'lumot turini o'rnatish
agar siz ma'lumotlar turini belgilamoqchi bo'lsangiz quyidagi konstruktor funksiyasidan foydalaning 

                         misol uchun:
x = str("hello world")
x = int(20)
x = float(2.5)
x = complex(1j)
x = list(("apple","banana","cherry"))
x = tuple(("apple", "banana","cherry"))
x = range(6) -- range
x = dict(name = "John", age = 35)
x = set(("apple","banana","cherry"))
x = frozenset(("apple","banana","cherry"))
x = bool(5)
x = bytes(5)
x = bytearray(5)
x = memoryview(bytes(5))"""

                Pythonda uchta raqamli tur mavjud:
intejer - int - bu butun sonlar uchun 
float - bu kasr sonlar uchun 
complex - bu butun sonlar ishlatiladi
Teste sua conexão com um simples utilitário de linha de comando
Tags: linux, shellscript, bash
Published: 2023-01-29 02:05:22

O terminal **Linux** permite-nos fazer muitas coisas, e um utilitário que é muito útil não só aos devs, mas também aos demais usuários é o _**speedtest-cli**_, escrito em python pela empresa [Ookla](https://www.ookla.com/enterprise).

Esse utilitário mede a largura da banda bidirecional (download - upload) da conexão em uso, com a possibiliddade de exportar os resultados.

O utilitário não vem instalado por padrão nas distros mais populares, mas para verificar se ela está instalada digite a linha a de comanndo abaixo:

`$ speedtest-cli --version`

Se o terminal retornar o número da versão ele está instalado na máquina, caso não retorne a versão ele pode ser instalado pelo gerenciador APT:

`$ sudo apt install speedtest-cli`

Para executar o utilitário e medir a velocidade da conexão digite:

`$ speedtest-cli`

Se precisar de informações adicionais use o man ou o --help  como abaixo:

$ man speedtest-cli

$ speedtest-cli --help
Basic Linux Commands: Everyone should know in 2023
Tags: terminal, commands, linux, ubuntu
Published: 2023-01-29 01:51:20

`ls`: Lists the files and directories in the current directory.

`cd`: Changes the current working directory. For example, cd Documents will change the current directory to the Documents folder.

`mkdir`: Creates a new directory. For example, `mkdir newfolder` will create a new folder named "`newfolder`".

`touch`: Creates a new file. For example, `touch newfile.txt` will create a new file named "`newfile.txt`".

`cp`: Copies a file or directory. For example, `cp file1.txt file2.txt` will create a copy of `file1.txt` and name it `file2.txt`.

`mv`: Moves a file or directory. For example, `mv file1.txt Documents/` will move `file1.txt` to the `Documents` folder.

`rm`: Deletes a file. For example, `rm file1.txt` will delete the file named "`file1.txt`".

`rmdir`: Deletes an empty directory. For example, `rmdir oldfolder` will delete the empty folder named "`oldfolder`".

pwd: Prints the current working directory.

`man`: Opens the manual page for a command. For example, `man ls` will show the manual page for the `ls` command.
Using React Wrap Balancer to Make Wrapping Less Awkward
Tags: react, javascript, tutorial, nextjs
Published: 2023-01-29 01:15:03

Text wrapping can be pretty unpredictable, especially on smaller screen sizes. Words might be left hanging on the last line, which severely impacts readability and results in some awkward page layouts if left as is. Try showing a headline screenshot like below to a designer, and they will tell you something is off! ;)

![Before wrap balancing, the text is simply too top-heavy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyp6llvo74nqnmnjw172.jpg)

At the core is the need to add some sort of x-padding to the `h1` text. However, we want it to be dynamic so that it only affects the longer line when the shorter line is too short. This is a problem big enough that [Adobe created a jQuery plugin](https://opensource.adobe.com/balance-text/) to address this issue. However, performance issues left a lot to be desired.

Later on, [The New York Times made their attempt](https://open.nytimes.com/headline-balancing-act-6e92d3d6119) to resolve this issue once and for all, with what eventually became their [text-balancer package](https://github.com/nytimes/text-balancer).

The latest entry in this space is [React Wrap Balancer](https://react-wrap-balancer.vercel.app), which works with React 18 and also includes a `Provider` wrapper to allow code sharing between multiple balancing components across your app.

Using this, headlines look a lot more balanced, don't you think?

![After wrap balancing, the text is nicely stacked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8hy9l0h9ekaex4tknrf.jpg)

There is now also [a proposed CSS property](https://drafts.csswg.org/css-text-4/#text-wrap) called `text-wrap` which will give developers a JS-free way to control balancing, directly in CSS! Until that is finalized, happy balancing!