teleren/devto huggingface dataset:
Re-Doing my final project
Tags: react, javascript, css
Published: 2020-12-23 02:59:12

While my final project for Flatiron is sleek on first glance, it resembles Cyberpunk 2077 in that it only looks great in the best circumstances.
 
My project [Code Wanderer](https://johnjamesmarshalljr.github.io/code-wanderer-frontend/#/) is a React / Redux resource hub for new programmers. It lets users add resources like .PDFs and memes about programming that help understand new concepts. It has a ‘Wander’ button that shuffles a bunch of links and resembles StumbleUpon.

![code wanderer](https://dev-to-uploads.s3.amazonaws.com/i/dgmicjvtua0ubfcyd80a.png)

I made the CSS myself and love how it looks. But it only works when your view is a computer screen. Everything works the way I want, but if you’re viewing from a phone, it looks trash.

It’s taught me that in a crunch I can make a massive, scaleable project in a short time and do way more than I thought I could. It’s like when my coaches would push me to do a few more line drills, after I’d reached full lung failure minutes prior.

I’m fixing this. Since my CSS was so experimental and intricate, it’s proving quite difficult to rearrange into a responsive web app.

So I’m going to rebuild the entire thing. It’ll be hyper-focused, drilling new coders into the routines they need to create with the resources that will help them get there in a fun, refreshing way. Overstimulation and plethora of choice can be paralyzing.

It will give me the chance to tweak the program to be more useful. And reinforce good React concepts. I’ll change local state to useState and implement hooks instead of the way I originally did it.

![react hook](https://dev-to-uploads.s3.amazonaws.com/i/dd3h54k7kj147e9ufkhy.png)

I’ll still use Redux because it’s important that I show I can master the store that way again. It will also be crucial to use the Wander button again, as I only made it work as a shuffle through an action creator modifying the store.

This time, I’ll build the CSS through Sass like I have been taught in my most recent lessons. Tagging more divs and building from the inside out with a pure concept in mind will help me make it responsive from the beginning.

![scratch pic](https://dev-to-uploads.s3.amazonaws.com/i/umphdxu015tti7wdga8f.jpg)

Though, I did build the site exactly the way I imagined it when I made it in my mind, evidenced above.

Excited to have a project to work on to show my worth, and reinforce concepts while I prepare to interview.
What better solution for a website with coupons and daily offers?
Published: 2020-12-23 02:40:00

I am a beginner developer.  A client of mine is looking to create a modern website for coupons and daily offers like Groupon.com Now I wanted to understand how Groupon gets so many coupons and offers to feed their website?  What technologies does it use?  Which affiliate networks?  How do they synchronize the offers of the affiliate networks to the Groupon.com website?  Can you explain me ?
Let's build a coding community
Tags: 100daysofcode, learntocode
Published: 2020-12-21 18:39:56

---
title: Let's build a coding community
published: true
description: I'm starting a coding community focused on self-improvement and career success, I hope you join me.
tags: #100DaysOfCode, #LearnToCode
---

Hello! I'm going to build a coding community called [BreatheCode](www.BreatheCo.de) and I will try blogging about it, in this first blog post I thought it was a good idea to summarize: 1) Why?; 2) Core values; 3) and what I have so far; Hopefully you read this, join and contribute. I know this is going to take years, but it will be lots of fun... 😁

## So what will be this community about?

There are lots of communities, why building another one? Well, I've been teaching code for a long time, [I have a coding school](http://4geeksacademy.co/), and I've coding for 20+ years, I think I can spread my knowledge better and help more people If I do it publicly from now on.

## Community Values

After teaching for a long time, I think these are the main 4 reasons people don't learn or stop trying to learn code, the community values should be built around those problems:

| Problem | Value |
| ------- | ------ |
| Structure: Where to start? What comes next? It's overwhelming the number of lessons, tutorials, etc. | Structured: As content is published, you will know where the content fits into the incremental syllabus |
| Reading vs writing code: Learning to read code it is quick, but writing takes 10x more effort. | Hands-on: All tutorials will be hands-on, no lesson or youtube-only tutorial, code and practice will always come first |
| Mentorship: Where can you ask questions? Most people drop when they are stuck because there is no guide or coaching | Responsive: We need to support each other, live channels will always be available |
| Self-confidence: The impostor syndrome makes you quit before really trying | Constant publication of motivational content, code of conduct with very supportive approach |

> 💡 There are other values that any serious community needs: 1) Collaborative, everything published will git-based, easily editable, and open to contributions. 2) Open: Everyone should participate in ANY way!

## What is my progress so far?

The community will not be mine alone, that is why I wanted to call it "BreatheCode":

1. Website: There is a v0.1 alpha website here: http://breatheco.de/
2. Tutorials: I have already started publishing [interactive tutorials here](https://breatheco.de/interactive-exercises).
3. Youtube: [This is the channel](https://www.youtube.com/c/BreatheCode).
4. Github: The GitHub account is very active and [I'm trying to document it properly here](https://github.com/breatheco-de/main-documentation).
5. Live chat: I'm still trying to resolve this, Twitter is not enough we need something more alive, probably a slack or discord channel, more updates soon.

## Join me!

I'm not looking to be the sole maintainer, even if you still learning how to code there is a lot you can help with, send me a DM to my Twitter account: [@alesanchezr](twitter.com/alesanchezr)
SSR vs CSR
Tags: webdev, beginners, programming, codenewbie
Published: 2020-12-23 02:16:45

# SSR vs CSR

in this article, I want to share with you the difference between server-side rendering(SSR) and client-side rendering(CSR). knowing the difference between those two things is very important, especially when you are developing on the web. first of all, I will explain the definition of SSR and CSR, then I will cover the difference between them, and for the last, what kind of circumstances are suitable for each.

## what is SSR ?

SSR stands for server-side rendering. it is the ability of a web application to render the web page on the server instead of rendering it in the browser. when the page arrived on the client-side, it is fully rendered. it is because the server-side has fully rendered the page before it was sent by the server to the client. when the request is received on the server-side, it will compile everything, if the content of the page needed data from the database, the server will do that, then render the data into the fully rendered page and then send it to the client as the response. now, what if the client navigates to a different route? every time the client navigates to a different route, the server will do the work all over again. 

## what is CSR ? 

CSR stands for client-side rendering. overall, CSR is the opposite of SSR. If the SSR renders the page on the server-side, CSR renders the page on the client-side. when the request is received on the server, it will not render the page, instead, the server will send a single page that will be the skeleton of the page to the client. the server sends the page along with the javascript file. later, the js will turn the page into a fully rendered page. so where is the content? what if the page needs to take data from the database? Then, the api comes in. the client will make a request to the api to take the data and then render it to the page. Lastly, what if the client navigates to a different route? do the server will send the page again ? the server will not send the page again, instead, the client will re-render the page according to the route that client requested. so the page that is used, is always the same page as the first request.

## the difference

the main difference between CSR and SSR is where the page is rendered. SSR renders the page on the server-side and CSR renders the page on the client-side. Client-side manages the routing dynamically without refreshing the page every time the client requests a different route.

## use SSR 

* if SEO is your priority, typically when you are building a blog site and you want everyone who searching on google go to your website, then SSR is your choice.
* if your website needs a faster initial loading.
* if the content of your website doesn't need much user interaction.

## use CSR

* when SEO is not your priority
* if your site has rich interactions
* if you are building a web application
6 Technologies to look at in 2021
Tags: watercooler, framework
Published: 2020-12-23 02:12:37

Instead of looking back at a year we'd all rather forget, let's see what lays ahead of us:

## (Micro-) Frameworks
Stuck in your stack? It's always dangerous to be married to a particular setup and miss new winds.

### AlpineJS
This minimal JS solution grew its crowd in 2020 and became a true alternative for smaller projects. It feels like VueJS and the first Angular had a child that focusses on getting the job done. Give it a spin [here](https://github.com/alpinejs/alpine/)

### Node-Express-TypeScript
TypeScript has been with us for a while now, but with Deno waiting to gain in popularity and more and more frameworks embracing it for userland, it's time to revisit the boilerplates we used for years. This little setup jump-starts your backend development while being approachable like your good ol' express server. [visit here](https://github.com/sroehrl/node-express-typescript)

### Neoan3
With PHP8 finally out, it's time to prove to the world that working with PHP has become modern, fast (VERY FAST!) and clean. While this framework seems unusual at first, it will soon help you develop in the fastest way imaginable. So it's not only fast in delivering, but fast at developing as well. [neoan3](https://neoan3.rocks)

## Design & CSS
Another bootstrap page? Aren't we all tiered of it? Let's explore something new.

### Tailwind
While Tailwind CSS doesn't come fresh off the shelf, its usage has become easier with recent versions. The utility based approach conquered the industry and truly individual designs resurface. [check it out](https://tailwindcss.com/)

### Gaudiamus
This SCSS "framework" is more like a framework creator. CSS frameworks like Ornate are based on this builder and if you ever wanted to have a solution that feels more like enabling you to roll your own without starting from scratch than dictating how things look like, this is for you [the repo](https://github.com/gaudiamus-css/gaudiamus-css.github.io) 

### Ant.Design
Delivering components for major front-end frameworks (like React & VueJS), this design system is modern and slick.
While there are many design systems gaining traction, I picked this as it feels most innovative to me personally. [visit here](https://ant.design)
Is Python a compiled language?
Tags: python, todayilearned
Published: 2020-12-23 01:59:21

### `Is Java a compiled language?` 

If you think yes, then Python is also a compiled language.

In Python, the source code is compiled into bytecode. If you've worked with Java before, then the term bytecode should sound familiar to you; bytecode is what the JVM interprets to machine code. In Python, there is also a virtual machine. It's simply called the Python Virtual Machine (PVM). Here is a graphic of CPython's implementation of the Python programming language.

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

So why do we have this preconceived notion that Python isn't a compiled language? Perhaps it's the implicit compilation step.

When working with a Python program, you never invoke a compiler; you simply run `python main.py`. This is different than Java, for example, where you have to explicitly run the Java compile step. For this reason, Java is often called a compiled language. But Python also compiles to bytecode. Both languages execute the bytecode with a software implementation of a virtual machine.
Exercise 1.3 SICP notes
Tags: programming, sicp
Published: 2020-12-23 01:46:37

This was a surprisingly complex exercise because it took me a minute to figure out how to find the middle number given three numbers.  We also lack complex data structures at this point (eg. arrays, lists).  With `>` and `<`, it was easy to find the maximum and minimum, but the middle?, I was pleasantly challenged.

The best solution I found was to leverage the ease of finding the min and max values, together with using arithmetic.  If you add all three numbers together, and subtract off the min and max values, then you'll be left with the middle value :).

``` scheme
(define (middle a b c) 
        (- (+ a b c)
           (+ (largest a b c) (smallest a b c))))
```

https://github.com/JasonOna/SICP/blob/main/1.3.scm
Some Thoughts on React Server Components
Tags: react, webdev, javascript, fullstack
Published: 2020-12-23 01:38:18

The React team unveiled yesterday a new experiment called [React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html), and I must say I'm pretty excited about it.

Thank you, [Dan Abramov](https://twitter.com/dan_abramov), for saying that GraphQL is not for everyone. Thanks to the React team for looking for solutions to build web apps without web APIs and daring to challenge the status quo.

A few weeks ago, I wrote [an article](https://dev.to/mvila/good-bye-web-apis-2bel) to defend the idea that it is possible to create single-page apps without building a web API to connect the frontend and the backend. I believe this article was as much loved as it was hated.

On the one hand, there are all the developers who are tired of developing web APIs and welcome all the solutions to get rid of them.

On the other hand, there are many developers who think that web APIs are necessary and that it's a shame to want to do without them.

Of course, no one is absolutely right or wrong. It depends on what you build.

I think a lot of web apps can live very well without a web API. But there is also a significant number of apps for which a web API can be very beneficial.

So, congrats to the React team for considering both cases and looking for a solution for those who are in the "API-less" camp.

React Server Components allow to abstract away the runtime environment where the views are rendered. Any view can be rendered in the frontend, the backend, or both, and from the developer's perspective, it doesn't matter. The developer can write an application as if the frontend and the backend were a single entity.

This approach appeals to me because it is in line with one of my biggest obsessions. Indeed, with [Layr](https://github.com/layrjs/layr) I'm trying to achieve the same thing — to bring the frontend and the backend together.

What makes Layr and React Server Components different is the nature of what is transported between the frontend and the backend. Layr transports models while React Server Components transport views.

I think that transporting the models eventually offers more possibilities because the views remain entirely in charge of the frontend and it is, therefore, easier to create multiple frontends for different platforms (web, mobile, desktop, etc.).

However, it is possible to imagine that React Server Components could also be used to build React Native apps. We would then have a backend capable of generating views for React Native. At first glance, the idea may seem crazy, but why not?

Anyway, all this reinforces my belief that the "API-less" approach is more and more a thing.

Thank you, React, for continuing to innovate. Removing the API layer is not a small deal. It is a huge architectural shift.
What are race conditions?
Tags: python, tutorial, computerscience, todayilearned
Published: 2020-12-23 01:21:47

### `It all starts with threads sharing the same memory`

A race condition occurs when multiple threads can access and change shared data at the same time. Race conditions become a prevalent problem in a multi-threaded context because threads by definition share the same memory.

With multiple threads running concurrently, we don't know the order in which threads access and modify shared data. Therefore the result of program depends heavily on the scheduling algorithm and the order in which threads race to access shared data.

### `Example`

Suppose we have a shared variable `x` with a value of 2. Suppose we also have two threads, `t1` and `t2`. 

- `t1` performs `x += 3`
- `t2` performs `x *= 2`

If `t1` operates on `x` before `t2`:

- x += 1 (x = 3)
- x *= 2 (x = 6)

If `t2` operates on `x` before `t1`:

- x *= 2 (x = 4)
- x += 1 (x = 5)

OR EVEN WORSE, if threads access data at the same time:

- x *= 2 (x = 4)

OR

- x += 1 (x = 3)

### `Global Interpreter Lock (GIL)`

The GIL is Python's solution to assure thread-safety. It does so by locking the interpreter (e.g. CPython) so that that it’s not possible for another thread to interfere with the current one. That is, only one thread can execute at a time, preventing simultaneous access to shared data.
Creating a database from scratch with Node.js
Tags: node, javascript, database
Published: 2020-12-23 01:07:19

Hey folks!

This is my first attempt at creating my own database from scratch. I am doing this for learning purposes and so I can say I have a database named after me;

Currently, in the first day of development, my main resource to study is [this post](https://cstack.github.io/db_tutorial/), but I will not be doing a SQL database, instead, I will follow his steps but try to create a document database, like MongoDB

---

On this first day, my data is only stored in memory, I haven't yet started to work on the data persistency (actually saving it to disk).

---

Today I have implemented three functions: 

### Create
creates a new table; The current syntax for this function is: 

```
Create [table name] [args...]
```

Example: 

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

### Insert 
adds a document to a table; the current syntax for this function is:

```
Insert [table name] [args...]
```

Example:

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

### Select
either returns each document for a table or the structure for the entire database; the current syntax for this function is:

```
Select [table name (optional)]
```

Examples:

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


--- 


So yeah, this is what I've managed to create today, I will keep on improving it tomorrow and probably post about it after Christmas.

If anyone wants to try it or just to take a peek at source code, this is the GitHub repository for it: 

{% github ciochetta/learndb %}

And to run it, you just need to have an updated version of Node.js and write the following command in its root directory:

```
node index.js
```
What is duck typing?
Tags: python, tutorial, computerscience, todayilearned
Published: 2020-12-23 00:52:41

### `Duck Typing`

The phrase originates from the saying: "If it walks like a duck, swims like a duck, quacks like a duck, then it probably is a duck." Cool saying, but what does this mean?

In practice, what this means is that as programmers, we can focus on the expected behaviour of an object. Even if a Person object isn't a Duck object, if a Person object has a "quack" method, it can quack. Simple as that.

```python
class Duck: 
    def quack(self): 
        print("I can quack because I am a duck.") 
  
class Person:
    def quack(self): 
        print("I can quack because it's defined.")
  
# Attributes having the same behaviour suggest duck typing
for obj in Duck(), Person(): 
    obj.fly() 
```

In summary, duck typing focuses on an object's behaviour (method) - not type. It does not matter whether a person is actually a Duck or a Person. As long as I want that person to call the `quack` method and it can, we're good. That's why it is called duck typing: if it looks like a duck (e.g., it has a method called quack) then who cares if it's a duck or a person. As long as I can call the method I want to call on that object, I'm good.
Python is strongly, dynamically typed. What does that mean?
Tags: python, computerscience, todayilearned
Published: 2020-12-23 00:37:37

### `Python is strongly typed`

Let's start with the strong typing aspect. `Strong typing` means that the type of an object doesn't change in unexpected ways. A string containing only digits doesn't magically become a number, as may happen in weakly typed languages like JavaScript and Perl. Every change of type requires an explicit type conversion (aka casting).

```python
1 + "1" # TypeError in Python
```

```js
1 + "1" // "11" in JavaScript
```

### `Python is dynamically typed`

Let's talk about the opposite of dynamic typing (static typing) for contrast. In a statically typed language such as C++, you need to fix the type of the variable. This type will be the same as that of the object which is assigned to that variable.

```cpp
int x; // declare step
x = 4; // assign step
```

In a dynamically typed language, the interpreter does not assign a type to the variable per se because the type can change at runtime. If you ask a variable its type, it will give you the type of the object it is currently assigned to at that moment.

```python
x = 4
print(type(4)) # at this moment, x points to an integer
x = "Hello, world"
print(type(x)) # and at this moment, x points to a string
```
PyTorch :: Course Introduction
Tags: pytorch, python, deeplearning, neuralnetworks
Published: 2020-12-23 00:15:06

Hello friends,

This is my brand new series on Deep Learning with PyTorch. In this series you will learn the basics of deep learning and neural networks. Since this course is cantered towards the PyTorch library, I will not be discussing much deeper into what are neural networks and how they work or learn.

This course content is taken from [coursera](https://www.coursera.org/learn/deep-neural-networks-with-pytorch/) and I have included some more information based on my research and latest releases of PyTorch library.

You can still pursue the course on coursera, but here you will find more references and links to the original documentation. Also you can get the exclusive access to all the projects that I have created while learning PyTorch

If you have doubts or any idea reach me out via following sources
+ Email: tbhaxor@gmail.com (Recommended)
+ Twitter: [@tbhaxor](https://twitter.com/tbhaxor)
+ GitHub: [@tbhaxor](https://github.com/tbhaxor)
+ LinkedIn: [@gurkirat--singh](https://www.linkedin.com/in/gurkirat--singh)
+ Instagram: [@_tbhaxor_](https://instagram.com/_tbhaxor_)

So let's dive into the ocean of deep learning using PyTorch.
Carousel slider with pure CSS and Javascript
Tags: css, javascript, webdev, tutorial
Published: 2020-12-23 00:14:59

Carousel slider made with pure CSS and Javascript.

Preview:

<img src="https://raw.githubusercontent.com/romaopedro199/slider-pure-css-javascript/main/screen-capture.gif" alt="Carousel slider made with pure CSS and Javascript" title="Carousel slider made with pure CSS and Javascript" width="800"/>

Source code: https://github.com/romaopedro199/slider-pure-css-javascript

If you found this useful, share with your friends <3

##### Articles, tutorials and projects
https://romaopedro.com/