teleren/devto huggingface dataset:
What is the safe way of preventing unauthenticated access to components?
Tags: help
Published: 2021-07-06 11:53:02

Hello,

I'm super new to React and so far have been gliding smoothly, but I hit a roadblock.

I am trying to figure out what is the safe way of providing access to routes/components to authenticated users. 

I found a ton of articles, book examples and SO posts. Each resource taught me how to send an authentication request with Axios to the back end server, then how to store the JWT Token which comes with a successful reply in the localStorage. It then taught me how to setState of the user to authenticated, such that each component can check for the presence of that state before rendering any elements. 

I can successfully log a user in, store the JWT and allow the user access to protected components.

What each of the learning resources came with was at least one comment stating something similar to the following:

"This is not the correct way since anyone with react dev tools can inspect your component tree and modify state. You might want to keep the actual guard against unauthorized access out of react/redux state".

What the comments never mentioned is what steps to take in order to make this happen. I have been trying to find answers and learning resources, but I keep finding more articles that show setups similar to mine. 

My question is:

Could someone please point me in the right direction in terms of learning materials which explain the step by step process of securely handling authentication in React components? 

* Is setting JWT tokens in localStorage and/or Cookies the correct approach? 

* Do I simply set a user state to authenticated and then each component should first check if user is authenticated or is this insecure as the comments suggest?

Thank you kindly.
5 useful websites for web developers
Tags: webdev, programming, codenewbie, beginners
Published: 2021-07-06 11:50:48

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

### 1. heroku 

Heroku is a platform that enables developers to build, run, and operate applications entirely in the cloud.

Link - https://www.heroku.com/

### 2. Namecheap 

Register domain names at Namecheap. Buy cheap domain names and enjoy 24/​7 support.

Link - https://www.namecheap.com/

### 3. Web dev

Get the web's modern capabilities on your own sites and apps with useful guidance and analysis from web.dev.

Link - web.dev

### 4. css 

Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.

Link - https://css-tricks.com/

### 5. CodePen 

Build, share, and learn JavaScript, CSS, and HTML with our online code editor.

Link - https://codepen.io/

### TL;DR

1. Heroku
2. Namecheap
3. Web dev
4. CSS Tricks
5. Code Pen


### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
Emoji Favicons Are a Thing Now 🤯🚀
Tags: webdev
Published: 2021-07-06 11:49:43

Emojis are everywhere nowadays. I created [perpetual.pizza](https://perpetual.pizza) many years ago now and tend to update it every so often. I never liked the old pizza favicon and decided to try replacing it with an emoji. 

SVG favicons are now widely supported and I have been experimenting with the possibilities recently (light/dark mode favicons are awesome). I ended up finding an elegant solution for creating an emoji favicon. 

It turns out that you can use emojis inside of SVG text and 
use relative units to position and size the emoji correctly. This method also displays the emoji in the format the user is familiar with on their operating system.

Here's the markup for my icon:

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y="0.9em" font-size="90">🍕</text>
</svg>
```

I added it into the document head like a regular SVG icon:

```html
<link rel="icon" href="/assets/icon.svg" />
```

Here's the outcome: 

![Pizza emoji favicon in tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f037eplydhuafzbotnlp.png)
How to execute multiple GraphQL mutations in a transaction using Overblog GraphQL Bundle
Tags: engineeringmonday, php, graphql, symfony
Published: 2021-07-06 11:43:26

When we started working with GraphQL, we experienced common issues like N+1 problem, error handling, etc. As our API started growing, new challenges occurred. They were mostly related to the schema design and how to have a schema that is easy to read and also functional.

By specification, GraphQL allows us to send multiple mutations in a single request and these mutations will be executed in the order in which they were sent. GraphQL specification doesn't guarantee us that if some of these mutations fail, all others will fail as well. In other words, GraphQL doesn't specify that all mutations should be executed in the transactions. Luckily, this can be easily enabled in the [Overblog GraphQL Bundle] (https://github.com/overblog/GraphQLBundle) using built-in events.

First, in `services.yaml`, you need to register the event listener for two events: `graphql.pre_executor` and `graphql.post_executor`.
```yaml
services:
    ...

    App\EventListener\GraphQLExecutorListener:
        tags:
            - { name: kernel.event_listener, event: graphql.pre_executor, method: onPreExecutor }
            - { name: kernel.event_listener, event: graphql.post_executor, method: onPostExecutor }
```
Then, in the event listener, you have a method for each event. In onPreExecutor we start the transaction. After mutations are resolved, in onPostExecutor we commit the changes if there are no errors or rollback if an error occurred.

```php
class GraphQLExecutorListener
{
    private EntityManagerInterface $entityManager;

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

    public function onPreExecutor(): void
    {
        $this->entityManager->getConnection()->beginTransaction();
    }

    public function onPostExecutor(ExecutorResultEvent $event): void
    {
        $connection = $this->entityManager->getConnection();

        if ($connection->isTransactionActive() === false) {
            throw new LogicException('Transaction not active');
        }

        if (count($event->getResult()->errors) > 0) {
            while ($connection->getTransactionNestingLevel() > 0) {
                $connection->rollback();
            }

            return;
        }

        $connection->commit();
    }
}
```

That's it, all mutations should now be executed in the transaction.
If necessary, the event listener can be extended to conditionally enable the transaction, for example using a header or some other flag.
Test blog post
Tags: test
Published: 2021-07-06 11:42:04

---
title: Test blog post
published: true
description: This is a test blog post
tags: #test
//cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zy5hue54hkl6n5nq1ms.jpeg
---

# Why I'm doing this
I want to make sure this looks good.

## Sure?
Yeah, thats all.
Five frontend books you should read in 2021
Tags: frontend, books
Published: 2021-07-06 11:21:04

---
title:Five frontend books you should read in 2021 
published: true
description: 
tags: #frontend #books
//cover_image: https://direct_url_to_image.jpg
---
Powering up your backend knowledge? Our friends at  [Packt](https://www.packtpub.com/)  have shared five backend books you should read in 2021.

[Node Cookbook, Fourth Edition](https://packt.live/39WoZzx)

Discover solutions, techniques, and best practices for server-side web development with Node.js 14

What reviews say:

_“Want to learn Node.js, brush up on your skills, or discover the latest features of Node 14 and beyond? This book is for you! Written by a senior developer and Red Hatter, With a thorough presentation of everything Node, Bethany Griggs delivers from cover to cover in this latest Node Cookbook edition._“

[Node.js Web Development, Fifth Edition](https://packt.live/2YSg3Vs)

Server-side web development made easy with Node 14 using practical examples

What reviews say:

_“This book is great. I had some knowledge about full-stack JavaScript, but this book has already taught me a lot. I wouldn’t say that this book is for a complete beginner to software development (coding), but it’s definitely good if you need to deepen your understanding of JavaScript, or if you’re interested in getting started with JavaScript from another backend language like Python, C#, Ruby, etc.”_

[ASP.NET Core 5 and React](https://packt.live/2Z29Ztr)

Full-stack web development using .NET 5, React 17, and TypeScript 4

What reviews say:

_“The book had a very methodical approach to building single-page applications through React. I am familiar with React and .NET separately and partly why I could pick up the concepts in the book faster but I believe otherwise too, things are laid out very clearly. Recommend it for beginners.”_

[Full-Stack React, TypeScript, and Node](https://packt.live/3rsqNWI)

Build cloud-ready web applications using React 17 with Hooks and GraphQL

What reviews say:

_“Nook has a philosophy of “learning by doing” “_

[Building Vue.js Applications with GraphQL](https://packt.live/3a14Wje)

Develop a complete full-stack chat app from scratch using Vue.js, Quasar Framework, and AWS Amplify

What reviews say:

_“This book is a fantastic deep dive into building an end-to-end application on AWS. I really like the fact that he dove deep into many topic areas, showing how to tie everything together to build something that is a real-world use case. The information in this book can also be used in many other areas so the knowledge is very transferable to other scenarios and use cases.”_

What titles do you recommend? Share your thoughts in the comments. Looking for more inspiration? Here are [more] (https://dev.to/developernation/eight-must-read-books-for-developers-in-2021-3fkk) book recommendations.

p.s. Take our [survey](https://www.developereconomics.net?utm_medium=devto&utm_source=dev_to&utm_campaign=frontend_books) for a chance to win a Samsung Galaxy S21 Plus, Amazon vouchers, and more!
Solving Multisoft's Monthly Code Challenge
Tags: challenge, algorithms
Published: 2021-07-25 09:49:05

---
title: Solving Multisoft's Monthly Code Challenge
published: true
date: 2021-07-06 11:18:19 UTC
tags: challenge,algorithm
canonical_url: https://devdojo.com/thinkverse/solving-multisofts-monthly-code-challenge
---
Swedish software company [Multisoft](https://www.multisoft.se) does a code challenge each month, where it provides a fun little challenge for developers to solve. They do this in hopes of finding new candidates for potential employment.

In this post, we will go over and solve this month's following code challenge.

```
input = "0219247151", output = ""

for (i in 1 .. length(input))
    if (input[i]%2 == input[i-1]%2)
        output += max(input[i], input[i-1])
```

The challenge is written in pseudo-code and we want to know what will be stored in the `output` variable when the algorithm is finished.

The algorithm in itself is relatively simple and doesn't have very many working parts, but can be tricky if you're not paying close attention to the setup.

The setup for the algorithm creates two variables, we will call them `input` and `output` for simplicity. Our `input` stores our initial numbers, and `output` will store the result set of our `for` operation.

## The Algorithm.

The algorithm will step over each number in the `input` string starting from the second index through to the last number, in each iteration we will check if the current and previous index have the same remainder when divided by `2`.

When both indexes have the same remainder, we add the maximum value to our `output` variable.

## The Solution.

Given the above algorithm, we could expect different results based on how a language handles string and integer concatenation.

If for instance, our language coerces the string returned from `max` to integers during the concatenation assignment, we could end up adding each result to each other instead of concatenating them.

`+=` usually indicated an arithmetic addition of the previous value added to our new value. In this instance though it indicated a string concatenation assignment.

Given that, stepping through the algorithm will look something like this.

![Visual representation of the algorithm](https://imgur.com/yfdWrLe.gif)

Storing the final string value of **294755** in to the `output` variable.

## In Conclusion.

This was a fun little challenge done by [Multisoft](https://www.multisoft.se), and I look forward to next month's challenge.

### More challenges.

If you're interested is solving coding challenges, check out some of the links below. 

- [CodeWars](https://www.codewars.com/r/ab28sQ)
- [CodeinGame](https://www.codingame.com/)
- [LeetCode](https://leetcode.com/)
- [HackerRank](https://www.hackerrank.com/)
- [CodeByte](https://www.coderbyte.com/)
Top 3 lessons learned in Backend Architecture. Interview with Cuong Le – backend developer at Apiumhub
Tags: agilewebandappdevelo
Published: 2021-07-08 11:38:31

---
title: Top 3 lessons learned in Backend Architecture. Interview with Cuong Le – backend developer at Apiumhub
published: true
date: 2021-07-06 11:03:18 UTC
tags: Agilewebandappdevelo
canonical_url: https://apiumhub.com/tech-blog-barcelona/lessons-learned-backend-architecture/
---

We are continuing with our interview series ( previously we had [interviewed Diego Ojeda – Android Lead at Apiumhub](https://dev.to/apium_hub/android-development-3-lessons-learned-24f6),  [Serhii Zabolennyi – QA Automation engineer at Apiumhub](https://dev.to/apium_hub/qa-interview-with-serhii-zabolennyi-qa-automation-engineer-at-apiumhub-1l38-temp-slug-9090449), [Javier Gomez – backend developer at Apiumhub](https://dev.to/apium_hub/grow-professionally-as-a-backend-developer-interview-with-javier-gomez-backend-developer-at-apiumhub-2jhh-temp-slug-2366798) and today we interview Cuong Le – Backend developer at Apiumhub and talk about key lessons learned in Backend architecture.

## Interview with Cuong Le – backend developer at Apiumhub

### Top 3 lessons learned in Backend architecture

- Object Oriented Programming (OOP)
- Object Oriented Design (OOD)
- Solid principal

### List your TOP 5 backend frameworks and explain why

1. **Asp.net Core**  
For fans of microsoft technologies, secure, fast, cloud base, and cross-platform.  
 
2. **Spring boot **  
For fans of Java technologies, also fast, just take a little effort to build up the restful web service  
3. **Expressjs **  
If anyone works with frontend, they should know expressjs, at least to use it to build a mock server, it is simple,  light-weight, easy to work with MongoDB to provide a REST API server.   
  
4. **Symfony **  
5. **Laravel**  
For fan of PHP, they will go with 2 above frameworks to build up backend architecture which reduce development, reputation, big community, open source, a lot of resource references, both are MVC architecture, …I could not compare each of them, the selection which one to use depends on the project and developer experience. 

### Why to use Java and Spring boot?

Development can start quickly, avoid complexibility xml configuration, reduce time consumed in development, all in one unit test, integration by default setup….

### What are the top 3 challenges in backend development?

- Scalability
- Performance
- Security

### What is your software architecture strategy to achieve scalability?

Microservice is the good approach to build a scalability backend with high  
performance, reliability + availability.  
  
Event-driven architecture is one of implementation for microservice  
architecture, and we can achieve microservice by applying event sourcing + cqrs  
for our backend

If you need [help with Backend Architecture](https://apiumhub.com/), let us know, we have experts in this field and we would be happy to work on an exciting project!
CSS TECHNIQUE(PART1)
Published: 2021-07-06 10:51:00

Hi guys i decided to write 1min articles about css techniques you can see the first article subject:"BORDER AROUND TEXT"
pay attention to the below images.
html part:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3shg5ixe331k7cpbrmg.png)
css part:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5rybtx2bllnjo54t0kc.png)
result:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvqyx7ajysuqb14j4p2x.png)
but you can add fonts to make it beautiful. from google fonts or the default fonts in css.
the last result:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6ufv3cgoee1o7g1no66.png)
MBA Course Fees, Colleges & Duration
Published: 2021-07-06 10:43:01

<a href="https://www.collegedisha.com/courses/mba-course-fees-duration-eligibility-admission-scope-job-and-salary" target="_self" rel="dofollow"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g925b6jnj5whp60gzcyk.jpg"></a>
The Master of Business Administration (MBA) is regarded as a widely respected degree that is ideally tailored for students who are prepared to obtain a master's degree to improve their skills needed for a business and management career. A two-year post-graduate program is the Master of Business Administration or <a href="https://www.collegedisha.com/courses/mba-course-fees-duration-eligibility-admission-scope-job-and-salary" target="_self" rel="dofollow"><b>MBA Course</b></a> that is taken as a path to receiving excess career openings in the corporate world. Students that, along with innovative thoughts, are accommodated with outstanding communication and leadership consistency will undergo a Master of Business Administration or MBA Program.

For an undergraduate, the MBA Course is a level-up option and it typically lasts 2 years. This course is the most common professional degree recognized worldwide in the world. All over the world, there are more than 2,500 kinds of MBA programs available in different languages. Before choosing any college just do some research about that college like its rank, placement records, fee structure, so on. Visit <b>collegedisha.com</b> to know about the <a href="https://www.collegedisha.com/colleges/mba-colleges" target="_self" rel="dofollow">MBA colleges in UP</a>.

This course can be selected by students who have finished their undergraduate courses and wish to undertake higher education. In both standard and distance learning, the MBA is available. That can be completed in 2 years or 1 year. 

The contrast is that one is reflected in the way you finish your course and another is a standard attendance course. The learning will be completed within 12 months in a 1 year MBA Course, whilst you will pursue MBA and beyond in a 2-year curriculum. Not every business school provides 1 year MBA courses, but this course is becoming popular and this choice is offered to students to run their career on the fast track by more business schools. 

After <a href="https://www.collegedisha.com/courses/bba-course-admission-eligibility-duration-fees-syllabus-scope-colleges-and-placement">BBA Course</a> most of the students pursue this course for better approach and Job Possibilities.

You can also read my new article:- "<a href="https://www.jobindeeds.com/education/merchant-navy-courses-after-10th/" target="_self" rel="dofollow"><b>Merchant Navy Courses after 10th</b></a>"
We launch our free to use Remote Jobs API
Published: 2021-07-06 10:35:49

[Remotewx](https://remotewx.com) is a **remote job board** on the web to help you find a career **where you can work remotely.** We only accept listings for job positions that are fully remote. Most of the companies we share are distributed or remote-first companies.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37qjmjoganh1jdt0glu9.jpg)

[With this API](https://remotewx.com/api), you can build apps by integrating our data feed with remote jobs.

The Remotewx API returns the list of all active remote job listings on the Remotewx job board. The API supports an URL endpoint for HTTPS requests and JSON formats as responses.

Remotewx is not a typical job aggregator that takes data from other remote job boards.

To use our API: Please link to Remotewx as a source. I created the API to extend the reach of Remotewx.com. All jobs appear delayed by 24 hours so that Google Jobs indexes Remotewx first.
Our clients can edit the job posting at any time. Therefore I recommend to query the API weekly or include it in real time via JavaScript.

API Endpoint: [https://remotewx.com/api](https://remotewx.com/api)

Have fun with it!

Luc
A free copy & paste collection of TailwindCSS buttons 🌪
Tags: tailwindcss, webdev, design, html
Published: 2021-07-06 10:19:49

Here is a free, copy & paste collection of TailwindCSS buttons. 

Browse through this collection of awesome and unique buttons and use them in any of your upcoming or exiting TailwindCSS project 🤩

**[TailwindCSS Buttons](https://www.producthunt.com/posts/tailwindcss-buttons)**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m010m4grrmgzl3x4z3wz.png)
GraphQL in Twig!
Tags: drupal, graphql, twig, decouple
Published: 2021-07-06 10:17:22

In 2019 I presented "a beginner’s guide on how to use GraphQL in Twig" - to progressively decouple Drupal's Front end at Decoupled Days in New York.

Decoupled Drupal is part of the future, but learning an entirely new stack can be daunting (like React, Vue or Angular, if you haven't used those before). 

Writing GraphQL inside Twig templates gives developers a path to an accessible soft-decoupled approach.

This session will introduce GraphQL queries and demonstrate the advantages of changing the Drupal push model to a pull model by letting the template define its data requirements.

# Quick Benefits
- Performance
-- Everything done in the same GraphQL “request”,  no HTTP request is made.
-- Queries are cached
-- Queries are grouped within multiple templates
-- Under the hood, it's like an additional hook

- Advantages
-- We still get Drupal forms
-- We still get translations out of the box
-- We still get all the nice features as it ...
-- Works alongside with standard Drupal
-- We have a common language between Backend and Frontend!
-- Reduced risk / cost

In the future: it is easier to partly decouple (ie: some React driven components), and it lays a foundation path to fully decouple. “Future proof”.

# See the Presentation here.

https://www.youtube.com/watch?v=lknMgevZqu0

<iframe src="https://slides.com/stewwest-amazee/deck/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

# Links:
- Soft decoupling with GraphQL + Twig: https://www.youtube.com/watch?v=QsmeXMZ0foM
- Atomic design with GraphQL + Twig: https://www.youtube.com/watch?v=9AJNp72-3D8
- Drupal Europe presentation: https://www.youtube.com/watch?v=BFf3stFHmk4

# Resources
- https://www.drupal.org/project/graphql
- https://www.amazeelabs.com/en/blog/using-twig-storybook-and-drupal
- https://www.amazeelabs.com/en/blog/dont-push-it-using-graphql-twig
- https://drupal.slack.com/ #graphql