teleren/devto huggingface dataset:
Rethinking Vue Full Stack
Tags: vue, neoan3, javascript
Published: 2021-01-07 03:49:45


# Unachievable dreams?

I am sure sometimes you lean back and wonder how we got to the status quo regarding the stacks we use. I mean, does it really make sense to let a server render my frontend just to execute JavaScript which in return turns around and asks that very server for data?
Can't mommy already pack my lunch when she knows where she is sending me to and what I'll need? 

There is of course the trend of eliminating some of the pain with SSR solutions, but at the end of the day you still need to make complex decisions of when to render what information directly and how to integrate the backend you write in a more or less independent manner to something accessible as your reactive store.

### Speaking of stores 

Has there ever been anybody who didn't learn about Redux or Vuex and though: "Really? That's the best solution to address performant state management across components? Actions, Dispatch, Commit, what?" 
And we might then have gotten used to it. Heck, we might have even become sufficient enough with it that we forgot about the pitfalls and learned to gain the freedom they provide. But is that really still necessary with solutions like hooks or the composition API?

### The broken promise of SAAS & microservices

It sounded like a good idea, didn't it? Let's just quickly integrate an object based database like firestore and off we go building the user experience. In reality, we still don't have a solution that would actually enable us to "just write the app". We still need to secure via own endpoints, take care of potential oAuth integrations and worry about key exposure. We looked down on monolithic architecture and now long for the days were everything was under our control. But we don't miss the setup, writing transactions and debugging the models, do we?

### In 2021, it's time to solve these problems

What I want - what I always wanted - is a **"Fr**(ontB)**ackend"**.
A solution that is a glass, not a bottleneck but still opinionated and testable enough to enable bigger teams to securely work with it without making a mess. A "DWAI" (Don't worry about it) feeling when handling stores and data handling in general. Finally a declarative form of writing API interactions (Polymer tried and failed). Is it not possible to provide an ecosystem that is so rapidly fast to learn, develop in and deliver (looking at you, lighthouse) that a front-end developer could write full-stack applications while having the time to demystify SQL, SEO or reactive state while having tangible output?

In order to achieve that, such a system would have to guarantee 

- no more race conditions
- no building process
- no coding of stores, endpoints, models and their interaction
- no complex lifecycle decisions

Well, I am working on it:
 

{% youtube FBLR28qquCI %}
Informações do seu hardware com Linux
Tags: linux, bash, braziliandevs, ubuntu
Published: 2021-01-07 03:47:55

Olá pessoal, hoje irei mostrar um _script_ que fornece detalhes sobre o _hardware_ do computador. O sistema operacional utilizado foi o Ubuntu 18.04.

Crie um arquivo com o nome `info-hw.sh` e adicione o conteúdo abaixo:

```bash
#!/usr/bin/env bash

# Author: Francisco Chaves
# Website: <https://franciscochaves.com.br>
# Description: Linux hardware information

if [ "$UID" != "0" ]; then
  echo "You must be a root user. Going out..."
  exit 1
fi

if [ -z "$(which lshw)" ]; then
  echo -e "Need to install the program lshw\n"
  echo "sudo apt-get install lshw"
  exit 1
fi

args=("cpu"
  "memory"
  "bus"
  "display"
  "multimedia"
  "network"
  "disk"
  "storage")

limit="${#args[@]}"
color_default="\033[0;0m"
color_primary="\033[1;94m"
color_warning="\033[1;33m"

echo -e "${color_warning}"
echo "     *              )                                      "
echo "   (  \`          ( /(           (                          "
echo "   )\))(  (      )\())   ) (    )\ ) (  (      ) (     (   "
echo "  ((_)()\ )\ )  ((_)\ ( /( )(  (()/( )\))(  ( /( )(   ))\  "
echo "  (_()((_|()/(   _((_))(_)|()\  ((_)|(_)()\ )(_)|()\ /((_) "
echo "  |  \/  |)(_)) | || ((_)_ ((_) _| |_(()((_|(_)_ ((_|_))   "
echo "  | |\/| | || | | __ / _\` | '_/ _\` |\ V  V / _\` | '_/ -_)  "
echo "  |_|  |_|\_, | |_||_\__,_|_| \__,_| \_/\_/\__,_|_| \___|  "
echo "          |__/                                             "

sleep 5

for ((n = 0; n < "$limit"; n++));
do
  echo -e "${color_primary}\n\n>>>> ${args[n]} <<<<\n\n${color_default}"
  lshw -C "${args[n]}"
done

exit 0
```

Salve o arquivo e atribua permissão de execução com o comando a seguir:

```bash
chmod +x info-hw.sh
```

No mesmo diretório do arquivo, execute o _script_:

```bash
sudo ./info-hw.sh
```

![dev-to-my-hardware](https://dev-to-uploads.s3.amazonaws.com/i/h3vxpqysgh3kji0lwpf1.png)
 

Caso deseje salvar as informações em um arquivo, utilize o comando abaixo:

```bash
sudo ./info-hw.sh | tee info.txt
```

Valeu pessoal 😎✌!!
Logical Operators in python
Tags: python, programming, beginners, tutorial
Published: 2021-01-07 03:46:00

Logical operators are used to combining more than two conditional statements.

These operators are very useful for writing logical conditions in control flow statements of a programming language.

Let's code them one by one.

## `and` operator
* and operator return the boolean value `True` only if both statements are true.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o3qy4stko0ocsy2e9fe4.png)
Output:
```
True
```

## `or` operator
* or operator returns the boolean value `True` if any statement is true.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o88ozgi6bvy04i94mphq.png)
Output:
```
True
```

## `not` operator
* not-operator acts as a unary operator which returns the boolean value `True` the statement is true and vice versa.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kki5o7m1c21kwcgb08fv.png)
Output:
```
False
```

### Best Resources

- [Python Blog Series](https://dev.to/aswin2001barath/series/10416) : A Blog series where I will be learning and sharing my knowledge on each of the above topics.

- [Learn Python for Free, Get Hired, and (maybe) Change the World!](https://academy.zerotomastery.io/a/aff_tz1t0tpx/external?affcode=441520_dcwk-s8s) : A detailed roadmap blog by Jayson Lennon (a Senior Software Engineer) with links to free resources.

- **Zero To Mastery Course** - [Complete Python Developer](https://academy.zerotomastery.io/a/aff_9khypm7v/external?affcode=441520_dcwk-s8s) : A comprehensive course by Andrei Neagoie (a Senior Developer) that covers all of the above topics.

**Who Am I?**

I’m Aswin Barath, a Software Engineering Nerd who loves building Web Applications, now sharing my knowledge through [Blogging](https://medium.com/techsoftware) during the busy time of my freelancing work life. Here’s the link to all of my socials categorized by platforms under one place: https://linktr.ee/AswinBarath

**Thank you** so much for reading my blog🙂.
The Pleasure of Clojure(Script): Part 1
Tags: clojure, clojurescript, rust, javascript
Published: 2021-01-07 03:39:19

I like learning languages, and usually give a shot to any language that has some buzz — like Go, Rust, Elixir, ReasonML (now ReScript). But there's one kind of language I have never tried learning, and it was because I thought it so alien. Maybe, just maybe, you can guess which kind of language I'm talking about by the title of this post (spoilers: It's Lisp languages).

Most people when telling the wonders of Lisp talk about data as code. Now, I haven't quite gone there yet so I don't know what that's about, but I still had a lot of fun using ClojureScript.

Since I had some free time at my hands (two weeks paid time off), I decided to go knee deep into Lisp and see it in action for myself.
I  fired up Emacs (learned some org while I'm at it), opened up ClojureScript documentation—which is rather scarce sadly—and went on to achieve my goal: Build a static blog with Reagent, which reads from .org files at runtime.

This series of post is a form to consolidate what I learn along the way until I achieve my final goal.

---
Most of the materials I saw teaching people how to build a language used a Lisp syntax. I gave credit for syntax simplicity those times, but the simplicity didn't stay restricted to the syntax.
How to expand an application to handle realistic requests!
Published: 2021-01-07 03:29:41

I was recently tasked with expanding the back end of a rental home listing application and in this post I am going to share some of the things I applied!

The goal for this project was to ensure that the application could handle over 100 requests per second on an EC2 micro instance while utilizing a database that contained a minimum of 10 million records. 

I was tasked with the photo carousel portion of the app and it contained 2 datasets, one for all of the home listings and one for all of the photos. Listings to photos is a one to many relationship with each listing having 5 to 10 photos but each photo only corresponding to one listing. I had to make a choice between using a non-relational database mongoDB or a relational database postgres. 

It made much more sense to use postgres for this application because postgres is a relational database and the data I was working with is inherently relational with each listing having multiple corresponding photos. 

I created a table for each dataset, one for all of the listings that contained 10 million records and one for the photos that contained 50 million records. 

The primary request made by the application is an inner join that selects a listing and all of the images that pertain to that listing. So I added a listing id foreign key on the photos table that corresponded to the id on the listings table. 

My initial query time to select a listing and its photos was quite slow at 700ms so I decided to apply an index to the listing id on the photos table. This allows all of the photos with a particular listing id to be selected at one spot in memory and selected all at once rather than having to iteratively search through 50 million records. After adding the index my query time improved dramatically to .8ms. 

After finishing the database design locally I migrated it to a EC2 micro instance with one instance for the database and one for the application. Initially the average response time was 200ms and the google page load score was at 88%.

The application consists almost entirely of images so I decided to set up a cloud distribution network instead of hosting them directly from S3. I attached the cdn to my S3 bucket for this project and this cut down the distance that the files need to travel by utilizing servers that are closest to the user which greatly increases the speed of delivery. 

I then set up redis as a cache to store files that have been accessed from postgres recently. All recently requested files are stored in redis so if they are requested again they can just be withdrawn from redis instead of postgres. This sped up my query times quite a bit and I was now at an average request time of 78ms. I then decided to horizontally scale the application with nginx by making 4 more images of the service. After horizontally scaling I ended up with a request time of 34ms and a google page load speed of 92%. 

And thats all of the steps I made to improve this application! Good luck and I hope this may be of help.
Is ESP32 Big Endian or Little Endian?
Tags: arduino, esp32
Published: 2021-01-07 02:44:05

> This post is originally published on yoursunny.com blog https://yoursunny.com/t/2021/ESP32-endian/

I'm programming network protocols on the Espressif ESP32 microcontroller, and I want to know: **is ESP32 big endian or little endian?**
Unfortunately, search results have only videos and forum posts and PDF; the answer, if present, is buried deep in pages and pages of discussions and irrelevant content.
So I quickly wrote a little program to determine the endianness of ESP32.

## The Straight Answer: ESP32 is Little Endian

I have determined that: the Tensilica Xtensa LX6 microprocessor in **ESP32 is little endian**.

ESP32 is little endian.
Many other processors are little endian, too:

* Intel and AMD x86 and x86_64 processors are little endian.
* Raspberry Pi and Beaglebone Black are little endian, although the underlying ARM processor may operate as big endian.
* ESP8266 is little endian. It has Tensilica Xtensa L106 microprocessor, similar to the ESP32
* nRF52 series is little endian. This includes the Adafruit Bluefruit nRF52832.

## Arduino Sketch to Determine Endianness

I used this Arduino program to determine the endianness of ESP32 CPU:

```cpp
void setup() {
  Serial.begin(115200);
  Serial.println();

  uint32_t x = 0x12345678;
  const uint8_t* p = reinterpret_cast<const uint8_t*>(&x);
  Serial.printf("%02X%02X%02X%02X\n", p[0], p[1], p[2], p[3]);
}

void loop() {
}
```

The program should print `12345678` on a big endian machine, or `78563412` on a little endian machine.
ESP32 prints:

> 78563412

So ESP32 is little endian.
Hello dev.to world!
Tags: python, productivity, ai, gamedev
Published: 2021-01-07 02:57:25

Hi, my name is Dominik and I code mostly in the world's best coding language (Python). My background is strongly mathematical (I hold 2x MSc. in related fields). I have a wide range of interests spanning from coding related to trading on financial markets/cryptocurrencies to topics like automation, RPA, AI, AGI, automated reasoning, machine learning methods, data science, quantum computing, and computer games.

I am going to share here some content regarding either tutorials for some of the named topics or some general (prevalently Python or mathematical) hacks. I will be very happy if you follow me here and on my github https://github.com/DovaX.

Stay tuned for what is coming!
Laravel tests naming rules
Tags: laravel, testing, standard, rules
Published: 2021-01-07 02:47:39

There is one important information about Laravel testing that may not be obvious when reading the official documentation: the names of test classes and test methods must follow some simple rules stated below.

- Test classes must *end* with the suffix `Test`
- Test methods must *start* with the prefix `test`

This detail has bitten me more than once in the past. You copy and paste `ExampleTest.php` to create, say, `ExampleTest2.php` and the artisan command insists in ignoring your otherwise perfect test class!

The explanation is simple: under the hood, `php artisan test` and `php artisan dusk` use PHPUnit to run the tests, so default PHPUnit's rules apply. That's why you can also use test annotations if you really want to avoid prefixing your test methods with `test`:

```php
/**
 * @test
 */
public function sendsConfirmationEmail()
{
    ...
}
```
Creating a database from scratch with Node.js - Day 11
Tags: javascript, database, node, learning
Published: 2021-01-07 02:45:43

Hello Folks!

another quick update

### Changes

#### Changed create to create table

I've changed the create statement so it looks more like SQL, so now you have to be specific about creating a table.

I did this because I will start the indexing algorithm tomorrow and therefore, I will need the create statement to also recognize "create index".

#### Created a bulk insert function

I have also created a new feature, the bulk insert

it's kinda bad when working with LQL, because you actually have to type the JSON in the command line:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gnp4fcf7x8jpglee8jk2.png)

HOWEVER, when you want to insert an array it's waaaaaaaaaaay faster than inserting one document at a time, here is a test of my inserting 1k documents:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7vqde7gcn72xs1pzy3nk.png)

during my tests I had a bad time trying to insert 10k documents one at a time, it took almost a minute

and testing the bulk insert, I could insert 1M documents in 2s 

I do not know how useful a bulk insert will be on a day-to-day basis, but I have created it so I can test my indexing algorithm once it's done, so I can quickly create huge databases and test how indexing will affect them 

### Conclusion

bulk insert is nice and fast

very excited to start indexing tomorrow

### Links:

Repository for the database/driver/REPL: 

{% github ciochetta/learndb no-readme %}

Repository for the LQL parser:

{% github ciochetta/lql-parser no-readme %}

Repository for the test I've made for this post:

{% github ciochetta/testing-luisdb no-readme %}
Position:sticky
Published: 2021-01-09 15:57:30

---
title: Position:sticky
published: true
date: 2021-01-07 00:00:00 UTC
tags: 
canonical_url: https://yogeshwaran.in/Position:sticky/
---

Hello everyone, Welcome to my first post of 2021.

## What is position:sticky ?

Sticky is simply the combination of fixed and relative positions. Sticky Elements remain relative untill it touches the declared threshold level.

```
.sticky{
  position:sticky;
  //Related Elements become fixed at their top:0
  top:0;
}
```

### Simple example of sticky - Article with sub titles
<iframe height="400" style="width: 100%;" scrolling="no" title="position:sticky " src="https://codepen.io/yoyo/embed/aeWYpO?height=265&amp;theme-id=dark&amp;default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yoyo/pen/aeWYpO">position:sticky </a> by yogeshwaran
  (<a href="https://codepen.io/yoyo">@yoyo</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
### Can i use sticky in my project ?

All latest browser supports sticky except in HTML table’s th or tr.If you are not considering IE11. you should definetly give a try on this.

See Browser support table [here](https://caniuse.com/css-sticky)
100 Days of Code ~ Day 7
Tags: 100daysofcode, javascript, webdev, challenge
Published: 2021-01-07 02:41:32

Moving out of my place was more work than originally planned/intended so needed to put the challenge on pause, so am picking up right where I left off. 

Completed activity 8 of [JavaScript30](https://javascript30.com) in which learn about the HTML canvas element and make a page where you draw on the screen with a brush that dynamically changes color and shape, which was pretty cool.

To wrap things up, the last time I was working on the [Udemy course](https://www.udemy.com/share/101ZdQA0oddV9QR3Q=/) on TDD with React, I still had a couple of tests failing, and had to hunt to find the errors causing so, and as always, when the answer is hard to find, its a dumb syntactical error, which I was just discussing with a student in the bootcamp I TA for the other day, lol.
What is useCallback hook in React?
Tags: javascript, react, webdev, codenewbie
Published: 2021-01-07 02:21:08

New post in the React series about the **useCallback** hook. Everything you need to know. 

<hr>

### What is useCallback? 
Do you remember the useMemo hook which we saw in the last post? The useCallback hook is also very similar and it returns a memoized callback. 

The useCallback hook is very useful in dealing with referential equality situations to prevent unnecessary renders. 

Let's understand this in a good way: 

Consider a case where we have to maintain two counters inside a single component. Each counter has its independent control. 

Now, even if you increment one counter, the other one will rerender(because they are in the same component). 

This may not be an issue in the case of a simple counter, however. if it is a slow and expensive function, you would want to avoid this. 

### How to use the *useCallback* hook? 
The ideal solution in the previous case is that, if the state value of the other counter remains unchanged then it should not be rendered. 

![Black Gold Stars Glitter Happy New Year Card.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609985967484/PevALZ1Cb.png)

// Counter 1 -> If you increment this, the other counter function will be recreated. 
// Counter 2 -> Similarly, if you increment this, the whole component will rerender and the other counter function will be recreated. 

So to fix this issue, can wrap both the counter functions in a **useCallback**. The only when the state is changed the function will be recreated. 

Syntax: 

```javascript
const memoizedCallback - useCallback(
    () => {
        doSomething(a, b); //Memoized callback function
    }, 
    [a, b], //Dependency array: The function will rerun only if any of the value from this array changes.
); 
```

The concept of remembering the function so that we don't have to recreate it on every render is known as Memoization. 

As we saw in the last post that we already have **useMemo** hook for this. When why is **useCallback** even required? 

### When to use the useCallback hook? 

The major difference between useMemo and useCallback is that useMemo returns a memoized value, whereas useCallback returns a memoized function. 

So if your memoized function is receiving some external parameters and performing some calculation based on that, then it makes sense to use the useCallback hook. 

However, if you are only concerned about the memoized value, then probably useMemo is the best option. 

MOST OF THE TIME YOU SHOULD NOT BOTHER OPTIMIZING UNNECESSARY RERENDERS. 

However, there are situations when rendering can take a substantial amount of time (think highly interactive Graphs/ Charts/ Animations). Thanks to the pragmatic nature of React, there's an escape hatch via useMemo and useCallback. 

<hr>

😎Thanks For Reading | Happy Coding ⚡

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> 
<img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>
.NET learning notes
Tags: csharp, dotnet
Published: 2021-01-07 02:11:36

```C#
public abstract class TaskBase<TSummaryInfo> : ProcessorBase where TSummaryInfo : class, new() 
{ 
  // code 
}
```
An abstract class `TaskBase` which declares `TSummaryInfo` type and inherits `ProcessorBase` class. 
`where TSummaryInfo : class` means the `TSummaryInfo` type needs to be a class. `new()` means it has a parameter-less construction.


----

# Lazy instantialization

```C#
namespace Project.Controllers {
  public class SomeController : Controller {

    // only instantialize when the instance is needed in the methods of this class
    private ISomeService _someService;
    private ISomeService SomeService => _someService ?? (_someService = new SomeService(new SomeRepository()));


    // do not instantialize in constructor, so that the instances won't be created every time when the class is constructed, unless they are called as parameters from below method.
    public someController () {}

    public void someClass(SomeService){
      //...code
    }
  }
}
``` 
Naming Convention:
* `_someService`: "back-end" variables
* `SomeService`: parameter of methods, or just the class
How it started // How it's going  // Desktop Setup Version
Tags: discuss
Published: 2021-01-07 01:55:42

---
title: How it started // How it's going  // Desktop Setup Version
published: true
description: 
tags: #discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f1uoj7nybs21gb56ga2d.png
---

Hi, like me, I'm sure a lot of people updated their desktop setup due to the need of working from home. 

How it started // How it's going
![started](https://dev-to-uploads.s3.amazonaws.com/i/9cxwnj3ptlpem15xb9vl.jpeg)
![going](https://dev-to-uploads.s3.amazonaws.com/i/ahyns0hvu6s05w9jocyp.jpeg)

Yep, now I prefer a widescreen monitor to two monitors, and of course it has RGB :)  

Feel free to share yours :)