teleren/devto huggingface dataset:
Popular tag(#blockchain) last week top 5
Tags: blockchain, c4r4x35
Published: 2022-12-18 17:59:38

##Roadmap to Blockchain Development
To know how blockchain and web3 are the new internet click here.

In this roadmap to blockchain development, I will be suggesting some of the learning resources as we walk through. Also this article...
{% link https://dev.to/siddharthsing/roadmap-to-blockchain-development-on4 %}
##Re-entrancy attacks in Ethereum smart contrats
A re-entrancy attack is a type of vulnerability that can occur in smart contracts that allow an attacker to repeatedly call an external contract in a way that consumes all available gas. This can lead...
{% link https://dev.to/_jaleltounsi/re-entrancy-attack-in-an-ethereum-smart-contrat-5e2f %}
##Smart contracts: audit ‘em all like a security engineer
Don’t let reentrancy and front-running attacks, signature replay, gas issues, sensitive data leakage, deadlocks, and various kinds of vulnerabilities in smart contracts pfaff you around.

⚠️...
{% link https://dev.to/cossacklabs/smart-contracts-audit-em-all-like-a-security-engineer-46b5 %}
##How to Build a DAO with Truffle
Since Satoshi Nakomoto introduced Bitcoin and the blockchain in his seminal 2009 whitepaper, the number of innovations brought to life has been staggering. Today, we have cryptocurrencies, NFTs, and...
{% link https://dev.to/alvinslee/how-to-build-a-dao-with-truffle-110p %}
##What I Learned While Building My First Web3 Project
I started building MarrySign, a crypto-marriage app, during the Chainlink Hackathon Fall 2022 because I wanted to give any couple regardless of their gender, location or any other factors, a chance to...
{% link https://dev.to/kkomelin/what-i-learned-while-building-my-first-web3-project-cf8 %}
An Introduction To React’s Context API
Tags: react, context
Published: 2022-12-18 18:48:28

In this post, you will learn how to use React’s Context API which allows you to manage global application states in your React apps without resorting to props drilling.

1. That is basically what a React hook is. It allows us to use state, refs and other React features in our functional components.

THE useState (HOOK)
The useState hook allows us to use state in our functional components. A useState hook takes the initial value of our state as the only argument, and it returns an array of two elements. The first element is our state variable and the second element is a function in which we can use the update the value of the state variable.

Let’s take a look at the following example.
**import React, {useState} from "react";

function SampleComponent(){
   const [count, setCount] = useState(0);
}
**
How to run a GitHub Action in local - LIVE DEMO
Tags: github, opensource, ci, tutorial
Published: 2022-12-18 18:26:08

GitHub Actions are so cool, you can automate your workflow for free and they’re really easy to set up.

However, since the actions run on GitHub, every time you want to change something you need to commit and push to your repository. For example if you’re fixing a failing build for an expected reason, it might take quite a few frustrating cycles of code-commit-push-repeat.

**But: we are programmers, we are lazy, and someone already found a solution for this!**

## Act

Act is a Command Line Interface that lets you run your GitHub Actions locally in your computer, without the need of pushing your commits to GitHub. Actually, you don’t even need commits.

Some key features?

- User friendly, after the setup, all you need to do is running act in your terminal
- Written in GO
- Open Source! Head over the [GitHub repository](https://github.com/nektos/act) if you want to contribute!

## Setup

**Sounds great but, how can I get started? Good question.**

First of all, since act runs with Docker, make sure to have it in your machine. If not, just head over the [Docker website](https://www.docker.com/) and install Docker Desktop for your OS.

Back to act, If you’re using Homebrew for Linux and MacOS, `brew install act` will be enough. If you want to use a different method, the README of the project has a long list of options.

## First act run

Once the installation is done, make sure Docker is running and type `act` in your terminal to give it the first time configuration.

The first operation will be pulling the docker images.

It might seem that it's not doing anything, because it's not showing any output, but it's actually downloading the images. Anyway, running act with the argument `--verbose` will reveal the truth and now… let’s wait.

## Demo

Now that we have everything set up, let me show you some of the main act capabilities in this demo!

The first two minutes of the video are pretty much the article you just read until this point. I suggest you to watch them because you know, I always like to hide some puns and jokes in my videos

In any case, if you're only interested in the live demo, feel free to skip to the minute 2:03. Enjoy!

{% youtube Ugonll0e2Os %}

---

Thanks for reading this article, I hope you found it interesting!

I recently launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/bqwyEa6We6

Do you like my content? You might consider subscribing to my YouTube channel!
You can find it here:
[![YouTube](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA?sub_confirmation=1)

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}
Checkout Last week top 5 posts tagged(#react)
Tags: react, c4r4x35
Published: 2022-12-18 18:13:56

##Applying Design Patterns in React: Strategy Pattern
This article is about a problem many of us encounter in React & Frontend development (sometimes even without realizing that it's a problem): Having a piece of logic implemented throughout different...
{% link https://dev.to/itshugo/applying-design-patterns-in-react-strategy-pattern-enn %}
##Creating a scheduling app with React, Nodejs and EmailJS 🧨
What is this article about?

In this article, you'll learn how to build a scheduling application that allows you to set your availability and share your profile links to enable others to book an...
{% link https://dev.to/novu/creating-a-scheduling-app-i-wish-somebody-showed-me-this-technique-when-i-first-started-coding-2icd %}
##Building a Music Player in React
Introduction

Whoever is learning React and wants to build a project with React. There are a variety of blogs and articles to guide a such projects for developers. I do go through those articles but...
{% link https://dev.to/documatic/building-a-music-player-in-react-2aa4 %}
##Svelte vs React: Which framework to learn in 2023?
In the web development world, sometimes it can feel like a new frontend framework comes out every day! Most come and go, but one thing is for sure: Svelte is here to stay.

That does not necessarily...
{% link https://dev.to/mikehtmlallthethings/svelte-vs-react-which-framework-to-learn-in-2023-50gf %}
##🎄 New year open-source giveaway: $100 Amazon Gift Card + Full Swag Kit
refine is an open-source React-based framework for building CRUD apps rapidly.

As the new year rolls around, we want to take a moment to celebrate our open-source community and thank everyone who has...
{% link https://dev.to/necatiozmen/new-year-open-source-giveaway-100-amazon-gift-card-full-swag-kit-2f3e %}
How to rotate text in 90 degrees with CSS.
Tags: beginners, css
Published: 2022-12-18 18:09:58

To rotate text in 90 degrees with CSS, you can use the transform property with the rotate function.

Here's an example of how you can use it:

```
.rotate {
  transform: rotate(90deg); /* Rotate the text 90 degrees */
}

```
You can then apply this class to any element that contains text that you want to rotate, like this:

```
<div class="rotate">Text to rotate</div>

```

If you want to rotate the text in the other direction, you can use a negative angle value, like this:

```
.rotate {
  transform: rotate(-90deg); /* Rotate the text -90 degrees */
}

```

You can also use the transform-origin property to specify the point around which the transformation should be applied. For example, to rotate the text around its center, you can use the following CSS:

```
.rotate {
  transform: rotate(90deg);
  transform-origin: center; /* Rotate the text around its center */
}

```

Note that the transform property is supported in all modern browsers, but it is not supported in Internet Explorer 8 and earlier versions.
Creating Custom HTTP Responses with Laravel's Responsable Interface
Published: 2022-12-18 18:02:17

> Cover image taken from https://unsplash.com/photos/Bj6ENZDMSDY by https://unsplash.com/@benofthenorth

In Laravel, the `Illuminate\Contracts\Support\Responsable` interface provides a convenient way to return HTTP responses. This interface allows you to define a toResponse method that returns a `Illuminate\Http\Response` object.

Here's an example of how you can use the `Responsable` interface to create a custom response class for a Laravel route:

```php
class ProfileImageUploaded implements Responsable
{
    protected $success;

    public function __construct($success)
    {
        $this->success = $success;
    }

    public function toResponse($request)
    {
        if (!$this->success) {
            return new JsonResponse('Something went wrong!', 400);
        }

        return new JsonResponse('Your profile image has been uploaded.');
    }
}


Route::post('/profile-image', function (Requests\StoreProfileImageRequest $request) {
    $image = new Services\UserProfileImage($request->user());

    $success = $image->upload($request->image);

    return new ProfileImageUploaded($success);
});
```

In this example, we have created a `ProfileImageUploaded` class that implements the `Responsable` interface and has a toResponse method. This method returns a JSON response indicating the status of the profile image upload.

To use the `ProfileImageUploaded` class in a route, we simply return an instance of it from the route closure. Laravel will automatically detect that the returned value is an instance of a class that implements the `Responsable` interface and will call the toResponse method to generate the HTTP response.

The `Responsable` interface is a convenient way to keep your routes focused on handling requests and delegate the responsibility of building HTTP responses to separate classes. It can also make your code easier to test and maintain by allowing you to isolate response-building logic into separate, reusable classes.

I hope this helps you understand how to use the `Illuminate\Contracts\Support\Responsable` interface in your Laravel applications!
Awesome Posts from last week tagged(#security)
Tags: security, c4r4x35
Published: 2022-12-18 18:00:09

##Authorize Users Like a Pro: Libraries That Help You Implement Access Control With Node.JS
Implementing security measures in a web application is a less interesting but absolutely critical task. It's not as exciting as building shiny new features. You often don't get much credit from your...
{% link https://dev.to/zenstack/authorize-users-like-a-pro-libraries-that-help-you-implement-access-control-with-nodejs-5109 %}
##All You Need to Know About FIDO2 & Passwordless Authentication
In this Blog, I'm gonna tell you all about Passwords, current authentication models, and what is wrong with them, along with RSA encryption, trusted computing, and finally FIDO2.

Authentication...
{% link https://dev.to/rishitashaw/all-you-need-to-know-fido2-passwordless-authentication-329a %}
##How to steal a website and how to prevent it
OK, this is going to be a quick showcase of how someone proxy-mirrored my website in a way that is very difficult to detect or prevent it. Moreover, I will share some of the helpful advice that was...
{% link https://dev.to/saashub/how-to-steal-a-website-12p7 %}
##WordPress (plugins) compatibility check to prevent fatal errors
How to prevent predictable conflicts between incompatible plugins, themes, WordPress core and PHP versions? Disclaimer: this post and the plugin and test setup are no guarantee to prevent a so-called...
{% link https://dev.to/ingosteinke/wordpress-plugins-compatibility-check-to-prevent-fatal-errors-mpm %}
##Automatic SSO in Kubernetes workloads using a sidecar container
⚠ This post assumes you have a pretty good knowledge of Kubernetes, Helm, and creating your helm charts by yourself. ⚠

For security reasons, it is quite common the need to protect our workloads in...
{% link https://dev.to/gabrielbiasi/automatic-sso-in-kubernetes-workloads-using-a-sidecar-container-3752 %}
AZ-400: Document a project
Published: 2022-12-18 17:56:32

[Create a wiki for your project](https://learn.microsoft.com/en-us/azure/devops/project/wiki/wiki-create-repo?view=azure-devops&tabs=browser)

- Wiki can be used to share information related to a project and facilitate contribution
- Each wiki is powered by a GitHub repository where markdown files are stored
- Prerequisites:
     - Must have a team project
     - Must have at least Basic access to create and modify a wiki
     - Must have permission to Create Repository to publish code as wiki
     - Contributors security group can add/edit pages, anyone with access to the team project can view

[Choose a process flow or process template to work in Azure Boards](https://learn.microsoft.com/en-us/azure/devops/boards/work-items/guidance/choose-process?view=azure-devops&tabs=agile-process#choose-a-basic-agile-scrum-and-cmmi-process)

Example of an Agile process diagram from Microsoft documentation:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g01deowx0fole9iuf08u.png)
Capturing Quoted Strings in Sed
Published: 2023-01-06 02:55:40

---
title: Capturing Quoted Strings in Sed
published: true
date: 2022-12-18 17:55:32 UTC
tags: 
canonical_url: https://brandonrozek.com/blog/capturing-quoted-string-sed/
---

_Disclaimer: This posts assumes some knowledge about regular expressions._

Recently I was trying to capture an HTML attribute in `sed`. For example, let’s say I want to extract the `href` attribute in the following example:

```
<a href="https://brandonrozek.com" rel="me"></a>

```

Advice you commonly see on the Internet is to use a capture group for anything between the quotes of the href.

In regular expression land, we can represent anything as `.*` and define a capture group of some regular expression `X` as `\(X\)`.

```
sed "s/.*href=\"\(.*\)\".*/\1/g"

```

What does this look like for our input?

```
echo \<a href=\"https://brandonrozek.com\" rel=\"me\"\>\</a\> |\
sed "s/.*href=\"\(.*\)\".*/\1/g"


https://brandonrozek.com" rel="me

```

It matches all the way until the second `"`! What we want, is to not match _any_ character within the quotations, but match any character that is not the quotation itself `[^\"]*`

```
sed "s/.*href=\"\([^\"]*\)\".*/\1/g"

```

This then works for our example:

```
echo \<a href=\"https://brandonrozek.com\" rel=\"me\"\>\</a\> |\
sed "s/.*href=\"\([^\"]*\)\".*/\1/g"


https://brandonrozek.com

```

Within a bash script, we can make this a little more readable by using multiple variables.

```
QUOTED_STR="\"\([^\"]*\)\""
BEFORE_TEXT=".*href=$QUOTED_STR.*"
AFTER_TEXT="\1"
REPLACE_EXPR="s/$BEFORE_TEXT/$AFTER_TEXT/g"

INPUT="\<a href=\"https://brandonrozek.com\" rel=\"me\"\>\</a\>"

echo "$INPUT" | sed "$REPLACE_EXPR"

```
Checkout Last week top 5 posts tagged(#python)
Tags: python, c4r4x35
Published: 2022-12-18 17:52:57

##How to create the smartest multilingual Virtual Assistant using AWS and ChatGPT
Last week ChatGPT was released and everyone has been trying amazing things. I also started playing with it and wanted to try how it would integrate using the AI services from AWS and the results are...
{% link https://dev.to/aws-builders/how-to-create-the-smartest-multilingual-virtual-assistant-using-aws-and-chatgpt-4i5k %}
##Free Python Converter Tool - DataFrames, OpenAPI, CSV to Models, DataTables
Hello Coders!

The video mentioned in this article explains how to use a free conversion tool written in Python to manipulate and convert information into different formats. The tool is a simple UI...
{% link https://dev.to/sm0ke/free-python-converter-tool-dataframes-openapi-csv-to-models-datatables-26jn %}
##🐍FastAPI vs Flask 🌶️v⚡
🐍FastAPI vs Flask 🌶️v⚡

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints. It is built on top of Starlette for the web...
{% link https://dev.to/chainguns/fastapi-vs-flask-v-1cjb %}
##Automatically Transcribe YouTube Videos with OpenAI Whisper
OpenAI is on everyone's lips, but this is not about their recent Chatbot but about a language model for transcribing audio they released back in September. This post will show how to apply it on...
{% link https://dev.to/zirkelc/automatically-transcribe-youtube-videos-with-openai-whisper-1856 %}
##Student Management System | Django |
Student Management System is a system for Students where Students can check their details. In this system, a Admin Panel is included where admin can add students, add faculty and create notices.
...
{% link https://dev.to/madhubankhatri/student-management-system-django--316m %}
AZ-400: Custom dashboards in Azure DevOps
Published: 2022-12-18 17:38:27

[About dashboards, charts, reports, & widgets](https://learn.microsoft.com/en-us/azure/devops/report/dashboards/overview?view=azure-devops)

- Benefits of using dashboards:
     - Customizable and highly configurable
     - Share information
     - Monitor progress and trends
     - Improve workflow processes
- Charts and widgets
     - Configure to show a variety of work flow information
     - View work items by type, status, assignment, etc
     - Show testing progress, results, and trends
Easily Format and Highlight Your Code in Google Docs
Tags: productivity
Published: 2022-12-18 17:29:58

Google Docs is a popular word processing tool that allows you to create and edit documents online. Code formatting in Google Docs hasn’t always been an easy task to achieve. If you wanted to put a code block directly into your Google Docs document, you would have ended up with unformatted code with no syntax highlighting. This isn’t always easy on the eyes and is not conducive to quickly scanning your code to get a sense of its purpose. There are other ways to achieve this in a more aesthetically pleasing way, but that meant having to use add-ons as a work-around. But fret no more, Google has got you covered! One of the new notable features that Google just [announced](https://workspaceupdates.googleblog.com/2022/12/format-display-code-google-docs.html) is Code Formatting, which makes your code easier to read and understand. 

## How to use it
![Gif illustrating how to use code formatting. Source: Google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmb0c3x55kw7mdu4yqd2.gif)
To access this code-formatting feature in your current Google Docs document, select Insert > Building blocks > Code Blocks. Afterwards, select the programming language of your choice. It’s also possible to access this feature by typing `@project assets` in the document and selecting Code blocks.  

## Availability
According to Google’s post, the code formatting feature in Google Docs will be available to all Google Workspace customers starting on January 3, 2023. Google has not stated yet that they have plans to roll it out to those with personal Google Accounts in the future. Hopefully this will change in the near future. 

## Wrap-up
Google Docs is constantly getting improved with new features and this time it’s a boon for us developers out there! Code formatting in Google Docs is a useful tool that can help you create documents that are easier to read and understand. Whether you are working on a document that includes a lot of code or just want to insert a few lines of code into your document, Google Docs has you covered. 👨‍💻

<hr />
If the content was helpful, feel free to support me [here](https://www.buymeacoffee.com/duncanlew):
<a href="https://www.buymeacoffee.com/duncanlew" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
JavaScript Fundamentals: Math Object
Tags: javascript, tutorial, 100daysofcode, webdev
Published: 2022-12-18 17:24:53

Today is the 4th day of my **#100DaysOfCode** journey with JavaScript.

I write about my learnings in an explained way through my [blogs](https://astrodevil.hashnode.dev/) and socials. If you want to join me on the learning journey, make sure to follow my blogs and social and share yours too. **Let's learn together!🫱🏼‍🫲🏼**

This Article is a part of the [JavaScript Fundamentals](https://astrodevil.hashnode.dev/series/js-fundamentals) series\*\*.\*\*

Today, I learned about `Math.random`, `Math.floor` Functions and to call a function within our function.

### Math.random

In JavaScript, there are many math utilities on the `Math` object. To get a random number we can call the `Math.random` function.

```javascript
const myRandomNumber = Math.random();
```

The above line will return some number between `0` and `1` (not including `1`). `Math.random` can also be used to generate random numbers between the range.

**Example:** Inside `getRandom`, get a random number from the `Math.random()` function. Then, return that number!👇🏼

```javascript
function getRandom() {
    return Math.random();
}
```

A random number between `0` and `100` could be created by simply multiplying the output:

```javascript
// randomNumber will be between 0 and 100
const randomNumber = Math.random() * 100;
```

We could multiply and then add to get a random number between `15` and `100`:

```javascript
// randomNumber will be between 15 and 100
const randomNumber = (Math.random() * 85) + 15;
```

### Math.floor

`Math.floor` takes arguments.

```javascript
const two = Math.floor(2.2598223);
```

`Math.floor` function will take `2.2598223` and return `2`. A number will be rounded to the nearest integer using this function. For instance, if the input was `2.9999`, the method would round it to `2`.

**Example:** Take the argument `x` and use `Math.floor` to turn it into an integer without the values after the decimal place. Once you have this floored value, return it!

```javascript
function getFloor(x) {
    return Math.floor(x);
}
```

### Conclusion

Ending with an extra bit of information about JavaScript functions...

The JavaScript Math object allows us to perform mathematical tasks on numbers. There are various math object properties.

**Today I learned about Math.random, Math.floor Functions in JavaScript.**

#### If You ❤️ My Content! Connect Me on [Twitter](https://mobile.twitter.com/Astrodevil_) or Supports Me By [Buying Me A Coffee☕](https://www.buymeacoffee.com/Astrodevil)