teleren/devto huggingface dataset:
Should React opt for compile time instead of Virtual DOM?
Tags: react, svelte, javascript, discuss
Published: 2020-10-11 16:34:12

I am front-end developer who loves working with React. I am really impressed with Svelte's approach for reactivity and I just wanted community's input on my thoughts.

React drastically changed the way we develop frontend apps, but Svelte definitely redefined reactivity with it's approach to compile time optimizations vs Virtual DOM.

#Why
Everyone talks about switching from one framework to another but if React could ditch Virtual DOM, and start adopting compile time optimizations, that would be best of both worlds.

React is already very much mature, has lots of tooling available and lots of community support. Developers will be able to continue using the existing tools with much more improved React.

#How
I am just putting my thoughts here. There are lots frameworks which are using React internally like Next JS, Gatsby etc. All the frameworks and tools will definitely be affected as well if React changes it's underlaying architecture.

But may be React can do an opt-in phase like how it did during React 16. This will allow a slow transition into a new React.

#What are your thoughts?
Let me know what you guys think about this. Is it possible? or is it unnecessary?
A Chinese hacking team develops an insoluble "virus"
Published: 2020-10-11 16:23:59

A Chinese hacking team develops an insoluble "virus"
Kaspersky's team of researchers has discovered a new type of virus that cannot be eliminated even after a factory reset "Format" or a new operating system download.
It was found that this type of virus named "IntelUpdate.exe" was developed by a hacking team from China, and this team used the virus for the purposes of spying on computers even after reinstalling the operating system as this virus exploits the Extensible Firmware Interface (UEFI) Which are found independently on the motherboard in the ROM memory.
It is noteworthy that the attack has so far targeted diplomats and private organizations in Asia, Europe and Africa, with a common denominator between them, which is their relationship with North Korea.
📌 Screpy is not equal to Ahrefs!
Tags: showdev, devops
Published: 2020-10-11 16:11:02

Because Ahrefs is a backlink and SEO tool. [Screpy](https://screpy.com) not just an SEO tool. Screpy is a website analysis and performance tool.

###What can you do with Screpy?

🌟 Stop worrying about missing important website metrics or checking multiple platforms.

😍 Screpy combines the top website analytics and SEO tools you need to make sure your website is performing at top speed.

🔎 Stay on top of your most important metrics. SEO Audit, Pagespeed, W3C Validator, Uptime Monitoring, and Google Rank Checker (SERP) are all included with Screpy.

🔝 Get downtime alerts, verify all the W3C standards on your website, and track your keyword ranking.

👍 With Screpy, you can test your website and monitor page speed all in one easy-to-use dashboard.

📊 See all your stats in one place, so you can identify and correct any issues and optimize your website based on real-time data.

❤️ Improve your website performance with access to all the analytics and tools you need.
Write your first shell script 
Tags: linux, shell
Published: 2020-10-11 16:06:15

The Shell is a layer between the Operating System(OS) and the user.🐚 It is a user interface for access to the operating system and it uses either a command-line interface (CLI) or a graphical user interface (GUI). In Linux and MacOS this CLI is called Terminal, in Windows Command Prompt.

You can write scripts for the shell which can be used for various purposes, such as executing a shell command, running multiple commands together or performing task automation.

It's easy to get started with shell scripting, let`s create a “hello world” shell script for Linux:

1. Open an editor and write:
`#!/bin/bash
echo "Hello World"`
2. Save it with a name of your choice with .sh at the end.
(I chose “hello.sh”)
3. Open your Terminal at the path where you saved the file.
4. Execute `chmod +x hello.sh`  to make the file executable.
5. Execute “./hello.sh”

Thats it! What are you up to today? Anything you want to share about the Shell? Have a nice day!😊
My Software Developer Mission Statement
Tags: career
Published: 2020-10-11 16:01:09

I recently moved to a new company. Changing companies is often a hard choice, with repercussions that will inevitably have lifetime consequences. Looking back to the process that led me to move, I observed I was driven mainly by instinct. And this was true for every other decision I took regarding my career up to that point.

While instincts can be extremely useful in decision making, I felt somewhat uneasy with my apparent lack of intentionality. Not understanding my path entirely could easily lead to me wasting time on something that doesn't fulfill me entirely, and I'm not sure what opportunity costs I've paid so far. So I decided to prepare myself to be more intentional from now on.

Inspired by the book  ["Essentialism: The Disciplined Pursuit of Less" by Greg McKeown](https://www.goodreads.com/book/show/18077875-essentialism?ac=1&from_search=true&qid=w9SvwdQVlm&rank=1), I decided a reasonable way to start being more intentional would be to write my own mission statement. Now, I've participated in multiple "craft our mission" processes before, and I hated all of them. They all ended up with a group of people wordsmithing sentences full of platitudes. But thought that by doing it for yourself, you remove most of the variables that make mission crafting not work for teams and companies.

My goal at the end was to have a sentence that I could, just by looking at it, answer questions like: "Should I take this project or not?" "Should I join this team or not?" "Should I learn this technology or not?" "Should I join this company or not?"

For a couple of weeks, I meditated on the subject, taking notes of questions, ideas, and insights. I then let those ideas sit a bit before putting them together on a cogent sentence that reflected my beliefs in an informative way. The sentence is the following:

> "Write beautiful, long-lasting, essential software that works efficiently and directly influences human lives, making it better and more sustainable."

It is a sentence with some loaded and subjective terms. For example, the concept of beautiful software will vary drastically from one person to the other. But it works for a personal mission statement. From my own perspective, I know precisely what beautiful software means. And it is a great starting point for a conversation with others.

More importantly, in the process of crafting this mission statement, some beliefs I have emerged clearly, and are embedded in the sentence in a way I'll keep being reminded of them every time I look at it.

Of course, my ideas about software and my goals as a person that crafts them will still change. But the process of making those ideas and goals concrete brought up a good deal of self-understanding, which I hope will help me focus more from now on.
Choosing Between Angular, React, Vue and Svelte – 4 Tips!
Tags: angular, react, vue, svelte
Published: 2020-10-11 16:00:00

Choosing between modern web frameworks can be hard, especially if you’re not familiar with all of them. But don’t worry, I don’t either and you won’t have to as well. However, here are 4 tips on choosing the right tool for your next project.

![Choosing the right framework can be hard](https://dev-to-uploads.s3.amazonaws.com/i/fv1xswxz8z42buhyh6i6.jpg)

## 1 Choosing based on Project Requirements
Look at the requirements of your project. Which technology framework fits the best? Is there already existing code written using a certain library? Then it wouldn’t make sense to choose a different one, right? Do you need server-side rendering and optimal SEO support? Choose something that supports it like NextJS or Nuxt. Need inline-styles for whatever reason? Go React. Need superfast rendering speed and code cleanliness? Try Svelte. Need an all-in one TypeScript solution without the need for 3rd party libs? Go Angular.

## 2 Team Skills
Look at your team. If you have 5 Angular developers and 1 who knows React. Does it make sense to kick off using Vue? Leverage the skills and knowledge you already have except if you’re actively looking to expand your team’s knowledge. In this case I recommend to pick which ever framework you know the least about.

## 3 Personal Preference
Don’t let your personal preference make the choice. Look, I’m a huge React/JSX fan but before I start a new project I ask myself: Objectively, is React the right choice here or should I use something else? Don’t pick a certain technology because that’s what you’ve been using for the past months and know the most about. Get out of your comfort zone!

## 4 Leaving the Comfort Zone
Let’s say you discussed with your team which library to use and you decided on the one you like the least and don’t have much experience with. GREAT! See it as a challenge to expand your skillset and learn more about a piece of technology you’re not familiar with. It’ll grow your skillset and give you better chances on the job market in the future. Now get out there and do some coding!

<img width="100%" style="width:100%" src="https://media.giphy.com/media/yoJC2K6rCzwNY2EngA/giphy.gif">

For more dev tips you can follow me here on social media:

- [My Blog](https://www.timo-ernst.net/)
- [On Twitter](https://www.twitter.com/timo_ernst)
- [YouTube Channel](http://www.timoernst.tv/)
About graph databases 
Tags: database
Published: 2020-10-11 15:58:23

Hi, lets talk about graph databases.😊 A graph database is composed of two elements: **nodes** (vertices) and **relationships** (edges). A node is comparable to an entity in relational databases, the relationships connect the nodes. Properties are similar to attributes of a relational database, they are key-value pairs that can be stored on both nodes and relationships.

You can add labels to the nodes and relationships to specify their type. The data model of graph databases is called the labeled property graph model. Cypher is the query language for graphs. Here is an example for creating two nodes with a relationship:

`CREATE (ee:Person { name: "Emil", from: "Sweden"})–[:WORKS_FOR]->(:Company {name: ”Google”})`

It is a CREATE clause to create data.
- () parenthesis to indicate a node
- ee:Person: a variable 'ee' and label 'Person' for the new node
- {} brackets to add properties to the node
- [:WORKS_FOR]→ specifies the relationship to the Company node.

If you now want to retrieve these nodes with their relationship write:

`MATCH (ee:Person{name:’Emil’}) –[:WORKS_FOR]->(m) RETURN *;`

Neo4J is the most popular graph database managament system at the moment. On their website you can use a sandbox with predefined datasets to play around, on the picture I queried the “Crime Investigation Dataset”. :) They also have a lot of info for beginners, find the link at the end.

What do you know about graph databases? Have a nice evening! :)
Reference: www.neo4j.com
#0 Open Source Alternatives
Tags: opensource, selhost, alternatives, discuss
Published: 2020-10-11 15:54:13

Open source software has blown up quite well now that a good percentage of people have turned to it. Gone are the days (well.. mostly) when a "free" product was dealt skeptically because it sounded too good to be true.

Recently I started a purge of a certain kind - kicking out proprietary products as much as I can. I became successful in a few areas. So I decided to write a series of articles which could help people who are into self hosting and have been eager for quite some time, to switch to open source products.

I will only be covering a handful of them so you're more than welcome to suggest more. I'll definitely try them and write about them.

Also, this is my first time writing developer articles so bear with me. This is a new experience but as far as I've seen in the [dev.to](dev.to) community, it's going to be a wonderful one too.
Introducing my little app that tracks any product’s price on Amazon.
Tags: webdev, mongodb, react, node
Published: 2020-10-11 15:37:35

Project Link: https://trackerbase.herokuapp.com/

In this article, as I had written the documentation (at https://github.com/yewyewXD/React-Amazon-Price-Tracker), I will walk you through using this app step-by-step.

It might take a few seconds to load because Heroku (a hosting platform) will put my app to Sleep Mode if it's inactive for 30 minutes.

1. Log in (you can log in as a guest) or create an account (please don't use your real info for this demo app). Note that guest mode will disable the database and backend CRUDs.

2. View "dashboard" and click the "plus" button to track a product's price. In the "Product URL" field, you can either paste the link of any Amazon product detail page or simply use our demo link.

3. Label your track record in the "Name" field, enter your ideal/target price in the "Expected Price" field, and hit the "Track" button.

Now your product is being tracked!

To edit, use the "Edit" or "Detail" button (it depends on your device).

To delete, select a track record, and then use the delete button.

To get the latest price info of all your tracked products, just click on "Update all".

**If you wanna suggest something or contribute to this project, leave a comment and let me know! Thank you for reading, stay safe!
Have anyone tried Ts.ED Node js framework ?
Tags: discuss, node, javascript
Published: 2020-10-11 15:32:10

Have anyone tried Ts.ED framework for creating node js REST api services. As I'm using it for our client application. I found that it should be very successive, but not sure why no one is talking about this in node community.

**If any one wants to have a look at a framework** [Ts.ED](https://tsed.io/)
Ruby 2.7.2 has revised Rdoc for Array
Tags: ruby, array, documentation
Published: 2020-10-11 15:25:00

---
title: Ruby 2.7.2 has revised Rdoc for Array
published: true
description: 
tags: ruby, array, documentation
---


I've spent a good part of this year working on revisions to the RDoc for Array. The revisions include all methods documentation in addition to much of the introductory text (class documentation). Lots more example code.

Check it out:
- 2.7.2: https://ruby-doc.org/core-2.7.2/Array.html
- 2.7.1: https://ruby-doc.org/core-2.7.1/Array.html
Open source projects you can contribute to this Hacktoberfest
Tags: hacktoberfest, opensource
Published: 2020-10-11 15:20:30

Hacktoberfest is here!!!

Hacktoberfest is a month-long celebration of open source software run by DigitalOcean in partnership with GitHub and Twilio. Hacktoberfest is open to everyone in our global community! Four quality pull requests must be submitted to public GitHub repositories. You can sign up anytime between October 1 and October 31. This year, it is hosted by DigitalOcean and co-hosted by dev.to. 

You can find more details about Hacktoberfest [here](https://hacktoberfest.digitalocean.com/).

We would like to share links to where you can find open-source projects as well as projects from our local community in Zambia that you can contribute to.

open-source projects from our community:
1. https://github.com/Chizzoz/mtn-momo-developer-basics
2. https://github.com/SparkEdUAB/SparkEd

open-source projects from across the globe and where you can find projects:
1. https://github.com/forem/forem
2. https://github.com/layer5io
3. https://github.com/topics/climate-change
4. https://github.com/layer5io
6. https://github.com/MunGell/awesome-for-beginners 
7. https://goodfirstissues.com/
8. https://www.codetriage.com/

You can find a link to our virtual meetup on Hacktberfest where we talk about Hacktoberfest and experience of contributing to open-source from members from our local community [here](https://youtu.be/vcJb_zY0lks).

Thank you and happy coding!
The easiest way to publish your project
Tags: devops, javascript, php, react
Published: 2020-10-11 15:17:10

A few days ago Digital Ocean ran a new option in their service. It's called "Apps". This is the best option for devs who want to publish their project but don't have dev ops experience. 

Everything that you must do is create a new app using the app's creator. You connect your GitHub account, choose the project that you want to deploy and that's it. Of course, if you need to set additional configuration it's not so simple but for simple landing pages or static websites, it's enough. 

I recommend you to try this service because 3 projects are free. The best in it is autoscaling. If you create a project then Digital Ocean will scale the machines to handle traffic in your app.

As they said, "Focus on code, not on infrastructure".

Please let me know if you use it and what do you think about services like that.
Ten Days of Code: task 4
Published: 2020-10-11 15:08:46

---
series: TenDaysOfCode2020
---

## Final Task

Codes: [task4_arnabsen1729](https://github.com/arnabsen1729/TDoC-Noughts-and-Crosses/tree/main/task4_arnabsen1729)

Our final task was to build the game interface using pygame and make it multiplayer with sockets. 

One of the best thing about pygame is their docs, also pygame is very easy to use aswell. We make a function that will display the grid of TicTacToe and call that function every time any player makes a move. But how to integrate server and client? 

**Server Side**

First create a basic socket, bind it to a port and listen to it. Its the usual stuffs we have been doing for all the previous tasks. Next would be to accept a client. This is when the game will start. Initially once you run the server.py the pygame window appears but its all black because the client hasn't yet joined. So to avoid that once the server is initialised display a text '`WAIT FOR OPPONENT`. Check line number 324-327 in [server.py](./server.py). Now it will look better. Now when the client joins, the game starts in my case I call the `mainGame()` function. 

**Client Side** 

Initialising the client side is easier all we need to do is connect to that socket and the game will start


**Game Flow**

Every game has some states. Be it something as simple as TicTacToe or something like PUBG. And to make multiplayer games work smoothly  the state is shared because the lesser amount of info that is shared, better would be the performance. In our case what are the states.
1. `who` -> who is going to play the curr move
2. `board` -> The position of the crosses and circles played so far. 
3. `moves` -> number of moves played so far

I used these three states. And what info do we need to send from server to client and vice versa ? Just the move played by the other player would suffice. So this is how it works. 

First we will check if this is my move. If it is, it will listen to the `click events`. From the click coordinates we can decide on which index the player played the move. And accordingly change the board. At the same time we will send this move through the sockets. Else if this is not my move, all I would do is simply listen from socket for the other players move. In either case we will update the game and display it. 


Here is the final look

![final](https://raw.githubusercontent.com/arnabsen1729/TDoC-Noughts-and-Crosses/main/task4_arnabsen1729/assets/final.gif)

I am attaching the resources below like always. Most importantly I would love to thank the team of [@lunitdgp](https://github.com/lugnitdgp) for this awesome opportunity. And special thanks to the mentors of @NoughtsAndCrosses :

- [@Phantsure](https://github.com/Phantsure)
- [@ЕЯЯОЯ](https://github.com/Error-200)
- [@ramiz07](https://github.com/deadlycoder07)
- [@kumanik](https://github.com/kumanik5661)

They were constantly helping us solving our issues, managed to host regular sessions to clear our doubts. 

### Ref:
1. https://drive.google.com/file/d/183vlpHd2tKGp9nfLGCQ4DUPPfuSH_a8c/view?usp=sharing
Suspense in react
Tags: react
Published: 2020-10-11 14:43:31

So, What is Suspense in React?

A very simple way to put it is that it is used as a event listener for data fetching.

Umm... what? what did you just say?

Let me explain,

When we would use a third party API to make calls, it takes a bit time to get the response, to tell the user that it's loading, what one would do is make a state and set it to a boolean and change it when data is fetched and use that state to display a spinner/loader.
This seems pretty easy to do, but what happens when you're in a very big application?
Making a state, updating it's value, showing spinner would be tedious. That's where Suspense comes into play.

Suspense API knows when your data arrives, you just have to setup some boilerplate code once and you're set!

Suspense knows when your data is still loading and it shows a fallback component till the time being, like a spinner or preloader for example.

BEWARE! This is available in an experimental version of React, do not implement this is your production level apps.

For those who'd like to play around with this, [here](https://codesandbox.io/s/shy-fast-2tzey?file=/src/index.js) is a link to a codesandbox instance, fork it and experiment!
Ten Days of Code: Task 3
Published: 2020-10-11 15:04:23

---
series: TenDaysOfCode2020
---

## Task-3
Date: 05-Oct-20
Codes: [task3_arnabsen1729](https://github.com/arnabsen1729/TDoC-Noughts-and-Crosses/tree/main/task3_arnabsen1729)
### Problem Statement

**CLI Tic Tac Toe**
CLI based Tic Tac Toe with 2 players. 

### My Approach

Since, there are only two users, and no centralised server, the game logic will reside in each file. So I created a `TicTacToe` class. The class has the following methods:

| METHODS | DESCRIPTION |
|---|---|
|  `p1Move()` | Ask Player 1's move and will keep asking untill it gets a valid input |
|  `p2Move()` | Ask Player 2's move and will keep asking untill it gets a valid input |
| `find_winner()` | Will find the winner at the current state of the game and return the value |
| `display_board()` | Display's the board neatly | 
| `isGameOver()` | will decide if the game is over | 

Now, let's discuss how I have decided the logic of the game. I am storing the board in a linear array of 9 elements, initially they have 0 else if p1 made a move it will be +1 else for p2 it will be -1. Now to check we will check if the rows, cols, diagonals and anti-diagonals have +3 or -3 if so then there is a winner else no winner. 

One optimisation instead of going through the entire board every single time, I am looking at the corresponding rows, and cols, and diagonals of the last move, because only that will decide the game.

For the client and server script its simple socket programming. 


### Sample

![Task3](https://raw.githubusercontent.com/arnabsen1729/TDoC-Noughts-and-Crosses/main/task3_arnabsen1729/assets/task3.gif)


### Resources

1. [Task 3 Problem Statement and guide](https://drive.google.com/file/d/1e21ZnkQWjPuKd1RP34fFvJ8d7bWEihC8/view)

Thanks to [@lugnitdgp](https://github.com/lugnitdgp) for their awesome guidance <3