teleren/devto huggingface dataset:
Underrated Next.js feature 🤯
Tags: nextjs, vscode, watercooler, javascript
Published: 2021-12-10 14:42:16


_This article was originally published on [my newsletter](https://www.tuomokankaanpaa.com/newsletter). If you want to stay up to date and read these as soon as they are published, [sign up](https://www.tuomokankaanpaa.com/newsletter) for the newsletter!_

Ahoy,

Winter has come to Finland. It has been snowing a lot and the temperature has been around -15C for the past week or two. Although I love that there is snow (helps with the darkness) and cold weather in December, I have been mostly staying inside and doing a lot of coding lately.

![Winter is here!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gu2qjewl47lu5y52s0l.jpg)


On top of coding, I have been planning to do one or two Next.js videos before the end of the year. As always, if you have any wishes or suggestions on what kind of videos you would like me to do, let me know (reply this email or [hit me up on Twitter](https://www.twitter.com/tuomokankaanpaa))!

## Latest Youtube videos

As always, I have been uploading one video per week on my [Youtube channel](https://www.youtube.com/tuomokankaanpaa). Here are the latest videos from the channel since my last email.

### Need to show DRAFT content in PRODUCTION? THIS IS HOW!

{% youtube bQRhCTlXJQw %}

This is part 3 of the unofficial "Building a blog with Next.js" series.

In this part we add possibility to view draft blog posts from the headless CMS in production environment. So there is no need for a preview or staging environment and it enables you (or who ever writes the blog posts) to preview the posts in the environment they will be shown for end users.

This is possible with the Next.js Preview feature. Preview feature is one of the less talked about features in Next.js. I also think it is kind of underrated, even though it makes it possible to easily implement the draft content viewing feature, which is in my opinion crucial for every blog application.

### Best VS Code Theme! My HONEST opinion.

{% youtube 6C26mVeDjxo %}

I have been looking for a nice new theme for my VS Code and I think I've finally found one that I really like. You might have seen me using it already in some of the previous videos since I've been testing it out for some time now.

So in this video I want to share with you this theme I currently use in my VS Code. Even though I really love this theme, I reserve the right to change my opinion in the future if I come across an even more awesome theme 😂

That's all for this week!

Cheers,
Tuomo
Transações na Solana
Published: 2021-12-10 14:31:56

Para entender como se desenvolver programas na Solana é necessário entender como funcionam as transações. 

A execução de um programa Solana começa com uma transação sendo submetida a um [cluster](https://docs.solana.com/clusters). O [runtime](https://docs.solana.com/developing/programming-model/runtime) da Solana executa um programa para executar cada uma das instruções presentes na transação, em ordem, uma de cada vez.

## A anatomia das transações

Uma transação contém:

- Um array que possui diversas [assinaturas](https://docs.solana.com/developing/programming-model/transactions#signatures). Essas assinaturas são necessárias para ter a permissão de executar certas operações dentro de um contrato. Por exemplo: Transferir SOL de uma conta para outra.

- Uma mensagem que é dividida entre: cabeçalho com metadados, *array* com diversas contas que poderão ser utilizadas durante a operação e um *blockhash* para o proof of history da Solana.

- Um array com as instruções que devem ser executadas naquela transação.

Os metadados do cabeçalho são utilizados durante o runtime da transação. Ele possui a quantidade de assinaturas, a quantidade endereços read-only e a quantidade de endereços que não precisam de assinatura.

O array com as contas são organizados da seguinte forma:
1. Endereços que precisam de assinatura
2. Endereços que precisam de permissão de escrita
3. Endereços que precisam de permissão de leitura
4. Endereços que não precisam de nenhuma assinatura.
5. Endereços *write-only*
6. Endereços *read-only*

O [*blockhash*](https://docs.solana.com/terminology#blockhash) da mensagem é utilizado para indicar quando foi a última vez que o [client](https://docs.solana.com/proposals/interchain-transaction-verification#client) olhou para o [ledger](https://docs.solana.com/terminology#ledger). Os validadores da Solana irão rejeitar qualquer transação que possuir um *blockhash* muito antigo. Esse artigo trás uma visão superficial, caso queira se aprofundar [clique aqui](https://medium.com/solana-labs/proof-of-history-a-clock-for-blockchain-cf47a61a9274).
Blockchain- An Introduction
Tags: blockchain, technology, beginners
Published: 2021-12-10 13:59:08

Photo by <a href="https://unsplash.com/@thoughtcatalog?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Thought Catalog</a> on <a href="https://unsplash.com/s/photos/blockchain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Hi all, In the upcoming series of articles we will discuss what blockchain is and what are the ways we can get into building our apps based upon this technology.

**Blockchain **is a technology in simple words helps to make some irreversible transactions or the block of data. So thinking in this way makes it the secure way of storing data than the databases. It works in this way like we have a chain of data 1 behind the other and the front data node has the address of the node which is behind it and the 1 in front and has its hash key which is SHA256 hash and is like a digital fingerprint of that data, so if you make some changes in the data that changes the hash key and makes it as out of sync from the other blocks.



To make it in sync we might think we will change the hash addresses in other nodes but that would be an easy task to do for when there are millions of nodes, moreover here we are talking about only 1 network that has a copy of node data, but in actual blockchain, we have many copies of same data and the data to be modified on network copies is not that easy and if on some network it is found data to be mismatched that will not be modified anyhow as blockchain as the technology works on proof of work concepts.
We will discuss blockchain terms more in upcoming articles alongside learning to build apps based upon blockchain
A List of Frontend Communities, Newsletters, and Podcasts to Join Today!
Tags: webdev, programming, productivity, beginners
Published: 2021-12-10 13:48:52

> If you are a frontend developer, then you're at the right place. In this article, you will discover a list of the best communities, newsletters, and podcasts you can signup for; to help you in your frontend development journey.

- [The Big Web Show](http://5by5.tv/bigwebshow)
- [Dev Tips](https://umaar.com/dev-tips/)
- [Front End Happy Hour](http://frontendhappyhour.com/)
- [Front-End Front](http://frontendfront.com/)
- [Front-end Focus](http://frontendfocus.co/)
- [Web Platform News Weekly](https://webplatform.news/)
- [ShopTalk Show](http://shoptalkshow.com/)
- [UX Design Newsletter](http://shoptalkshow.com/)
- [Web Development Reading List](https://wdrl.info/)
- [The Web Platform Podcast](http://thewebplatform.libsyn.com/)
- [Web Tools Weekly](http://webtoolsweekly.com/)
- [Fresh Brewed Front-end](https://freshbrewed.co/frontend/)
- [Pony Foo Weekly](https://ponyfoo.com/weekly)
- [CSS-Tricks](https://css-tricks.com/newsletters/)
- [syntax](https://syntax.fm/)
- [Accessibility Weekly](http://a11yweekly.com/)
- [CSS Weekly](http://css-weekly.com/archives/)
- [CSS Layout News](http://csslayout.news/)
- [Awesome JavaScript Newsletter](https://js.libhunt.com/newsletter?f=es-top-d)
- [Echo JS](http://www.echojs.com/)
- [ECMAScript Daily](https://ecmascript-daily.github.io/)
- [ES.next News](http://esnextnews.com/)
- [JavaScript Jabber](https://devchat.tv/js-jabber/)
- [JavaScript Kicks](http://javascriptkicks.com/)
- [JavaScript Weekly](http://javascriptweekly.com/)
- [React Status](https://react.statuscode.com/)
- [JS Party](https://changelog.com/jsparty)
- [JAMStack Radio](https://www.heavybit.com/library/podcasts/jamstack-radio/)
- [My JavaScript Story](https://devchat.tv/my-javascript-story/)
- [CFE.dev](https://cfe.dev/)
- [Jamstacked Newsletter](https://jamstack.email/)

Are there any communities, newsletters, and podcasts that I missed out on the list? Feel free to add them to the comment section.

Happy coding, friends! 👋
Why did I decided to be a developer?
Tags: programming, beginners, productivity, learning
Published: 2021-12-10 13:48:31

Yeah, I know It should be really **interesting** 😙, one day my life change **entirely**,. It can sound really strange but it's the _truth_ 🤝.

Being a **developer** 👨🏼‍💻 has just given me some opportunities which I had never thought, working with really amazing people who make whatever they want until being able to grow daily as **professional**, it means to be best that yesterday, I'm crazy, I _know_ 😅, nevertheless working in a highly intensive workspace should bring you a **logarithm learning curve**. If you have already worked, as a developer, for a **company** where you have thousands of partners (only in development team) you understand _what does it mean_. 

## Why did I decided to become a software engineer?

I always liked computer sciences and all data staff related with that field, I remember when I was developing some small algorithms in `C` to make **my Arduino** 🤔 came across my room without crashes using a `Car`. I know, I'm really **vicious** 🤧. Try to become a **developer** I have had a lot of failures (it cannot be counted using my two hands), but It doesn't **care** right?

Everyone always forget what means **success**, it really means to have thousand of failure to achieve a little little little (ten little later 🤓) small success but everyone only sees the success and think it's synonymous of **luck**, but **DEAR FRIEND** it isn't luck, it's only **hard work**. Yeah, I know it's only **jealousy** 😇.

The only key to success as a _software engineer_ is to have enough nuts to focus on your work and forget every external comment you can receive 😵‍💫. Yes, it can sounds really confuse but if you are thinking what they say to you, you won't be focused on your target which is _being the best software engineer 👨🏼‍💻_ 

I strongly recommend you to **become** a software engineer, but no anyone, only the best software engineer you can 👻. Only keep in mind the following points: 

- Looking for a programming language that fit best according to what you want to develop 🤑. 
There are too many languages but you need to focus on becoming a master in one of those languages, so you can grow making your knowledge as a sharp Speer. 

- Please don't mind to be a developer only thinking in money, I know that developers have a great salary range, upon 150K yearly 😇. 

- Focusing on understanding what are you doing not in spiting code 🎃. Understanding everything will allow you to grow professionally and focusing your career to the best possible approach. 

These are the things I always try to **keep in mind** 🤝, making my professional career more focused and more efficient.
I'm here to give you a real **perspective** of what are living as a software engineer, this series is only focusing on giving you a clear perspective from someone 😶‍🌫️ who has learnt alone. 

Really, if you like this post please share with your friends, I write this blog in my free time with a clear purpose: 

> Bringing to the world the best software engineers.
Code Review from the comfort of vim | Diffurcate
Tags: linux, bash, git
Published: 2021-12-10 13:37:49

---
title: Code Review from the comfort of vim | Diffurcate
published: true
description: 
tags: ['linux', 'bash', 'git']
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5s5i5sysqda65rw5nuu.png
canonical_url: https://waylonwalker.com/diffurcate/
---

I often review Pull requests from the browser as it just makes it so easy to see the diffs and navigate through them, but there comes a time when the diffs get really big and hard to follow.  That's when its time to bring in the comforts of vim.

{% youtube 5NKaZFavM0E %}

## Plugins needed

This all stems from the great plugin by [AndrewRadev](https://github.com/AndrewRadev).  It breaks a down into a project.  So rather than poping into a pager from git diff, you can pipe to diffurcate and it will setup a project in a tmp directory for you and you  can browse this project just like any other except it's just a diff.

``` vim
Plug 'AndrewRadev/diffurcate.vim'
```

## My aliases

First to quickly checkout PR's from azure devops I have setup an alias to fuzzy select a pr and let the `az` command do the checkout.

``` bash
alias azcheckout='az repos pr checkout --id $(az repos pr list --output table | tail -n -2 | fzf | cut -d " " -f1)'
```

Next I have a few aliases setup for checking diffs.  The first one checks what is staged vs the current branch, the others check the current branch vs main or master.

```
alias diffstaged="git diff --staged | nvim - +Diffurcate '+Telescope find_files'"
alias diffmain="git diff main.. | nvim - +Diffurcate '+Telescope find_files'"
alias diffmaster="git diff master.. | nvim - +Diffurcate '+Telescope find_files'"

diffcommit() {
    git diff $1 | nvim - +Diffurcate '+Telescope find_files'
}
```

## Links

* [diffurcte.vim](https://github.com/AndrewRadev/diffurcate.vim)
Why Agile Testing is going to boost in the year 2022.
Published: 2021-12-10 13:37:47

With the change of latest technology, There are lots of software testing companies adopting agile software testing methodology, Agile development, and agile testing are the top main priorities of companies. The reason behind the success of agile methodology is higher returns and a reduced time to market, so now let’s start with what is agile testing.



What is Agile Testing?
Agile is one of the most popular methods of software testing that includes the rules and importance of agile development. Agile testing is the opposite of the Waterfall method. From the QA point of view, Agile Testing can be started with continuous integration between development and testing. The goal of agile software testing is to start the QA process as early as possible in the software development lifecycle.

**Let’s see what top Agile Test Methodology are…
**•	Test-Driven Development (TDD)
•	Acceptance Test-Driven Development (ATDD)
•	Behavior-Driven Development (BDD)
•	Exploratory Testing
•	Session-Based Testing

But how can businesses get advantages of agile methodology?

**Early Identification of bugs:-
**
During agile testing QA testing is always started as soon as possible, this helps us to remove major bugs in the earliest stage of development.

**Deliver Good Quality Product:-
**
In the agile testing development and QA process is always need to be on the same page. As compared to the traditional testing process, Agile testing finds bugs and errors every after 5 minutes and this is the biggest reason agile has reported a 63% increase in quality and a 70% lower defect rate.

**East to implement new changes:
**
 With the help of agile testing, it is possible to adopt new changes and implement them as per customer expectations and the result is higher customer satisfaction.

**Overcome future risk:-
**
Due to agile testing, it is possible to get Customer feedbacks that can help in adding beneficial features in successive iterations resulting in a wholesome product.

**Easy to Organized:-
**The team of agile is small in size as compared to the traditional QA Team so it is easy to manage.

**Conclusion**
If you want to make your customer happy by delivering regular releases so you should invest in agile testing to find and fix errors faster.
And you can also manage the scope of each release, this will help you to improve customer retention rates.
Let’s connect with a leading [Software testing company in Dallas, USA](https://www.testrigtechnologies.com/) to manage the challenges of agile testing because it’s time to go with speed.
Create a responsive web page with CSS Grid - Big Lebowski style
Tags: beginners, css, grid, codepen
Published: 2021-12-10 13:26:30


I’m a big fan of layout systems like CSS Grid and Flexbox. Whether you choose Grid to build a web page from scratch or Flexbox or both at the same time, either one of them can get the job done for you. Add a few media queries and you can build a responsive layout for multiple devices and screen sizes.


<img width="100%" style="width:100%" src="https://64.media.tumblr.com/e80383f2d623dffbb52fe859694592f2/fc32ec58472c1d74-4b/s400x600/95172b805de7289bd0a6a12a87891293b4907131.gifv" alt="animated gif of the example web page going from small to large page size">

In this example (link to Codepen below) I have built a web page using only CSS Grid. Maybe for some specific styles in the example Flexbox might have been a more suitable choice, but CSS Grid will definitely get the job done.

Because I’m also a big fan of the Coen Brothers movies, I gave the web page example a [Big Lebowski](https://www.imdb.com/title/tt0118715/?ref_=nv_sr_srsg_3) movie theme. Hopefully you’ll enjoy it and if you’ve got any feedback please feel free to respond.

[Here is the link to the example on Codepen.](https://codepen.io/ewaldvanveen/pen/qBPOEQp)
Como subir alterações sem derrubar a aplicação (Elixir Hot Code Swapping)
Tags: elixir, webdev, programming
Published: 2021-12-10 13:22:33

Imagine você poder fazer o deploy deploy em produção sem necessidade de reiniciar a aplicação. Isso é o que mostramos nesse vídeo: Como usar hot upgrade (hot swapping, hot swap) quando trabalhamos com elixir.

  {% youtube HrUG2ngtnJg %}

Código fonte:
https://github.com/ellyacademy/videos/tree/main/hotswap
Famous Front End Development Tools to Go for in 2022
Tags: angular, typescript, vue, ionic
Published: 2021-12-10 13:19:10

List out here Top 6 Front End Development Tools to Go For in 2022


**1.Ionic 2**

Ionic 2 is not just a great mobile app development but tool but also best for front-end development. Using this, developers can create native and optimized applications for websites. It is free and has robust community support along with StackOverflow and Slack. The tools follow the concept of writing once and run everywhere as a single codebase can run on multiple platforms. It provides built-in notifications and has larger plugins availability.

 
**2.Angular.JS**

It is a product of Google and is known as a top front-end development tool. It is an open-source framework that offers data binding, plain JavaScript, controller features. With Angular.JS, amazing web app development services can be provided with reusable components, localization, and directives. Moreover, it also offers built-in testability. The framework is quite easy to use and maintain.


 
**3. Vue.js**

This JavaScript library is used to build web interfaces. Currently, the front-end development tool has around 26.6K rating on Github and has left several other tools behind. If you hire front-end developer that uses Vue.js, you can get lightweight, high-quality, and efficient web apps. The best part about Vue is that it is free from pedigree and has less baggage. With Vue.js, it is easier to improve over the errors. Despite being one of the newer development tools, it is becoming widely popular.

 
**4. Chrome DevTools**

The DevTools of Google Chrome provides excellent viewing functionality and changes the style and DOM of the page. Through these tools, one can execute and debug JavaScript, see messages, edit web pages immediately, and find out the problems faster. Moreover, the tools help put style into the HTML elements and check network activity. It optimizes speed and assesses runtime performance.

 
**5. Webstorm**

It supports smart coding for JavaScript and helps developers code more efficiently when working on big projects. Webstorm has an in-built Node.js app debugger and is highly customizable with various coding styles. With the unified interface, it is working with multiple systems of version control. It can integrate with popular command-line tools to develop web apps.

 
**6. Grunt**

A grunt is a free tool that can perform repetitive tasks like minification, unit testing, compilation, etc. It offers several plugins and can allow you to automate everything with fewer efforts. Using this, one can create own plugin as well.


Get to explore more Front-End Development tools here: https://www.rlogical.com/blog/12-front-end-development-tools-2022-for-front-end-developer/
C VS C++
Tags: c, cpp, programming, beginners
Published: 2021-12-10 13:03:20

Every beginner has the question that what should be the right choice to start the programming with? Also, many newcomers aren’t aware of the differences between C and C++. Here in this article, we will cover all the [differences between C and C++](https://www.techgeekbuzz.com/c-vs-cpp/) (C vs C++) and also discuss what language you should choose between the two.

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

**C++ Programing**

C++ is a high-level programming language, which is created by Bjarne Stroustrup at Bell Labs. It is the updated adaptation of C. In contrast to C, C++ ditches the procedural programming worldview and clings to the article arranged programming worldview, which assists a great deal with tackling ongoing issues.

**C Programming Language**

Designed by Dennis Ritchie at Bell Labs, C is a high-level programming language that first appeared in 1972. C follows the procedure-oriented (procedural) programming approach that makes it different from the other languages that came into existence after the C language.

It, however, has limited keywords, which is not enough to solve real-time problems.

![c vs c++](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cc91a7i4fc5l4u8gkjs.png)
![c vs c++](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3g5bnefga9scb93biqrw.png)
 
## Conclusion

C vs C++ is a topic of eternal debate. Although C++ is more popular than C, both are among the most popular programming languages. Starting with C++ is good to easily understand the concepts related to programming.
Parameterizing Ansible roles, Part II
Tags: automation, ansible, ansiblecollections, ansibleroles
Published: 2021-12-10 13:01:17

In [the previous Tips&Tricks] (https://dev.to/xlab_si/parameterizing-ansible-roles-4f9o) we explained how to parametrize Ansible roles. For all of you who thought "well, documenting variables sucks compared to documenting module parameters", we have some exciting news! Ansible Core features argument specification support for Ansible roles. In practical terms, this means that: 

1. Developers gained a structured way of documenting Ansible role variables/parameters. 
2. End-users are able to use `ansible-doc` to display the role documentation. 
3. Ansible also validates the variable values before including the role.