teleren/devto huggingface dataset:
Data Structures and Algorithms 102: Deep Dive into Data Structures and Algorithms
Tags: dsea, luxtech, datastructures, beginners
Published: 2022-06-28 16:52:05

Strengths and weaknesses of a data structure can be identified using a mathematical concept known as Big O Notation as discussed earlier on [https://dev.to/atukwatsetracy/introduction-to-data-structures-algorithms-10gn]().It is a tool used to analyze the cost of an Algorithm.An algorithm may not have the same performance for different types of inputs because its performance changes With the increase in the input size.The study of change in performance of the algorithm with the change in the order of the input size is defined as _Asymptotic Analysis_.
The 3 mainly asymptotic notations are;

- Big-O notation:This represents the upper bound of the running time of an algorithm. Thus, it gives the worst-case complexity of an algorithm.
- Omega notation:Omega notation represents the lower bound of the running time of an algorithm. Thus, it provides the best case complexity of an algorithm.
- Theta notation:It represents the upper and the lower bound of the running time of an algorithm, it is used for analyzing the average-case complexity of an algorithm.
Understanding interpolation in JSX
Published: 2022-06-28 16:48:49

Day 9 of #100daysofcode

Today we'll learn about interpolation in JSX. Our initial code will be :
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40qplpp34u7see2agsoj.png)
 
We have our div in `rootElement`, followed by a function component that receives text as props and returns null. Following that, you can see that we have an element variable that takes `react.fragment (<></>)`. Inside that, we're utilizing our function component, which takes our text and counts the characters in it, displaying the output as something like :
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcuizts5en6pojyulbbw.png)
 
The element is then rendered. We must now write code in our function component. That will be :
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiy9dfeqo2pibh1xrnkt.png)
 
You can see in the `function CharacterCount` that we have a JSX syntax `<div>` that takes JavaScript syntax with the help of in that we used backtext `` which allows us to use our prop text after that we are using a ternary operator which checks whether the input text has length or not. If it does, we will display the length of the content in a strong tag; otherwise, we will display "NO". Finally, we have the string. When we execute our code, we should get something like this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn0jzw4o3xg4nyan7rbb.png)

This is a simple code, but when you understand it, you will notice the interpolation. Let us examine it.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yetksxu9q3doimo838y.png)
 
First, we have our HTML code, which continues until `script tag`, after which our JavaScript code begins until `div`, with `div tag` JSX code begins, but right after that our JavaScript code begins with, which continues until `strong tag`, with `strong tag` JSX code begins, inside that `strong tag` you can see JavaScript code, and JSX code ends with closing `strong tag`. then JavaScript code begins until the closing `div tag`, then JavaScript code resumes until our `react.fragment` , which begins our JSX code. With`</>`, the JSX code finishes and the JavaScript code begins. Then there's our HTML code.

As you can see, the code is basic, but the interpolation is rather complex. We can use JSX code more successfully if we understand interpolation.

That's all for now.
If you found this useful, please follow me on Twitter [@Hxrshxd](https://twitter.com/Hxrshxd) for updates.
⚔️ The most effective method to shield yourself from phishing
Tags: tutorial
Published: 2022-06-28 16:31:31

[The Netcraft Extension](https://chrome.google.com/webstore/detail/netcraft-extension/bmejphbfclcpmpohkggcjeibfilpamia) is a tool allowing easy lookup of information relating to the sites you visit and provides protection from phishing and malicious JavaScript, including Coronavirus-related cybercrime.

Key Features:
• Protection against phishing sites
• Protection against malicious JavaScript
• Credential leak detection
• Detailed site reports
• Risk Ratings
• Conveniently report suspected phishing & fraudulent sites
• Perfect Forward Secrecy (PFS) indicator
• Heartbleed indicator
• Protection against cross-site scripting (XSS)

Source: [Androidwedakaryo](https://forum.androidwedakarayo.com/t/the-most-effective-method-to-shield-yourself-from-phishing/925?u=wenura)
How to make Chrome always run in incognito mode
Tags: tutorial
Published: 2022-06-28 16:30:03

Ctrl+Shift+N every time, you can always run Chrome in “Incognito” mode by default.

Right-click on the Chrome shortcut, then left-click on “Properties”.

2. Find the “Shortcut” tab, there will be a special field containing the following line:

```
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
```

3. Add “-incognito” at the end of the line to make it look like this:

```
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” -incognito
```

4. Click on “Save”.

Now, every time you start the browser, you automatically enter the "Incognito" mode.

Source: [AndroidWedakarayo](https://forum.androidwedakarayo.com/t/how-to-make-chrome-always-run-in-incognito-mode/907?u=wenura)
Git Logo | Pure CSS
Tags: codepen, css, beginners, showdev
Published: 2022-06-28 16:27:00

In today’s tutorial, I finished creating a Git logo with CSS. Simple css code. Though this is just a fun tutorial, you can practice CSS art to improve your CSS skills. CSS art has been a fun way for me to learn new properties and improve my CSS skills. I have a bunch of CSS art tutorials that are CSS inspired. You can check them out [here](https://codepen.io/rembertdesigns).

For this tutorial, all we need is some basic HTML and CSS.

{% codepen https://codepen.io/rembertdesigns/pen/ZExEKvB %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

https://www.buymeacoffee.com/rembertdesigns

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
My favorite Slack apps for remote work
Tags: slack, wfh, productivity, team
Published: 2022-06-28 16:19:22

When your team is fully or partially remote, Slack becomes the central hub for collaboration.

Here are my five favorite apps that help our team stay productive, connected and motivated.

### 🏷 [Rewind](https://rewindapp.io) — Organize to-dos with tags

Communicating remotely inevitably means you get a lot of Slack messages for your various projects.

While Slack has bookmarks and reminders built in, it can still get messy when you have a lot going on.

Rewind lets you store messages for reading later and organize them with tags like “to-do”, “research”, “project-x” etc.

### 🧁 [Macarons](https://macarons-roulette.app/) — Chat roulettes & random coffees

When you don’t meet your teammates in the hallway or at the coffee machine, you miss out on small-talk and social interaction.

Chat roulettes are a great way to stay connected. Add Macarons app to a team channel and it will automatically match random pairs (or groups) of co-workers to have a short video chat (preferably over off-work topics).

### 🥷 [Incognito](https://www.incognitoforslack.com/) — Anonymous feedback

No matter how flat your hierarchies are or how open your company-culture is, sometimes you just can’t give feedback openly.

Incognito lets you post feedback anonymously within Slack. This is great for suggestion box channels, management feedback, or even for product design reviews.

### 🚢 [Loqbooq](https://loqbooq.app) — Record decisions asynchronously

Making decisions is one thing. Making sure everybody involved takes notice and is on the same page is a much harder problem.

Loqbooq is a web app with full Slack integration that lets you agree on decisions as a team and build up a single source of truth. And because it works asynchronously, those who missed the meeting can be involved as well. Maybe you don’t even need a meeting?

### 🌳 [Evergreen](https://www.evergreen.so/) — Celebrate achievements by planting trees

In the office (and before Covid) you would simply high-five your teammates when they have accomplished something. Appreciating your team’s great work is much harder remotely.

With evergreen your team can reward their co-workers by having trees planted for them. This lets your achievements have impact beyond your own company and is a much healthier perk than handing out snacks.
Você sabe o que é "softdelete"? Parte 3
Tags: beginners, laravel, php
Published: 2022-06-28 16:18:34

Na [primeira parte](https://dev.to/marciopolicarpo/voce-sabe-o-que-e-softdelete-parte-1-290p) deste artigo, criamos o projeto, os métodos para listar registros e as respectivas rotas.

Na [segunda parte](https://dev.to/marciopolicarpo/voce-sabe-o-que-e-softdelete-parte-2-6p5), adicionamos os métodos para deletar, restaurar e consultar modelos deletados.

Nesta terceira e última parte veremos como remover de forma definitiva um registro do banco de dados.

---
## Removendo registros permanentemente

Seguindo a mesma abordagem feita nas duas primeiras partes, vamos criar um método na controller...

```php
public function forceDeleteInvoiceById($id)
{
	$invoice = Invoice::withTrashed()->find($id);

	if ($invoice) {
		$invoice->forceDelete();
		return response()->json(['message' => 'Invoice '.$id.' permanently deleted']);
	} else {
		return response(['message' => 'Invoice not found'], 404);
	}
}

```

...e em seguida a respectiva rota.

```php
Route::delete('/{id}/forcedelete', 'forceDeleteInvoiceById');

```

Repare que instruímos o querybuilder a incluir registros deletados na consulta através o método `withTrashed()`. 

E acessando a rota passando um registro para deleção definitiva temos o seguinte resultado:


![Request to force delete invoice by id](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cqdf8d8r4gh5wuedt6m.jpg)


De acordo com a documentação oficial é possível agendar a exclusão definitiva de registros marcados como deletados fazendo uso de agendamento configurado na classe `App\Console\Kernel.php`.

Entretanto não abordaremos esta técnica neste artigo.

---

## Conclusão
Se você chegou até aqui meu muito obrigado.
Espero que o projeto possa ajudá-lo de alguma forma, seja com conhecimento ou ideias para solucionar problemas do dia a dia.

---

## Extensões utilizadas

Em desenvolvimento web, uma boa ferramenta para testar requisições api faz toda diferença.
Por isso deixo aqui o link para a extensão para VSCode **Thunder RESTClient**. 
Na minha opinião não deixa nada a desejar para outras ferramentas pagas.
https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

---

Já para aplicações Laravel, a extensão **Laravel Extra Intellisense** ajuda muito na inclusão automática de referências.
https://marketplace.visualstudio.com/items?itemName=amiralizadeh9480.laravel-extra-intellisense

---

## Repositório público

O projeto está publicado no github e pode ser acessado através deste endereço
https://github.com/MarcioPolicarpo/laravel9-soft-delete
How to Change VS Code Terminal Color
Tags: vscode, beginners, tutorial
Published: 2022-06-28 16:10:07

Learn how to change the color of your VS Code terminal. The terminal text, background and cursor color and more can be customized.

To change the color of the terminal:

1. Go to the settings. 
2. Search for "workbench color". 
3. Click edit in settings.json. 
4. Within settings.json make changes to the section called "workbench.colorCustomizations" . 
5. For example "terminal.foreground": "#ff0000" will make the terminal text red

For the video version: 
{% embed https://youtu.be/rYb_WpOc0UY %}
Invoke an HTTP request without a premium license
Tags: powerautomate, office365group, graphapi
Published: 2022-06-28 16:07:05

I need to automatically create an event in an O365 Group's calendar and invite attendees, using Power Automate workflow. 

## Invoke an HTTP request
Until recently, I've been using [Invoke an HTTP request](https://docs.microsoft.com/en-gb/connectors/webcontents/#invoke-an-http-request) to call Graph API to [create events](https://docs.microsoft.com/en-us/graph/api/group-post-events?view=graph-rest-1.0&tabs=http) and [get replies](https://docs.microsoft.com/en-us/graph/api/group-get-event?view=graph-rest-1.0&tabs=http). 
![Invoke an HTTP request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfzlwviypbjqvrculklc.png)
 
The only _problemino_ is that **HTTP with Azure AD** is a **premium connector** and the licensing approach must be considered very [carefully](https://docs.microsoft.com/en-us/power-platform/admin/power-automate-licensing/faqs#who-needs-to-purchase-a-premium-license). 

## Send an HTTP request (Preview)
[Send an HTTP request](https://docs.microsoft.com/en-gb/connectors/office365groups/#send-an-http-request-(preview)) is a **standard** connector (yaay!) that allows calling Graph API. 
> It only supports one of the supported endpoints: **me, users, groups, sites, search, planner, teams, chats**, which is absolutely fine in my case.

I can now create a new event in O365 Group's calendar:
![Send an HTTP request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/typl3grd3wpm44npxub7.png)
And after some time, let's say every night, run a scheduled workflow that reads the replies:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/li8lnxzdmudvg612fc0r.png)
Making changes to the most recent GIT commit (Learning about GIT amend)
Tags: git, codereview, productivity, github
Published: 2022-06-28 15:59:14

![Image GIT amend title cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xx4gb2msmtcioby5w0cq.jpeg)

---

Git provides you a number of ways to go back to the already commited code and edit something which is basically manipulating Git history. Sounds like a tough job but it enables you to do these things in situations that require such actions.

One of the most easiest one that I found is the Git amend option. Which basically allows you to do more changes to the last commit. Now, it will be all that nice and handy tool to use if we intend to use it as described.

```
git commit --amend -m 'edited message'
```
It will commit the changes and give a new message to the last commit. However, if the message does not need to be changed then-

```
git commit --amend --no-edit
```
Adding the no-edit option will skip that step of updating the message.

💡Git amend comes in handy when:

- You forgot to add something or need to remove something from that commit
- When you have some progress to save but it is not ready for commit and you do not want to get into stashing. It allows you to easily switch branches and work on something else, and you don't need to keep worrying about forgetting the stash that you did recently.

However, that is not all. Git amend can do changes to the last commit regardless of it being a local one or remote. And it not only do changes to the last commit but also changes the commit hash which is almost like getting rid of the last commit and making a new one.

🚩Which means it could be a trouble if this is performed on a remote commit and a common working branch. In which case, the other developers now have their work based on a commit which does not exist on remote. Ideally it should be avoided but if it is necessary, it should be communicated to other developers first.

https://www.instagram.com/p/CFPuPaLgb-v/?igshid=YmMyMTA2M2Y=

👉 Read more about amend at [git-scm.com](https://git-scm.com/)

Thank you. 👋
Announcing Modern CSS Challenges
Tags: css, news, webdev, showdev
Published: 2022-06-28 15:39:48

Over the past few years, I've heard feedback that folks wish there was a learning journey available for using the [Modern CSS](https://moderncss.dev) tutorials to build up their CSS skills.

Today I'm very excited to share the pre-launch of **[Modern CSS Challenges](https://challenges.moderncss.dev)** - an educational companion to the tutorials available on ModernCSS.dev! This free series of challenges will push you to use your existing CSS knowledge while also expanding your awareness and ability to use modern CSS features.

I've created this resource as guided practice for building very real-world components. You'll work on responsive design, using custom properties, building scalable layouts, and more. All the while ensuring that you're including features critical for accessibility.

{% embed https://vimeo.com/719472270 %}

⭐️ As you progress through the challenges, bonus challenges will be unlocked to learn advanced skills and practice cutting-edge CSS.

While free challenges include access to the basic solution, I'm also creating a thorough video series that you'll be able to purchase either per challenge or as package deals. Videos will include full transcripts with code snippets so you can opt to read the content, too.

**[​Sign-up for launch notifications](https://challenges.moderncss.dev)**

I'm working through fine-tuning the challenge content and videos, and hope to launch in the next couple months!

_I'll also be sharing a discount code for the videos and offering early access via [my newsletter](https://moderncss.dev/newsletter)._

---

> PS - are you looking for hands-on learning to update your CSS skills? Join my comprehensive virtual CSS workshop starting July 11! **[Register and learn more about the workshop](https://5t3ph.dev/workshop)**.
Multicast
Tags: opensource, microservices, tutorial, luos
Published: 2022-06-28 15:37:43

Need to transmit a message to multiple targets at the same time?
⏩ https://www.luos.io/docs/luos-technology/message/

With Luos broadcast and multicast transmission methods, you do not need to overcharge your network with messages. 

In Multicast you just need to subscribe your service to a specific topic, wave your magic wand, and your service will start receiving the messages you are interested in. Simple enough?
Announcing GraphQL Security for all Developers
Tags: graphql, security
Published: 2022-06-28 15:32:47

When building production-ready applications, we developers rarely invest time on implementing proper security practices.

What do you do first?

- logging?
- analytics?
- CI/CD?
- e2e testing?

Security should be up there on the list!

Think about it: would you rather have your database hacked or you application down for a couple of hours because of an error you haven't handled yet?

That happened to Tristan - the cofounder of Escape.tech. One of his database got leaked in the darknet 😱

And like many others who were once convinced that security was actually a priority, he couldn't find a solution that met the standards of modern devtools.

That was the beginning of **Escape's GraphQL Security Monitoring Platform**: reinventing the security tools for all developers - knowledgeable about security or not!

Think about CI integration, Slack/Discord notifications, modern, readable and actionable dashboard, you name it.

This is just the beginning but we are thrilled to finally roll out general availability 📣

Head over to [app.escape.tech/register](https://app.escape.tech/register) to start a 14-day free trial.
How to execute your first .robot file.
Tags: webdev, automati, robot, robotframewor
Published: 2022-06-28 15:23:22

Robot Framework is a generic open source automation framework. It can be used for test automation and robotic process automation (RPA). It can be integrated with virtually any other tool to create powerful and flexible automation solutions.

Robot Framework has an easy syntax, utilizing human-readable keywords. Its capabilities can be extended by libraries implemented with Python, Java or many other programming languages. 

**pre-requisites - you need to have python installed.**


step-1: install robotframework 

```
pip install robotframework

after executing this command verify the robotframework installation

robot --version
or 
pip list 

```


step-2 : install SeleniumLibrary

```
pip install robotframework-seleniumlibrary
```


Step-3 : you still need to install browser drivers separately.

```
Goto the following link  
https://www.selenium.dev/selenium/docs/api/py/index.html#drivers
and download necessary drivers unzip and place it PATH,
or you can place inside python folder
Ex: C:\Program Files\Python-38\Scripts
```


Step-4: Open your favorite IDE or simply nodepad & copy the below code & save as tc1.robot

```
*** Settings ***
Library           SeleniumLibrary

*** Test Cases ***
My first robot file 
    Log To Console     Hello Robot World..!
    Open Browser https://www.google.co.in/ chrome
```
 

Step-5: Open the terminal & execute the file 🚀

```
python -m robot tc1.robot
```


congratulation..!! you have executed your first robot file 🙌
TypeScript + React
Tags: typescript, react, webdev, beginners
Published: 2022-06-28 15:18:19

## Why TypeScript + React

You all think why we need TypeScript when we are just happy creating React App using JavaScript. Now, I was at that stage as well but having used TypeScript for a while I can safely say that it has improved the overall development experience for me.

• With static type checking, you get to learn potential bugs as you're typing the code, than heading to the browser and figure out at run time.

• It also provides a way to describe the shape of an object hence providing better documentation and autocomplete.

• TypeScript even make maintenance and refactoring large code bases much easier.

As you can see there are some pretty good points to help you make the decision of adopting TypeScript.

## Getting Started

######Install create-react-app
 
create-react-app provides us a TypeScript template we can use:


![create-react-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4723sneafctxoydlnih.png)

_Note: npx stands for Node Package Execute and it comes with the npm to excecute CLI command._

Now run the command  npm start on your terminal. The command will open the browser on localhost:3000 with your basic react typescript application up and running.

In src folder, we see index.tsx and an app.tsx file.
![index.tsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4km82i77tbk7bieic36.png)
_index.tsx is the entry point to our react app where we mount our app component onto the root DOM node_

![app.tsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a99au12fhpr80nbprfmh.png)
_app.tsx contains our app component which is the root component_

##Function Component
To demonstrate a functional component with props we will create Greet Component. It will receive a prop "name" that will welcome the user. 
![function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6ql4cd37anlf7ea35rs.png)

While adding props in TypeScript you need to tell typescript what is the type of props you're passed in.
So, way to inform the type of props to typescript is by using "type" keyword. 

![props](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96xk8hj4d1k98g4k27hk.png)
Now a component props is an object so within Greetprops object the key will be name and data type is string.
To inform typescript about this, after props within parenthesis we specify colon and then type name(Greetprops).

##Class Component
In class component, we will create Description component and in it we will create a counter. One of the key differences between a class and functional component is that a class component can maintain its own state. 
![description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv7f11jss9cx1axi5vgq.png)
In here, we declare a interface for both the CProps and CState. There will be an optional prop call countby which will determine the increment value.

And now Inside our App.tsx we import Description.tsx
![count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5xqyk5it4xnu65kgn90.png)

That's all, I hope you found this article helpful.🙂