teleren/devto huggingface dataset:
Ng-News: Episode 22/35
Tags: javascript, webdev, programming, angular
Published: 2022-09-05 22:59:49

{% embed https://youtu.be/MGFuhFJGjOk %}

## ng-conf

Last week's main event was ng-conf, an Angular conference, where we had almost 10 talks from members of the Angular team. Unfortunately, the videos are not available yet but they will be published on YouTube in a couple of weeks.

## Alex Rickabaugh on Standalone Components

{% embed https://youtu.be/kE_zr5ZiPWc %}

AngularNation published a video with Alex Rickabaugh, member of the Angular team, where he answered questions about Standalone Components. Edge cases in the area of routing, providing services, or circular references were discussed. 

My personal highlight was Alex mentioning arguments for using the new 'inject' function over the constructor-based method. For example, the inject function provides type safety for injection tokens, and we can hide certain DI requirements like the @Optional.

It was a very educational video because Alex explained and live-coded at the same time.

## Article series on Standalone Angular applications

Lars Nielsen started an article series, where he discussed and will discuss various aspects of Standalone Angular applications. These articles are advanced, so the content is more detailed than the official documentation.

{% embed https://dev.to/this-is-angular/angular-revisited-standalone-angular-applications-the-replacement-for-ngmodules-238m %}

## Cypress 10.7 & nx 14.6

Other than that, Cypress, an E2E testing framework, was released in 10.7. Its component test runner has generic support for projects that don't follow the Angular CLI conventions. That means it runs on nx.

{% embed https://docs.cypress.io/guides/references/changelog#10-7-0 %}

Nx is a popular alternative to the Angular CLI had a minor version release to 14.6. It runs now Angular 14.2.

[Release Notes nx 14.6](https://github.com/nrwl/nx/releases/tag/14.6.0)
An Iterative solution to Binary Tree Pre-Order Traversal in Python3
Tags: python, leetcode, algorithms, tutorial
Published: 2022-09-05 22:55:52


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/564lzwehk7gveik2upoe.png)Binary Trees are hierarchical data structures in which each parent node has at most 2 children nodes. In today's article, we will go over an important topic that shows up in plenty of technical coding interviews.

**PROBLEM STATEMENT**: Given the root of a binary tree, return the preorder traversal of its nodes' values. **Provide an iterative solution instead of a recursive one.**

**SOLUTION:**

Pre-Order Traversal in a Binary Tree happens in this order:

- Visit the root first
- Traverse the left subtree
- Traverse the right subtree

In order to solve this problem with an iterative solution, we will have to implement the **Stack** data structure. This is a non-linear data structure in which the operations are carried out in a LIFO(Last In First Out) order. The approach to our answer is simple and will be as follows:

- We will initialize two lists i.e one to carry the output and another to act as our stack data structure. The stack will be initialized with the root value of the binary tree.
- We will then perform a while loop on our stack for as long as it has a value. In the loop, the following operations shall be carried out in order:
- Remove(pop) the top most value(the root node) in the stack and append it to the output list
- Push the right child of the popped value into the stack
- Push the left child of the popped value into the stack
- Return the output list at the end of the loop

As a result of this process, the root value will be accessed first, then the left subtree, and then the right subtree values will be accessed last.

It is important to note that the right child is pushed into the stack first then the left child. This is because of the LIFO nature of the stack. Doing so will allow us to access the left child first before the right child.

**TALK IS CHEAP, SHOW ME THE CODE:**

```
# Definition of a Binary Tree node
class TreeNode:
    def __init__(self, val=0, left=None, right=None):
        self.val = val
        self.left = left
        self.right = right
class Solution:
    def preorderTraversal(self, root: Optional[TreeNode]) -> List[int]:
        output, nodestack = [], [root]
        while nodestack:
            node = nodestack.pop()
            if node:  # preorder: root -> left -> right
                output.append(node.val)
                nodestack.append(node.right)
                nodestack.append(node.left)
        return output
```

If this piece was helpful, please feel free to like and subscribe to my newsletter for more DSA content in Python.
Comparing Dev.to and Medium - Interest of Audience?
Tags: growthhacking, devjournal, beginners
Published: 2022-09-05 22:49:40


![twitter](https://media.giphy.com/media/MNa0HKdhc3SGQ/giphy.gif)

I started [my Twitter](https://twitter.com/TechTim42) recently (no kidding, I always joined social network very late), the problems I found for Twitter (as a main blog/content system) are:
- Content Limit to 250 Characters, which it means you have to cut your own content, and sometimes, I really want to write something longer, like 250 words instead of 250 characters.
- No edit after post, as a non-English speaker, it was quite easy for me to make some language mistake, a feature to edit the post is a real top feature request for me.


## Dev.to vs Medium

This is why I started to write on dev.to and medium. Recently I started to compare these two platforms, these are what I found so far.


**Medium Stats**
![Medium](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gz5p14jpdloyqm9poeh.png)

**Dev.to Stats**
![Dev.to](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4i9dfhq0tczx45ka2j3.png)


## Comparison Table


| Question      | Result | Note |
| ----------- | ----------- | -------|
| Which Platform's users like more tech stuff? | [**Medium**](https://medium.com/@TechTim42) | This is very surprising, I assumed Architecture related post would be more popular on dev.to, but actually the one about culture and feedback was more popular on dev.to, the post about architecture was more popular on medium. On Medium, the post for hexagonal architecture has 1k read, on Dev.to it got 250. |
|Which is easier to gain followers, and interactions from audience?| **dev.to** | Through these two articles, about new 50 followers on Dev.to, while 16 new followers on Medium|
| Which is easier to get (re-)tweeted? | dev.to | Dev.to really tweet articles on Twitter, I got 2 or 3 articles were tweeted by dev.to community twitter account. |

## Summary

![blogging cat](https://media.giphy.com/media/eC5ruROw794s/giphy.gif)

Both dev.to and Medium are great content maker platform, **dev.to is more a community**, therefore, they will tweet your post, and users like to follow each other. On the other side, **Medium is more a blog platform**, they have more users as well, hence, more technical posts are easier to be seen.

## FAQ
> Is this result accurate?
No, it is not, because the data is so small. 😁
- This result was gained from 2 posts only.
- The traffic for the posts were small.

> Then why you post it?
- Just for fun. 😎
- Tried to summarize things at a stage in case forgetting in the future

> Some other interesting topics? 
- Which platform UI is better for Reader? Or [which platform UI is better for tech writer?](https://ritza.co/articles/devto-vs-medium-vs-hashnode-vs-hackernoon/)



## References

These are the two posts I made on dev.to and medium.

{% embed https://dev.to/timhub/how-to-give-feedback-and-receive-feedback-3g27 %}
{% embed https://dev.to/timhub/learn-to-build-a-hexagonal-architecture-micro-service-l1h %}
LeetCode -[Roman to Integer] JS variations
Tags: javascript, leetcode, algorithms, tutorial
Published: 2022-09-05 22:40:23

This is one of the lit LeetCode problems that is supposedly "easy". This is certainly not easy but "beginner friendly" after a few trials and errors, (This is where you will shine if you keep at it!). I won't get into the whole description of the problem, rather start discussing this right away assuming you know why you are here. In case you do not know about this problem, [here is the problem](https://leetcode.com/problems/roman-to-integer/).

So, since you know that roman integers are counted with few English letters. They are I, V, X, L, C, D, M and each of them has associated numeric value. the very first thing I'm gonna do is to store these values in an object.

```
const romanD = {
		  I: 1,
		  V: 5,
		  X: 10,
		  L: 50,
		  C: 100,
		  D: 500,
		  M: 1000,
	};
```
Now the thing is, there will be random input (strings) coming in as roman symbols. We have to sum them up. For instance, if the input is 'III' the sum will be 3, since I has a numeric value of 1. So, 'XV' would be 15 and so on. Only difference is, if ANY of the input value has less value than the next one, that would be subtraction, not addition. For instance,
`XL === 40` but not `60`. 

The very first thing I do is pseudo-code. Thanks to CS50!

```
//store the roman value {}

//split the input

//have an accumulator variable

//run a loop over

//if the curInput < nextInput (substract) else (sum up)

//return or console.log the accumulator
```

Now the first code is with a traditional ForLoop. Goes like this -



![With Traditional forLoop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ll82kzdzmmuutyo6s9h.png)

Ok, In case, this too abstracted for you, here is the **simplified version** -

![simplified version of the for loop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9noptefpj43v4vurnpe4.png)

hope this is pretty self-explanatory for you. In case not, leave me a comment I will break down the issue for you.

Now, another variation with **ForEach** loop now. Goes like this -


![With ForEach looop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3supj6molplwevmaxs3x.png)

In case this is abstract again, look at the simplified version up there. It's just the if..else statement that you know. notice that we were able to run a **forEach** here since we `split()` the input, which gives us an array. Ya, I know, I haven't mentioned them. **Here is the full blown code** ...



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

With a forLoop, the *execution time* is between - `78 to 102ms`.
with a forEach, the *execution time* is between - `74 to 100ms`. 

Although, your machine's hardware quality impacts this time as well.
PHPen
Tags: php, codepen, learning
Published: 2022-09-05 22:21:54

Not the first, but a simple one.

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

Just in short: 
**It is what it sounds like, a PHP variant of CodePen.**

## Functions
- Write any PHP code in the editor on the left, click `RUN` or `control` + `Enter`.
- Save your code by simply writing a name in the text field above.
- Load existing scripts using the dropdown menu.

## Technical

The content of the code editor is written to a PHP file and displayed in the iframe on the right.   
**It's that simple :-)**   
The rest is a bit of javascript to enable linking, saving and loading files.

Link to repo: https://github.com/KoljaL/PHPen
Day 149: Hello CSS!
Published: 2022-09-05 21:48:12

Hi!
Yeah I'm getting started with CSS. Today I decided to stop fighting with CSS and finally admit that there are tons I still need to learn (including the basic) so that I should start all over again. I noticed that there are several cool CSS materials to check out but most of the ones I was able to find were paid courses interactive courses websites. decide to peak a random book called "CSS in depth"  but it looks like it's just the perfect one for me in the very first chapter I was able to understand some of the thing i always found complicated and I think it may be a very good book overall. Learning a lot of CSS is now on my priority list as I want to be more comfortable with Frontend works so I will be digging the book deeper from now on I think it will be the main focus for tomorrow as well

Signing off...
How to use nodejs libs in react native?
Tags: reactnative, node, javascript
Published: 2022-09-05 20:41:08

React native is a different javascript running environment from browser and nodejs. If a library works in the browser or nodejs, it doesn't necessarily mean it will work in react native.

Recently I built an app called [PreCloud: Encrypt before upload](https://www.peng.kiwi/precloud), with which you can encrypt texts and files, then you can upload the encrypted texts and files to wherever you want, making any cloud provider an encrypted storage. It's free and [open source](https://github.com/penghuili/PreCloud). Give it a try :)

I used [openpgpjs](https://github.com/openpgpjs/openpgpjs/) to do all the encryption and decryption. It works perfectly in the browser and nodejs, but not in react native :(

There is a [react-native-openpgp](https://github.com/orhan/react-native-openpgp), but it's not very popular and seems under heavy development still.

---

While I read the source code of the [Filen app](https://github.com/FilenCloudDienste/filen-mobile), I came across [nodejs-mobile-react-native](https://github.com/nodejs-mobile/nodejs-mobile-react-native). 

The project will build a nodejs into your app, then you can use almost all nodejs libraries in your react native app, it's very cool.

The nodejs part lives in a `nodejs-assets` folder, and it communicates with react native through events.

Very easy to setup, check their [readme](https://github.com/nodejs-mobile/nodejs-mobile-react-native#readme), or see how it works in [my app](https://github.com/penghuili/PreCloud).

---

Drawback:

1. It will make your app size much bigger. For a normal app, the apk or the iOS build can be 80+Mb. (The android aab file will be smaller though, 20+Mb). But it's so helpful, I accept it;
2. It only supports nodejs 12 for now. But they are looking to [upgrade it to node 16](https://github.com/nodejs-mobile/nodejs-mobile/pull/3);

---

And if you are interested, try my [PreCloud](https://www.peng.kiwi/precloud) app, to protect your privacy.
Play store: https://play.google.com/store/apps/details?id=com.precloud
App store: https://apps.apple.com/us/app/precloud/id1638793841

Like I said in the beginning, it's free, open source, and has no tracking and no server.
Your users are not your sole audience
Published: 2022-09-05 20:38:28

One of the first things beginners in software engineering learn is to dote on their source code. As if getting up to speed with the latest tech stacks & platforms was not challenging enough, the industry (not without reason) places great emphasis on *how you code*. One hears about phrases like *human centric design* & *testability,* and wonders what the problem is if one's software *just works*. 

> Why can't the thing just work?
> 

One needs to undergo a *mindset shift* to realize that code must be written not only to make the end product work, but also to be readable to other developers. That is, of course, if one does not wish to solo their way through the entire project lifecycle (not a great idea for anything long term). 

So the idea to internalize is that your *source code* is also a product. That's the product you use to demonstrate your skills (*sell*) to your future employers/collaborators, with whom you then collectively sell your *software* to users. Once you have this mental model set up, it's much easier to make sense of software engineering *culture* and understand where the vast amount of literature (blog posts, video, podcasts, etc) comes from.

## *Social* trumps all

Human beings tend to get social about the things they do, no matter how technical or mathematical they are. That's called [Conway's law](https://en.wikipedia.org/wiki/Conway%27s_law) or something. Namely that organizations design systems that mirror their own communication structure. What happens if you apply this law to an industry? See what I mean?

People generally also care more about the social aspect of their work than just technical correctness, or even mastery. That's why opinions, conventions and standards start to matter. Developers have tastes and it's easier to work together when those tastes are in tune. That's one reason (among others) why you hear *empathy* talked about so much in developer circles.

## Organizational thinking 

There's another important aspect. Any large influential project or organization must necessarily involve many people. While it may naively seem that multiplying effort multiplies output, it takes great foresight & management skills to make *one plus one greater than two.*


![Photo by Austin Distel (@austindistel) on Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/easeiv4l9om9ur6vdysa.jpeg)
*Photo by Austin Distel (@austindistel) on Unsplash*

## Behaving oneself

Most of the non-programming skills engineers need to master are just that. Project management skills in the context of software. While much of this is commonly learnt like gospel, in a “this is how you do it” sort of way, there's value in sticking to the basics and realizing that professional engineering is a social process, and there are notions of manners. While many of these manners aim to improve productivity / simplify architecture, some of them have idiosyncratic origins. And that's ok. Just important to distinguish them from the technical skills, to understand the motivations behind workflow choices.
My Steam market pricing API
Tags: steam, api, php, laravel
Published: 2022-09-05 20:34:57

If you don't know, the gaming platform Steam has a complete economy. This include trading, selling, buying and collecting. At some random moment I decided to buy some cases(lootboxes) for CS;GO. The only downside was is that my inventory was one big chaos. So I decided to tidy it up into Storage Boxes. Sadly I could not track the amount of items nor the value. So I started my spreadsheet.

![Storage boxes spreadsheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbjagrs62rh376cretu2.png)

As you see now, I have prices. But at that point I needed to find a away to get the item price. So I got to work with a Google App Script extension for my method.

![Custom Steam spreadsheet function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6x5kl7nc6h6s65t9ci7.png)

This worked fine, and the temporarily solution I wrote this with also worked good. But I wanted more and something that I owe. So I re-coded my portfolio ([check it here](https://gitdevries.com)) and implemented a simple system to store Steam Items. And I made it 🎉🎊🥳.

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

Now that I could see what markets were being tracked and I could query on, I needed to test out a list of all the items😁 So...
`GET /steam/730/items`

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

For now I will improve some imperfections and changes I want to make. For example add a price history and make it public via **RapidAPI**(https://rapidapi.com/user/xJoeyv). Also I would love to improve my response type. 

It was a cool journey to scrape steam market items and I learned quite a bit. And managed to scrape a lot of pages and 18K items within 1:30.
XCode Code Snippet
Tags: swift, xcode, snippet, beginners
Published: 2022-09-05 20:32:10

Hi friends,

Here is a little trick for XCode beginners.

Have you ever wonder how you can improve your coding speed?
Here is a basic trick for speed up, code snippet.

For example you are developing an app with SwiftUI, actually it doesn't matter SwiftUI, Swift, Obj-c, etc. You can even use snippets as creating comment blocks.

Here are steps for creating snippets.

1. Write block which will use as snippet

``` swift
struct CodeSnippetDemo: View {
    var body: some View {
        Text("Hello, World!")
    }
    
    @ViewBuilder
    private func <#func name#>() -> some View {
        
    }
}

struct CodeSnippetDemo_Previews: PreviewProvider {
    static var previews: some View {
        CodeSnippetDemo()
    }
}
```
![screen shot of above code block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfm0y7by4ngq34t03vuo.png)

2. Select whole block
3. Then use menu as "Editor -> Create Code Snippet"
4. You can change information as you want. Top block field is name of snippet. Below block is holding platform informations. Trick point is "Completion" field. Because when you type what you used in completion field, XCode will ask you to complete with "that" snippet.

![snippet creation view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y57m1vtu8k11yj0bsvdy.png)

![snippet completion example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26xxuzxipwqk6125jkho.png)
📘 Neo4J Bloom : Install & Storytell 🎞️
Tags: datascience, neo4j, codenewbie, tutorial
Published: 2022-09-05 20:28:51

## ❔ About

On a daily basis, we use [`Neo4J Bloom`](https://neo4j.com/product/bloom/) to discover data and prepare our data storytellings.

> This tool helps us produce high quality content with very low effort.

Essentially our process workflow is :

1. Load data and make some check with [`Neo4j Browser`](https://neo4j.com/developer/neo4j-browser/) to check that everything is fine
2. Switch to [`Bloom`](https://neo4j.com/product/bloom/) to efficiently prototype queries, visuals and perspectives

## 🧑‍🎓 What you'll learn

In this post, you'll learn : 

- How to install an app from [`Neo4J app gallery`](https://install.graphapp.io/)
- Use Bloom from scratch and interactively build some visuals

## 🛒 Install apps from app Gallery

{% youtube CorRJHu1fro %}

## 🍿 Bloom walkthrough

{% youtube 4f7LAtm4pSw %}
Is this the end of localhost? VS Code Server Preview
Tags: vscode, webdev, node, javascript
Published: 2022-09-05 20:16:20

We're going to take a look at VS Code Server which is currently in private preview. I'm going to walk you through the features of VS Code Server that I've already tested having used it for a few days. Features such as Github auth and port forwarding will be discussed in the video. 

I'll also be talking about how we can host VS Code Server on our local home lab server. One of the features that VS Code Server does not implement yet out of the box is automatic start up. In this video, I provide steps on how we can automatically start VS Code Server so that it starts every time a system reboot occurs


{% embed https://youtu.be/CpWv8ATpAfw %}