teleren/devto huggingface dataset:
Tips on how to follow a tutorial
Tags: webdev, javascript, beginners, programming
Published: 2023-01-03 22:15:13

Photo by <a href="https://unsplash.com/es/@markuswinkler?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Markus Winkler</a> on <a href="https://unsplash.com/s/photos/tips?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  

If you like to code along while following a tutorial, then this post is for you.

Coding along with your instructor can be doubting sometimes but it’s important to understand  that we don't code along to memorize what the instructor is teaching but rather, to understand it. Here is what I think could help us learning a better way. 

### The environment.
Some instructors will use online editors like codesandbox or replit as coding environments with boilerplate code already setup. And some courses are so bulky that students find it hard to even get it to work. But the course is already out there and you need to finish hard. The sad thing about it is that some students will give up and the brilliant ones may take longer to finish the course. So if you are an instructor, please test test and test your environment before releasing the course. If you are a student, don’t worry too much about the fancy things and focus on getting the skills. For example, if you are learning JavaScript and you are having issues getting the boilerplate to test your code, no worries at all. Just open your code editor and create a file with `.js` extension and test your app. Do not stress yourself over doing exactly what the instructor does, sometimes it just doesn't work.

### It's not about finishing the course
Trust me, it isn’t about that at all. And don’t get me wrong. Finishing the course is good, very good but understanding what you have learned is even better. So if you took a course and one of the capstone projects was to build a Todo app just be aware that the other 12000 enrolled students did that too. So, whatever project you are working on while you take that course, take it to the next level. If it's a tip calculator app, try to give it a different UI, add some animations or even backend functionalities and most importantly, give it a name. Don't call it a tip calculator. 

### Practice repetition
Now that you are done with your tutorial or a particular project in the same tutorial, can you rebuild it entirely without referring to the tutorial? Answer that question as soon as you are done. Now let’s assume that you rebuild the project without looking at the tutorial, time it up. Ask yourself how long it took you to rebuild it. Give it a try as many times as you want to. Trust me you are in charge of your journey and these little checks make you realize how much work you need to put in. The questions seem very insignificant but if you ask these to yourself on a daily basis, you will be amazed by how your journey will start to make more sense. You will track how many projects you have built and how long it took you to build them. At the end of the day, it’s important to know that tutorials are here to help us and not get us stuck.
This might be increasing your bundle size!
Tags: javascript, typescript, programming, node
Published: 2023-01-03 22:05:40

Hi there!

This is known by a bunch of people, but maybe you didn't know it, just like I didn't (':

Some time ago, I was on LinkedIn and I saw an interesting project. Inside the code, there was a code snippet similar to this

![Wildcard Icon Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mcqcud0y05n06jvjkv1.png)
I thought it was clever, it seemed clearly better than tons of lines just for importing icons, then I started using it in most of my codes.

Recently, though, a work colleague told me not to, because in fact NodeJS builds with all the icons, even the ones that were not used, and therefore, increasing the project size and reducing the performace.

Instead, in fact, it is more advantageous to import one by one, similar to this

![Not Wildcard Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txkndtl7yf2ucumfgy0k.png)

This post wouldn't be so useful if it didn't contain a way of knowing whether importing wildcard or one-by-one is more effective to your code.
And for this, I recommend a Vscode extension called '[Import Cost](https://citw.medium.com/keep-your-bundle-size-under-control-with-import-cost-vscode-extension-5d476b3c5a76)'


![Import Cost 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tybax6sbp9trcedsdv3i.png)

![Import Cost 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9i98vd9m3pygocitv0s6.png)

Obs: Wildcard imports are still a very valid option, but mostly if you'll use all or most of the imported content (:
Showing Relational Tables in Your JSON Response
Published: 2023-01-03 21:25:36

Consider this scenario:

You're a ruby developer and you've just set up a few models with a one-to-many relationship, for the purpose of this blog we'll say the models are Author and Book.

An Author `has_many :books` and a Book `belongs_to :author`

This is common, as in programming we tend to rely on real-world models for our code. A pet can belong to an owner and an owner can have many pets, and a game can have many reviews, but a review can only belong to that one game.

Let's also say, you've developed a React frontend where you need to show these relationships, and your backend is using Ruby, ActiveRecord, and Sinatra. 

Well, it sounds like you need to use "include:" in your Sinatra ApplicationController!

## Let's get started!

Locate your Application Controller; this is the part of our Ruby backend that will handle what endpoints we will fetch from inside our React frontend.

Using our Author and Book models, here is what this class might look like:

```
class ApplicationController < Sinatra::Base

  get '/authors' do
    Author.all.to_json
  end

end
```

Making sure that we inherit methods from Sinatra::Base will allow us to use various options inside our Controller file.

Here's an example of what JSON data we might receive if we visit http://localhost:9292/authors (once we have started the server, that is):

```
[
  {
    "id": 1,
    "name": "J. R. R. Tolkien",
    "image_url": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQO-WAOvTtPuzb5mS0h2GIZvwSO-HLofOY7VZRZBfcVW8wEJQUa"
  }
]

```

This is nice, but what if we want to see all of the books this author has written?
We would then need to create a new route inside our Application Controller, see a list of all the books in our database, then compare the author_id of each book to our desired author's id...
I don't know about you, but that sounds like a lot of extra and unnecessary work!

There's one little line of code we can add to our author's route that will make things a little easier, can you spot the difference?

```
class ApplicationController < Sinatra::Base

  get '/authors' do
    Author.all.to_json(include: :books)
  end

end
```

Hey! This new route says `(include: :books)`, what's that about?

Well, that little line of code allows the books associated with the authors to be included in the JSON data without a whole lot of extra work!

Here's what our JSON data will look like now:

```
[
  {
    "id": 1,
    "name": "J. R. R. Tolkien",
    "image_url": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQO-WAOvTtPuzb5mS0h2GIZvwSO-HLofOY7VZRZBfcVW8wEJQUa",
    "books": [...
    ]
  }
]

```
You can further customize the data you receive by changing up the syntax a bit (depending on how you set up your classes and what you'd like to return), but there you have it! 
A great way to receive all of the data you need for your frontend without having to rely on using a GET request to fetch data more than once.
As possibilidades e escalabilidade do React Native
Tags: react, javascript, reactnative, expo
Published: 2023-01-03 21:25:19

Ao pensar numa linguagem de programação, pensamos nas possibilidades diversas que nos são proporcionadas. No mesmo caso se é com o framework React Native.

Uma das maiores façanhas dessa linguagem, está em sua capacidade de ser pensada e desenvolvida tanto para Android, como também iOs e pela sua base Nativa que possibilita maior estabilidade e fluidez para as aplicações criadas. Mas para um aplicativo funcionar, dependendo do que ele é focado, teria necessidade de acessar sua localização,câmera ou outro componente físico do seu celular,além de APIs nativas e felizmente também é possível fazer isso. Mesmo que atualmente no mercado, exista outras linguagens de progamação para ambiente mobile como Flutter,seu maior rival, o React Native ainda é muito utilizado em aplicativos famosos, com: Instagram e Facebook, que recebem diversas visitas diárias e armazenam milhares de dados. 

Diversos desenvolvedores criam com criatividade,as mais diversas idéias de aplicações de saem do papel e viram realidade, servindo para o uso de muitas pessoas. Mesmo que muitos não tenham o objetivo de servir em tempo integral o usuário, muito se é feito nessa linguagem. Temos o exemplo de Enatega, um serviço de deliivery de alimentos, com possibilidade de gestão no próprio app, além do painel de restaurantes participantes e até o painel de piloto. Outro caso é o SparkRentals, uma aplicação feita para usuários alugarem patinetes elétricas, com mapa local,sabendo onde guardar o elétrico após o uso. As possibilidades de desenvolver variam do mais simples aplicativo de cronômetro até a criação de um aplicativo médico sobre demanda, que é recentemente muito desejado e tem tido grande apelo fora do Brasil.
Skills you need to become a successful Software Engineer
Tags: programming, webdev, css, blockchain
Published: 2023-01-03 21:21:09


As a software engineer, you need to have a combination of hard and soft skills.

Your job involves writing code, reviewing code, and working with product developers and the project manager.

**"But this is not the case!"**

As any software Engineer can do. what do you need to do to stand out from the crowd?

I have broken things down so that you know how to succeed and stand out from the crowd.

let us take a look at the Hard skills you need to be a successful engineer.

Hard skills are technical abilities learned through education or professional development. These are skills for proficiency and competency.

**A need to be successful software engineer needs to be familiar with:**

1. Programming language
2. Data structure and algorithms
3. Testing and Debugging
4. containers

These are hard skills you need to be more familiar with if you want to be a successful software engineer who stands out from the crowd and drives more successfully.

We shall take a first seat on soft skills in our next post.

Don't forget to leave a comment or add value to the above-mentioned.
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2023-01-03 21:02:55

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week
tags: icymi 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## How to Write an Awesome Readme

Writing a good Readme is important because it's the first impression you give folks and helps them to better understand your project. @surajondev guides us through what to include and why it's important.

{% embed https://dev.to/documatic/how-to-write-an-awesome-readme-cfl %}


## Why We Need Authorization & Authentication

Authorization and authentication are two essential security measures that enable us to protect our data and ensure that only authorized individuals have access to it. Let's dig deeper into both topics with @mariamarsh. 

{% embed https://dev.to/mariamarsh/why-do-we-need-authorization-and-authentication-13d9 %}


## React Hooks vs. Redux

@qbentil explains the complimentary and distinctive concepts of React Hooks and Redux, letting us know the best state management tool to reach for depending upon the scenario.


{% embed https://dev.to/qbentil/react-hooks-vs-redux-51p7 %}


## My HackerRank Internship Experience

HackerRank is a technology hiring platform that helps over 1,000 companies hire skilled developers and innovate faster. Join @kitarp29 on their hiring adventure, starting all the way back in 2019. 

{% embed https://dev.to/kitarp29/my-hackerrank-internship-experience-2d3i %}


## 7 Tips for Git Productivity

Git is a really powerful system with lots of hidden features not known by most developers. In this post, @dgenezini will show some features that will make your work easier when using Git.

{% embed https://dev.to/dgenezini/7-tips-for-improving-your-productivity-with-git-ajg %}


## Microservice vs Monolithic

When we start learning backend development and implementation, many of us implement all our functionalities in one codebase. But is it right to do so? @lovepreetsingh covers the benefits and drawbacks of switching to microservices-based architecture. 

{% embed https://dev.to/lovepreetsingh/microservices-vs-monolithic-architecture-a-practical-approach-4m06 %}


## Public Speaking When You’re Scared

@blackgirlbytes shares her experience of dreading speaking in public and learning to conquer the fear little by little. Plenty of helpful tips here to build confidence and prepare you for your next speaking event!

{% embed https://dev.to/blackgirlbytes/how-to-speak-at-a-conference-when-youre-scared-of-public-speaking-562f %}


_That's it for our weekly Top 7 for this Tuesday! Keep an eye on dev.to this week for daily content and discussions...and be sure to keep an eye on this series in the future. You might just be in it!_
Deploy A Single Page Application to Azure Static Webapp using TeamCity, Jenkins or any CI, or command line.
Tags: azure, cicd, staticwebapps
Published: 2023-01-03 20:46:43

---
title: Deploy A Single Page Application to Azure Static Webapp using TeamCity, Jenkins or any CI, or command line.
published: true
description: 
tags: #azure #cicd #staticwebapps
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-03 20:20 +0000
---

I was trying to setup a deployment for an SPA application to an Azure Static Web app using TeamCity, but most of the tutorials I found was doing the deployment through CI/CD of Github's Actions by monitoring a specific branch of a Github repository and deploy automatically whenever we check in into that branch, or the other alternative is using Azure DevOps pipeline.
But what if we don't want to use neither, and instead we need to do it on demand from TeamCity, or any other CI/CD tool?

I found a tool created by Microsoft which provides cli support to manage and deploy to static website.  
The tool called [Azure Static web app CLI](https://github.com/Azure/static-web-apps-cli).  
The tool provides more than deployment functionality, but has lots of features to emulate authentication, and provide proxy for the API calls from the static web site.  

But in this post we will only talk about the deployment using that tool:  

1. install the tool using npm 
```bash
npm install -g @azure/static-web-apps-cli
```

2. login using the command to login to your azure subscription and connect to existing static web app.  
If you don't have an app yet, then just ignore the `app-name` argument, and the tool will create a new app for you.

```bash
swa login --subscription-id <subscription> --resource-group <group name> --app-name <the app-name> 
```

3. navigate to the folder that has the production static files, for example let's assume our deployment files are in folder `dist`.  

4. if you want to deploy to a new static web app, then just do:  

```bash
swa deploy ./dist
```
This will ask you about the name of the new app, and will create it.  

In case you want to deploy to an existing static web app, then first you need to get that application token by doing this

```bash
az staticwebapp secrets list --name <the name of your app> --query "properties"
```

This will display a json as follows: 

```json
{
  "apiKey": "cf........700f62213"
}
```
the apikey is the token.  
Then run the following:  

```bash
swa deploy ./dist --deployment-token <the token> 
```

You will get confirmation as follows:

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


This will not deploy to production, but to a preview environment.  
So the URL will be the same URL of your static web app, but tailed with "preview".  

This feature will give you a chance to check your app, before going to production.  
To deploy to production you add `--env production` to the previous command , so it will be

```sh
swa deploy ./dist --deployment-token <token> --env production
```
Add Some Whiskers to Your Website with the Cat Facts API
Tags: javascript, api, softwareengineering
Published: 2023-01-03 23:36:20

---
title: Add Some Whiskers to Your Website with the Cat Facts API
published: true
date: 2023-01-03 20:34:48 UTC
tags: JavaScript,API,SoftwareEngineering
canonical_url: https://techdevblog.io/add-some-whiskers-to-your-website-with-the-cat-facts-api/
---

 ![Add Some Whiskers to Your Website with the Cat Facts API](https://techdevblog.io/content/images/2023/01/image_6.png)

Are you ready to learn some furtastic cat facts?

First things first, let's talk about what an API is. An API, or Application Programming Interface, is like a messenger that sends a request for information from one software program to another. The other program then sends a response back, allowing the two programs to communicate and share data and functionality.

Now that we've got the basics out of the way, let's dive into the fun stuff: cat facts! There's an API called the "Cat Facts" API that allows you to access a database of, you guessed it, cat facts. And the best part? It's totally free to use!

For example, let's say you want to display a random cat fact on your webpage. You can use the `fetch()` function in JavaScript to make a request to the Cat Facts API, like this:

```
fetch('https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=1', {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    const catFact = data.text;
    document.getElementById('cat-fact').innerHTML = catFact;
  });
```

This will make a request to the Cat Facts API, asking for a random cat fact. The API will respond with a JSON object containing the cat fact, which you can access by calling `response.json()`. Then, you can use the cat fact to update the element with the ID "cat-fact" on your webpage.

And that's it! With just a few lines of code, you can add some feline fun to your website. Just don't let your cat see you using their secrets for your own gain... they might not be too pleased.

I hope this helps get you started with the Cat Facts API. And if you want to try out different APIs, [API Ninjas has a few](https://api-ninjas.com/api), and [ProgrammableWeb lists even more](https://www.programmableweb.com/content/search)!

Happy coding!
Block Pull Requests that make tests slower
Tags: unittesting
Published: 2023-01-03 20:19:14

As a developer, I was constantly frustrated by the fact that our unit tests seemed to get slower and slower over time. It was a never-ending cycle: I'd make them faster, only to discover a month later they are slow again. It was a real drain on my productivity, and I knew there had to be a better way.

That's when I came up with the idea for BlueRacer. I wanted to create a tool that would help developers like me keep their unit tests fast and efficient, without all the hassle of constantly hunting down slow tests.

With BlueRacer, it's easy to block the merging of Pull Requests that make your tests slower. Simply install https://github.com/apps/blueracer-io on your repo, configure your test runner to output the "junit.xml" report file, and upload this file to BlueRacer.io with a single command. From then on, BlueRacer will automatically post a warning on any Pull Request that would cause your tests to run slower, giving you the opportunity to fix the slowdown before the merge.

I'm thrilled with the results I've seen since using BlueRacer. Our unit tests are running faster than ever, and I'm able to focus on my work rather than constantly worrying about other people's Pull Requests slowing me down. If you're tired of dealing with slow unit tests, I highly recommend giving BlueRacer a try at https://github.com/apps/blueracer-io.

Let me know what you think!
I get error on navigation from 2 different nested routes
Tags: help, angular
Published: 2023-01-03 20:11:01

Whenever I try to navigate from 2 different nested routes I get this error


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

I am trying to logout from a portal routing from (patient/dashboard) to (auth/login) using the header component (shared module)

this is app-routing.module.ts


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

* patient.html
`<nz-layout>
  <app-header></app-header>
  <nz-content>
    <router-outlet></router-outlet>
  </nz-content>
  <app-footer></app-footer>
</nz-layout>`

* header.html
` <button mat-menu-item (click)="onLogout()">
     <mat-icon>logout</mat-icon>
     <span>Logout</span>
  </button>`

* header.ts
` onLogout() {
    this.router.navigate(['/auth/login']);
  }`
What is the difference between SSR, ISR, SSS 👀
Published: 2023-01-03 19:54:54

---
title: What is the difference between SSR, ISR, SSS 👀
published: true
description: Server-Side Rendering vs Incremental Server-Side Rendering vs Server-Side Streaming
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-03 10:59 +0000
---

SSR (Server-Side Rendering), ISR (Incremental Server-Side Rendering), and server-side streaming are all techniques for rendering and serving content to a client in a web application. Here is a brief overview of the differences between these three approaches:

**SSR (Server-Side Rendering):**

* SSR involves rendering the content of a web page on the server and sending the fully rendered HTML to the client.
* This can improve the performance and SEO of a web application, as the client does not have to wait for the JavaScript to execute before the page is displayed.
* However, SSR requires more resources on the server, as the server has to do the rendering work.

**ISR (Incremental Server-Side Rendering):**

* ISR is a variant of SSR in which the server sends the initial HTML content to the client, and then the client renders the rest of the content using JavaScript.
* This can improve the performance and SEO of a web application, as the initial content is displayed faster and the server does not have to do as much rendering work.
* However, ISR requires the client to have JavaScript enabled, as the client is responsible for rendering the rest of the content.


**Server-Side Streaming:**

* Server-side streaming involves sending a stream of data from the server to the client in real-time, without waiting for the entire response to be generated.
* This can be used to implement real-time features such as live updates or chat applications.
* Server-side streaming requires the use of a special HTTP header, Transfer-Encoding: chunked, which tells the client to expect a stream of data rather than a single response.