teleren/devto huggingface dataset:
Advantage of going Serverless for app development
Tags: aws, serverless
Published: 2020-06-18 10:40:39

As we think about an App Development📱, we mostly think about economic factor 💰 and easiest way to get into market 👥.So we choose the team 👩‍💻👨‍💻 and technology for development based on that. As we go forward, one of our main headache would be server management based on load and activities.No more worries, here is your answer for that - Serverless Architecture.

 

Serverless may have a confusing name and might have people believe that it is “server-less” but it is still an impressive architect with various benefits. From a business’ perspective, the best advantage of going serverless is reduced time-to-market. Others being, less operational costs, no infrastructural management and efficiency. As all the architectures, there’s no doubt that the success and viability of a serverless approach too, depends on the requirements of the business. Despite having many advantages, it cannot solve every problem. Therefore, be careful before adopting a serverless approach.

 

There are cases when it makes more sense, both from a cost perspective and from a system architecture perspective, to use dedicated servers that are either self-managed or offered as a service. For instance, large applications  with a fairly constant, predictable workload may require a traditional setup, and in such cases the traditional setup is probably less expensive. Additionally, it may be prohibitively difficult to migrate legacy applications to a new infrastructure with an entirely different <a href=https://ateam-texas.com/serverless-architecture-advantage-of-going-serverless-for-your-next-app-development/ > architecture </a>.
Visualizing React state flow and component hierarchy
Tags: webdev, react, opensource
Published: 2020-06-18 15:40:10

#### An extension to display React state flow and component hierarchy
![State change on Click](https://dev-to-uploads.s3.amazonaws.com/i/6qlhn9dje1jny3is1dr0.gif)

React applications are built of components which are connected with one another and to see the connection with the simple react dev tools when developing an application could be tedious and difficult.

Because of that we decided to build an **open source** [Firefox] (https://addons.mozilla.org/en-US/firefox/addon/realizeforreact/?src=search) and [Chrome] (https://chrome.google.com/webstore/detail/realize-for-react/llondniabnmnappjekpflmgcikaiilmh?authuser=0&hl=en) extension to aid in the viewing of the components. 

Realize for React is a tool to help developers visualize the structure and state flow of their React applications, especially when they are growing in scale and complexity. It currently supports React v.16.8.


![State Modification](https://dev-to-uploads.s3.amazonaws.com/i/edp4w41xexykof0lv7zf.gif)


#Functionality includes: 
__Zoom & Pan__ - Hold down shift to enable dragging and zooming on the tree (to recenter just click the center button)

__Component Focus__ - Click on a node to view state, props and children in the right and panel

__State Flow__ - Click the 'state' toggle to show state flow on the tree. Stateful components have blue nodes and state flow is show by blue links

__Search and Highlight__ - Enter a component name in the search bar to see all matching nodes pulsate

We are an [open source project] (https://github.com/oslabs-beta/Realize) where you can contribute and if you have any concerns please message any of us

*The Team that made it all possible:*
**[Fan Shao] (https://github.com/fan-shao) 
[Harry Clifford] (https://github.com/HpwClifford/) 
[Henry Black] (https://github.com/blackhaj)
[Horatiu Mitrea] (https://github.com/hmitrea)**
Angular HTTP Proxy (CORS) in 10 minutes
Published: 2020-06-18 19:40:23

With Client Side Proxies you can easily redirect cross domain url requests!

- First create a proxy.conf.json file in root directory.

```Typescript
{
  "/g": {
    "target": "https://www.google.com",
    "secure": false,
    "pathRewrite": {
      "^/g": ""
    },
    "changeOrigin": true
  }
}
```
 So if the url is http://localhost/g
```html
 The g becomes https://google.com

```

- Set up the Angular.json config. to use the proxy.

```typescript
     "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "TESTING:build",
            // this line here.
            "proxyConfig": "proxy.conf.json"
          },
        ...
```

**Results**

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

**Note**

This does not work on an http client get like this:

```typescript
 // beacuse there's no listener on port 4200
 http.get("localhost:4200/g")
 
```
This shows what client side routing does; which is, parse a URL in the browser, and route to proper component. Client side Routing does not imply an endpoint, it's just an entry to another page. 

Server side routing does imply endpoints that are highly strict about what they do. Instead of serving a page (which they can do statically) they mostly serve data. 

The proxy is an easy way around CORS issues, but will soon need a bit more regarding same-site policy implementation.
Turn your server into a Centralize-Git-Repository.
Tags: git, webdev, linux
Published: 2020-06-18 21:02:08

GitHub is Great for Open Source projects,
But i don't like GitHub and many other third-party code storage systems when it comes to building a Private-Product which is a highly closed-end system.

I believe in "Your-Code-Your-Responsibility".

Don't Transfer Your Responsibility to others or there will be greater consequences.

If your organization is not involved in open-source development.GitHub is not for you, Private organization must follow own approach to build a product.

Do it hard way to achieve best results,Setting own git server is piece of cake and secure too(If you want your product secure).


###Generate key
```
 ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```

### Obtain key from user and push into server
```
Copy local id_rsa for windows (C:/USER/YOUR-USERNAME/.ssh/id_rsa.pub) 
For linux(/root/.ssh/id_ras.pub) 

INTO Remote server /root/.ssh/authorized_keys 
```

### Create Directory to store your centralize git server
```
mkdir git-server
cd git-server
git init --bare
```

### Access this Repo at local client
```
git clone root@ip-address:/git-server
```

### Additional Note:
If you like to make git more secure keep development and production copy where development copy is accessible to everyone in your organization and production copy allow only via special-mechanism such as Custom platform build in browser where user sync development code into production after checks-and-balance.

For my scenario (Single engineer)
I do not use git at the local/server.Simply use own platform where development code pushes into production mode after stable development channel.


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


###Moral Of the story
IF I can do it as a single engineer, It's a teeny-tiny challenge for the Minimal Team of any organization.
In Case you care about your product.

EOF
Having inclusive names in docs examples
Tags: discuss, inclusion, docs
Published: 2020-06-18 21:33:24

We want to make the names we use in our docs examples more inclusive from both a gender and a cultural perspective. 

We use a [docs-as-code](https://www.writethedocs.org/guide/docs-as-code/) approach to docs so we're interested in automation and scalable approaches.

Is this something you or your team have worked on?
Could you recommend any best practices in approaching this?

Thank you!
React Course Pre-Launch Giveaway
Tags: react, javascript, alterclass, webdev
Published: 2020-06-19 06:38:49

In celebration of our new React course launch (coming soon). 
Here’s our giveaway challenge to **win a PRO access to the course**.

To enter:

1. Follow us on Twitter [@AlterClassIO](https://twitter.com/AlterClassIO)

2. Retweet the [giveaway post](https://twitter.com/AlterClassIO/status/1273648921181642755?s=20) & tag 2 friends

3. Add a comment in the Twitter post to explain why you want to learn React

The giveaway will run until the launch date. **Every Friday at 12pm (CET) 5 winners will be selected**.
Solving buffer.readUIntBE is not a function reading a JWKS key with NodeRSA
Published: 2020-06-19 09:10:13

Recently while trying to read a public key in from a JWKS endpoint I was stumped by an error when importing the public key using [NodeRSA](https://github.com/rzcoder/node-rsa). My code looked like this:

```Typescript
  return rsa.importKey(
    {
      n: Buffer.from(jwksKey.n),
      e: jwksKey.e,
    },
    "components-public"
  );
```

The error was:

```bash
TypeError: buffer.readUIntBE is not a function
    at Object.module.exports.get32IntFromBuffer (C:\dev\jwttest\node_modules\node-rsa\src\utils.js:43:27)
    at RSAKey.module.exports.Key.RSAKey.setPublic (C:\dev\jwttest\node_modules\node-rsa\src\libs\rsa.js:172:48)
    at Object.publicImport (C:\dev\jwttest\node_modules\node-rsa\src\formats\components.js:44:17)
    at Object.detectAndImport (C:\dev\jwttest\node_modules\node-rsa\src\formats\formats.js:65:48)
    at NodeRSA.module.exports.NodeRSA.importKey (C:\dev\jwttest\node_modules\node-rsa\src\NodeRSA.js:183:22)
    at C:\dev\jwttest\dist\jwks.js:53:20
    at Generator.next (<anonymous>)
    at fulfilled (C:\dev\jwttest\dist\jwks.js:5:58)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
```

I couldn't see any issue with the way I was setting up the buffer. I was able to log the contents out. Everything looked correct. When I searched for `buffer.readUIntBE is not a function` I found nothing useful. It left my scratching my head and saying "What the damn hell!?".

![What the damn hell](https://dev-to-uploads.s3.amazonaws.com/i/sqlslw3u7n8a9o0ocusd.gif)

Eventually I worked it out. The issue wasn't with th buffer I had so much as the one I didn't. I had been let down by own poor use of the Typescript type system. I had assumed that since the code was compiling that I was passing correct values and skipping reading the documentation. The mistake I had made was that the JWKS spec sets up the [`e` (Exponent) parameter](https://tools.ietf.org/html/rfc7518#section-6.3.1.2) as a Base64urlUInt-encoded string value and the `new NodeRSA().importKey({n,e}, "public-components")` api takes a `number`or a `Buffer` as the `n` parameter.  

In this case the error I was saying that `buffer.readUIntBE is not a function` where `buffer` is a `string` not a `Buffer`
Progressive Web Apps (PWAs): The future of mobile apps
Published: 2020-06-19 13:16:25

[Progressive web apps](https://www.techaheadcorp.com/blog/progressive-web-apps/) are continuously gaining momentum in the digital space. PWAs provide the best & combined experience of web and mobile apps to the user. Businesses need it to stay ahead in the competition. If we talk in non-IT language, then it would be wrong to say that these are the websites built using wen technologies but with the features of an app.

Modern technologies and development in browser and services have added enabled web developers to let users install web apps to their home page, receive push notifications and operate it even without internet connectivity. 

PWAs solve generic native apps issues like high data consumption, storage space, need for internet connectivity, development cost, etcetera. Cross-platform accessibility and offline accessibility to data are two of the major advantages of PWAs.
PlaywrightSharp v0.10 for Firefox is here!
Tags: playwright, csharp
Published: 2020-06-19 17:11:59

---
title: PlaywrightSharp v0.10 for Firefox is here!
published: true
date: 2020-06-19 00:00:00 UTC
tags: playwright,csharp
canonical_url: https://www.hardkoded.com/blog/playwright-sharp-firefox-010
---

![firefox](https://media.giphy.com/media/xsE65jaPsUKUo/giphy.gif)  
Firefox joined to the PlaywrightSharp family!


## What can I do with PlaywrightSharp.Firefox?

You can do lots of things.  
![a lot](https://media.giphy.com/media/qkdTy6tTmF7Xy/giphy.gif)

Seriously!

![seriously](https://media.giphy.com/media/Ful8UzCFYAjlu/giphy.gif)


You should be able to do almost everything you would do with his older brother PuppeteerSharp or his younger brother PlaywrightSharp.Chromium.  
This is how you can take a screenshot in PlaywrightSharp **NOW**!

```cs 
var options = new LaunchOptions
{
    Headless = true
};

Console.WriteLine("Downloading Firefox");
var firefox = new FirefoxBrowserType();

await firefox.CreateBrowserFetcher().DownloadAsync();

Console.WriteLine("Navigating google");
await using var browser = await firefox.LaunchAsync(options);
var page = await browser.DefaultContext.NewPageAsync();
await page.GoToAsync("http://www.microsoft.com");

Console.WriteLine("Taking Screenshot");
File.WriteAllBytes(Path.Combine(Directory.GetCurrentDirectory(), "microsoft.png"), await page.ScreenshotAsync());

Console.WriteLine("Export completed");
```

## Is there anything I can't do?

There are only two features not implemented on PlaywrightSharp.Firefox: PDF generator and Tracing.

## Can I use this package in Production?

As [I mentioned when we launched Playwrightsharp.Chromium](https://www.hardkoded.com/blog/playwright-sharp-monthly-jun-2020), If you start using PlaywrightSharp now, the API is going to change, guaranteed, but you will jump into a project that will have way more support and new features.

PuppeteerSharp doesn't support Firefox yet. So I believe PlaywrightSharp.Firefox, even in its 0.10 version, is the best library to automate Firefox in .NET.

# Final words

Now that we shipped our first version, I'm looking forward to getting more feedback. The issues tab in GitHub is open for all of you to share your ideas and thoughts.  
Don't forget to follow me on Twitter [@hardkoded](https://twitter.com/hardkoded) to get more updates.

Don't stop coding!
Java/Spring Twitter Bot
Tags: java, twitter, spring, bot
Published: 2020-06-19 17:35:45

Ah, ye ol' twitter bot... Gotta love them. 

I've been sat at home for the past couple of months self-isolating and have become dreadfully bored.. So why not work on a cool little project? I definitely didn't get super excited and giggled like I was witing my first hello world  when the @ItsMelonBot actually posted a tweet.

Believe me, I know its nothing fancy, I essentially do this every day at work but it was still pretty cool non the less... It the little things in life!

The journey began with me going through medium until I came across a post 'cool programming projects' and saw the twitter bot and thought... why not.

I needed an idea, a retweet bot? Boring. A trend bot. Booooring. How about a melon bot?... A what?

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

I kicked started Intellij and started the process, had it finished in 15 minutes or so. The thing that did take me ages to get my head around was deploying it into Azure. Now that... that was a b****. I tried to sign up to AWS but for whatever reason AWS didn't like me very much so off to Azure I went. Azure is seriously complicated... It took a while to get my head around how it all works but we got there in the end and it made deploying my bot to the cloud much faster and easier.

For anyone interested, I've created a public GitHub repo with detailed documentation and comments on how to get it up and running, thought some of you would like to play around with it or add some functionality.

https://github.com/goldennoodles/Spring-Twitter-Bot

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

Just wanted to get my thoughts on paper. If you would like to see a full tutorial on deploying it, etc. Let me know!

Oh and follow the bot, he's pretty funny.
https://twitter.com/ItsMelonBot

Rus - ItsMelonBot's papa.
Another newsletter for User Interface Frontend Developers
Tags: news, uiweekly, css, career
Published: 2020-06-20 10:43:46

The UI Development Mentoring Newsletter contains a list of exciting and useful articles, tutorials, tools, apps and everything else related to *user interface frontend development* and *freelancing* and it is sent to your inbox once a week.

Subscribe here: https://mentor.silvestar.codes/reads#newsletter. 🙏
SVG Name Animation
Tags: codepenanimation, svganimation, svg
Published: 2020-06-23 16:56:18

---
title: SVG Name Animation
published: true
tags: codepenanimation , svganimation , svg
description: Check out the animation which i've created by using SVG
---

> Check out the cool animation which i've created by using SVG


{% codepen https://codepen.io/caseyanmol/pen/xxZgaZB %}
Create a professional resume in a few minutes (for free).
Tags: career, googlecloud
Published: 2020-06-20 17:40:49

Having a professional resume is the most important thing when you apply for a job, which depicts your skills and experiences and could be the deciding factor for getting you shortlisted for the face to face interview out of all the applicants. 😟

Hence, if you don’t have your resume yet, let's start making it. 🥳

Fret not, you won't be spending a single penny to get those cool looking templates. 🤗

The easiest way to create a professional resume is by using **Google docs**. Yes! you read that right! 🤯

## Step 1:

Login to your google account and click on google docs. 👩🏻‍💻

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

## Step 2:

It will tell you to select the type of google doc. Go to the CV section and check out the templates available for creating a resume.

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

## Step 3:

Chose any one of those templates availabe. If you are confused about which one to chose, select Serif one. It looks highly professional and I prefer it too! 👌

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

## Step 4:

Now the last step, Edit the template with all your details, And tadaaaa! your professional resume is ready! 🎉

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

## Bonus tip:

Save this resume as a google doc in your drive, so that it will be easier to update it now and then, and you can obviously download the pdf version of it whenever you want! 💎

Thanks for reading this, and I hope you liked it. 💖
Métricas para seu time
Published: 2020-06-20 21:24:52

Nesse artigo vou apresentar algumas métricas (não todas porque existem muitas), mas talvez as mais conhecidas.

Todas as empresas possuem fluxos de trabalho e devem aprender a administrá-los para direcionar melhor suas ações. As métricas não têm intenção de julgar as pessoas individualmente, mas sim, melhorar o fluxo.

**“Gerencie o trabalho, não as pessoas.”**

###**Lead Time**
O Lead Time consiste em medir o tempo entre o momento em que você se comprometeu com o cliente a fazer determinado trabalho até o momento da entrega do incremento.

####Como começar a medir?
Comece registrando a data de quando houve o compromisso com o cliente, chamamos de Ponto de Comprometimento (Commitment Point). Quando você entregar o incremento marque a data de entrega e chamaremos de Ponto de Entrega (Delivery Point).

Lead Time = Delivery Point – Commitment Point

####Qual é a importância dessa métrica?
Você pode ter vários insights com esse indicador e de como melhorar o dia a dia. Podemos verificar através do gráfico CFD (Gráfico de Fluxo Acumulativo) se o item ficou, por exemplo, parado na fase de testes por muito tempo e ter ações para que não volte ocorrer esse problema.

###**Cycle Time**
O tempo de ciclo se inicia quando uma nova tarefa entra no estágio de “em progresso” e alguém está, de fato, trabalho nela.

####Como começar a medir?
Tempo de Ciclo = Trabalho em Progresso / Taxa de Transferência

###**Throughput**
Vazão (Throughput) é a quantidade de itens que o time entregou em um período.

####Como começar a medir?
Primeiro defina o período: semana, quinzena, sprint, mês, trimestre, semestre. Após definir o período, verifique quantos itens chegaram até o Delivery Point.

####Qual é a importância dessa métrica?
Este indicador vai ajuda a dar uma visão dos itens finalizados e seria uma boa forma de aumentar este indicador se trabalhar com itens pequenos. 

###**Aging**
Envelhecimento (Aging) é uma métrica que observa a idade dos itens. Essa métrica consiste em saber quanto tempo um item ficou esperando antes de começar a trabalhar.

####Como começar a medir?
Meça o tempo desde o momento em que o item foi solicitado até o momento onde o time começou a trabalhar.

####Qual é a importância dessa métrica?
Um time ágil está trabalhando em itens que entregam valor, se existe um item velho será que ainda é relevante para o cliente? será que não estamos "perdendo tempo" ?


Para finalizar lembre-se antes de sair implantando várias métricas/indicadores, escolha um e trabalhe fortemente em cima dele e melhor do que ter apenas números é ter ações para melhorar continuamente ;)
Briefing 27
Published: 2020-07-04 17:00:12

*Original Post Date: 6/25/2020*
*Author: IvanCoHe*

## IN LIGHT OF THE NEW LEAKS I SAW SOMETHING THAT CLEARED UP SOME SHIT

*They told us there were no active volcanoes here but yknow, they have been known to be wrong... on many levels:*<br>

![](https://cdn.discordapp.com/attachments/685994642768265235/725671046753157171/f245182c-5f04-462a-b58f-258ec9ad6992.png)<br>

What if the ember forests are products of that volcanic activity?

**Openable warehouse gate:**<br>

![](https://cdn.discordapp.com/attachments/685994642768265235/725671420197208064/unknown.png)<br>
I think that something will be there. Probably lore stuff, but who knows.<br>
**Jetpack**<br>
Don't quote me on this, but i'm seeing this being an Exosuit upgrade, kinda like a NMS styled jetpack<br>

*Editors Note:* IvanCoHe (the person whos been writing all of these brefings) left shortly after this for unknown reasons. (Ivan if you see this we hope you come back some day.)
In Depth Laravel - Master Laravel in 32 hours
Tags: laravel, php, vue, javascript
Published: 2020-07-04 19:40:29

# Become a professional Laravel developer from this course
Check full detail at https://indepthlaravel.com

### What you will get
* 28 Chapters
* 288 Videos
* Beginner
* 32.70 hour of content
* Lifetime Access
* Access anywhere
* Real Project
* Certificate

## What you will learn
* Acquaintance with the laravel
* What are MVC
* Project 1 - Advanced Todo App using Livewire
* Project 2 - URL shortener using Vuejs
* Project 3 - Eventile - An Event Ticket App API
* Project 4 - Test Driven Blog
* Project 5 - Support Ticket system with Laravel Livewire
* Deploying every project on server

Here is the quote from creator of laravel about the course
{% twitter 1279449627738042369 %}

If you want to know more about the course, you can visit https://indepthlaravel.com or just DM me on twitter or shoot an email

I hope this rich content makes your life easier while learning Laravel