teleren/devto huggingface dataset:
Learn from useHistory()
Tags: react, ruby
Published: 2022-08-25 13:51:33

Recently, while working on a React/Ruby project, I found myself asking, "How cool would it be if I clicked this button on the log in page, and if the log in was correct, it automatically navigated me to the Home Page"?

While we have to fetch the Ruby database in React to verify the log in, the idea of this auto-link was escaping me. So...

TO GOOGLE !

I quickly came across the useNavigate() hook.

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


This was perfect! "OnClick" I wanted to navigate to ('/Home') from the Login component. I kept scrolling to learn more.

Importing the useNavigate() from "react - router - dom" at the top of the page? Sounded good, but it made me think of day 1 of setting up this project. I had installed specifically "npm install react-router-dom@5". Meaning I purposely installed V5 instead of the current V6.

I realized then, that the useNavigate Hook was created in React Router V6 to replace a previous Hook, useHistory(). 

I was a little disappointed that I had spent so much time on the useNavigate() Hook, and it wouldn't be able to help me with this project. But, I continued down the rabbit hole of useHistory(), determined to get this auto-link working.

Luckily, they are almost identical!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjnf3o9b20542q8uu280.jpeg)

So what is useHistory()? 

"The useHistory hook gives you access to the history instance that you may use to _navigate_." - v5.reactrouter

Similarly to useNavigate(), we import useHistory () from "react - router - dom" at the top of the page.

Then we set a variable, 'history' equal to the useHistory Hook.


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

Now we have the power of useHistory() down in our component!
The simple syntax is: {history.push('/Which_Route_We_Want')

In the code above, I set a boolean statement with useState "isSubmitted". If the proper input is submitted to the username and password, then push the client to the /Home page. If not, continue to render the form above with helpful error messages (not shown).

Once I figured out how simple this auto-linking was with useHistory(), I set up my page with similar links like below:
 

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

Just remember to add your 'onClick' listeners below in your JSX!

This was my quick guide on the useHistory() Hook. Hope this helps someone in the future to learn from useHistory(), or we'll be doomed to repeat it 😁.


**SOURCES**
https://v5.reactrouter.com/web/api/Hooks
https://www.geeksforgeeks.org/reactjs-usenavigate-hook/
https://github.com/almickle/Phas3r-FrontEnd
User-specific access to spreadsheets (first pandas project!)
Tags: python, beginners, showdev, webdev
Published: 2022-08-25 13:48:00

Hi everybody! I was curious on using the pandas library, so I took on this new project yesterday to get data from inside a spreadsheet based on an input. It searches for an email entry and returns all the user’s info, which is stored in the same row.

Major things I learnt were the .loc function to search for info and creating my own function with it to make the code smarter. A bit more boring than other projects but I’m looking forward to get more into working with pandas & data :)

You can try out the project [here](https://ek.abstra.run/aa735455-23d7-435a-9107-7afc73ea80dd).


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

Important disclaimer: I’m interning at Abstra Cloud. I used it to generate UI bc right now I’m more focused on learning logic. I’ve been making most of my projects over there, but wanted to share bc it also would be cool for someone to make this elsewhere - in this case I believe using inputs and prints would be enough! Hope that’s fine.

Full code:
```python
import pandas as pd

def get_cell(info):
    return df.loc[df['Email'] == email, info].item()

df = pd.read_excel("data.xlsx")

email = read_email("What's your email?", initial_value = "roy@example.com")

result = df.loc[df['Email'] == email]

if email in result.values:
    name = get_cell("Name")
    points = get_cell("Points")
    redeem_date = get_cell("Redeem date")

    Page().display_markdown(f"""
# Hey {name}!
So far you've accumulated **{points}** points.
They can be reedemed from =={redeem_date}== onwards.""") \
        .display("Here is your spreadsheet entry:") \
        .display_pandas(result) \
        .run()

else:
    display('Sorry, can\'t find this user!')
```
Make Scratch Professional
Tags: tutorial, gamedev
Published: 2022-08-25 13:46:00

## Remember that elementary school coding class?
Yep, we used scratch. A kiddy like, coding block platform you can code on a web-app, website or an actual app. Yeah. It was awesome. I still use scratch to make games nowadays, but now, we have an EXPLOIT!
<br>
### Of course, not hacking...
but still it is really kool. Scratch is a web thing. So, expectedly, it uses web stuff. It uses JS, HTML and stuff. And it has a file format called ".sb3" to download to your computer to do edits offline on the scratch app.
<br>
### Here's a little secret on the ".sb3" file format
Just like any NEW file format, it is a ".zip" file. And, to be honest, it is EXTREMELY simple to ___script___ ".sb3" files. In a ".sb3" file you download from a blank project, there would be a few files

1. JSON file as data for the scripts
2. Some assets, only some ".mp3"'s and ".svg"'s for sounds and images respectively

### So THAT'S juicy
So, how do we extract these juicy code files? Simple. Rename the ".sb3" file to a ".zip" file.
![rename](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5aanrpvb9dcztfjn4g0m.png)
Extract all:
![extract](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50eo7zdie7lxz2jq7rgi.png)
Viola!
![files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqb7fjh92to9zjk5xr7b.png)
<br>
### So, what do we use to reach the juicy code?
Open the JSON file in a code editor, there would be a SINGLE line of JSON code (good luck organizing it). Scratch makes it practical and easy to understand the JSON as long as you have used scratch a few times and after reformatting the JSON file a bit, it would look like this:
![reformat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci1chcaiatqoglh50glj.png)
<br>
Do some edits to the JSON, and maybe add some .mp3 or .svg files to make your project even juicier!
<br>
### I want to put them in scraattcchhh 
So, finished your code. Now, just reverse-engineer the file. Re-zip and change file ending to a ".sb3"! Now, you can upload it on scratch.
<br>
<br>
## Why would you want to do all these work?
If you like being a five-year old and want to spice up your games or upload them on GMTK 2022 on twitch but you can't with a website? THAT is the beauty. Convert it, add some servers and clients, and you are able to do that.
<br>
At the point of writing, these are the only features to remotely edit files on scratch out of scratch website or web-app or desktop app or mobile app or... But, you get it. I really wish that Scratch would add more customization on scratch 4.0.
<br>
<br>
##### How many times did I put "juicy/juicier"?
Extract Contour then process it and then paste original image
Published: 2022-08-25 13:28:46

I want to thicken people's eyebrows with image processing technique in the image I took from the camera. I followed the steps below, but I got stuck somewhere. i need your help

I got the eyebrow color By converting the color I obtained to hsv code, I found which color it is and made a mask accordingly With this mask, for example, if the eyebrows are black, I can detect them (as contoure) Then I thickened these contours with the dilation method. After this, I need to take that thick eyebrow from the mask and paste it on my picture, but I don't know how to do it.
We like helping other Drupal agencies
Tags: webdev, opensource, agency, php
Published: 2022-08-25 13:25:26

## Why would we collaborate with other Drupal companies? 
Although it may seem unusual that we compete with other Drupalists, it is a vital aspect of what makes Code Enigma unique.

**We originated from the Drupal community**
Community is at the core of Drupal. This community works together and contributes to a final product that addresses as many problems as feasible.

With our clients, we work in partnership. This is to ensure that we are working with them rather than just for them as a supply of abstract ideas.

And when it comes to providing them with hosting solutions, that is unquestionably the case for the clients of our Drupal agency.

**Hosting with Code Enigma**
Code Enigma made the decision to offer hosting services a number of years ago in order to supplement its already-existing design and development division. We found a service we could offer to other Drupal agencies.

As Drupal experts first, we were familiar with the peculiarities and hosting issues of the CMS. For high performance, we were able to create solutions that were specifically designed for it.

Soon after, we started receiving inquiries from other Drupal firms wishing to use our hosting services. This operates in a few different ways:

The Drupal agency would resell our hosting solution as their own, and we would remain unnoticed, ensuring everything ran well.

**Collaborative proposals**
In some circumstances, we would work together on sales pitches to expand the possibilities for the Drupal agency while partnering with them on the hosting portion of the bid.

**Project recovery**
Because of the wide range of skills we have at Code Enigma, our support service has evolved into a helpful complement to the Drupal agencies' work.

We can be there if your project hits an unexpected problem. Say your site crashes or you experience deployment issues.

We can work with your internal team or development agency, or pick everything up where they left off.

**Grow with us!**
2019 saw a meeting between our director Greg and NDP Studios' Head of Production Simon Whitaker. When it comes to hosting, he said Code Enigma functions like an addition to their staff. 

They are equipped to interact with the majority of clients and provide hosting for their Drupal projects, but occasionally a client will have more complicated requirements. They collaborate with us there. The potential for this to expand for NDP and Code Enigma, especially through collaboration with a number of the Royal Colleges, really excites us.

If you are a member of a Drupal agency and are reading this, [please get in touch with us](https://www.codeenigma.com/our-services/drupal-support). You'll hopefully see that there are a variety of ways we can collaborate on other Drupal projects. Although we may still engage in other forms of competition, the Drupal community is primarily focused on collaboration.
Migrating to Drupal 10
Tags: drupal, planning, estimating, aws
Published: 2022-08-25 13:17:21

How would you plan your Drupal migration? Here is how one person planned their's using Twigflo.


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

[Link to live template](https://app.twigflo.com/app/mission/630685a465262c001894fb96)
How to run Playwright for Go using local Chrome
Tags: playwright, go
Published: 2022-08-25 13:12:47

When Playwright is run with the default settings, a separate browser for use with Playwright (e.g., Chromium) is installed and the process is executed using that browser.

If you want to run Playwright from Chrome already installed on your local machine, you can skip the installation and refer to Chrome on your local machine to run the process.

The following is sample code to achieve this.
(Most of the code below is based on the sample in the [README of Playwright for Go](https://github.com/playwright-community/playwright-go/blob/main/README.md).)

```go
package main

import (
    "fmt"
    "log"

    "github.com/playwright-community/playwright-go"
)

func main() {
    runOption := &playwright.RunOptions{
        SkipInstallBrowsers: true,
    }

    // Perform the installation of Playwright's Driver here.
    // Note that this process can be skipped the second time or later because the Driver is already installed.
    err := playwright.Install(runOption)
    if err != nil {
        log.Fatalf("could not install playwright dependencies: %v", err)
    }

    pw, err := playwright.Run()
    if err != nil {
        log.Fatalf("could not start playwright: %v", err)
    }

    option := playwright.BrowserTypeLaunchOptions{
        Channel: playwright.String("chrome"),
    }

    browser, err := pw.Chromium.Launch(option)
    if err != nil {
        log.Fatalf("could not launch browser: %v", err)
    }

    page, err := browser.NewPage()
    if err != nil {
        log.Fatalf("could not create page: %v", err)
    }

    if _, err = page.Goto("https://news.ycombinator.com"); err != nil {
        log.Fatalf("could not goto: %v", err)
    }

    entries, err := page.QuerySelectorAll(".athing")
    if err != nil {
        log.Fatalf("could not get entries: %v", err)
    }

    for i, entry := range entries {
        titleElement, err := entry.QuerySelector("td.title > a")
        if err != nil {
            log.Fatalf("could not get title element: %v", err)
        }

        title, err := titleElement.TextContent()
        if err != nil {
            log.Fatalf("could not get text content: %v", err)
        }

        fmt.Printf("%d: %s\n", i+1, title)
    }

    if err = browser.Close(); err != nil {
        log.Fatalf("could not close browser: %v", err)
    }

    if err = pw.Stop(); err != nil {
        log.Fatalf("could not stop Playwright: %v", err)
    }
}
```
What is RS School?
Published: 2022-08-25 13:12:26

Hey everyone, in today's blog i want to talk a little bit about **RS School** and why i think this is the best online school if you want to become a programmer. Without much talking let's get started!

**RS School** is free-of-charge and community-based education program conducted by The Rolling Scopes developer community
since 2013.

Everyone can study at [RS School](https://rs.school), regardless of age, professional employment, or place of residence.

The mentors and trainers of this school are front-end and javascript developers from different companies and countries.

You can learn bleeding-edge technologies in this school such as Frontend, Node.js, Angular, React, Machine Learning, IOS and Android.

Cool thing about this school is that you will have an opportunity to work at one of the best companies in the world [Epam](https://www.epam.com/) after successfully graduating. 

I also enrolled in Frontend course of RS School and got tons of useful information about Frontend development. The course is divided into 3 stages. In first stage i learned fundamentals of HTML, CSS, JavaScript, Git and Figma. After first stage, i was assigned a mentor who is a senior developer. He helped me a lot when i had difficulties in completing tasks and i got many valuable tips from him. In second stage i learned Advanced Concepts of Javascript(Classes, Prototypes, Inheritance, Execution Context and etc.), Design patterns, Design principles, Protocols, Testing and Typescript. I'm currently in third stage(learning Angular). So, this course provides everything you need to become a Strong Junior Developer.

That's it for today's blog. If you are interested, check out the [course](https://rs.school/). Thanks for reading)
Javascript interview preparations
Published: 2022-08-25 13:10:00

> There are thousands of self-taught JavaScript programmers looking for web development positions. Unfortunately, self-learning or training classes, often leaves gaps in people’s understanding of the language itself. The problem is that questions testing your understanding of JS are exactly what many tech companies ask in their interviews. Some many know to do coding, but lack a solid grasp of the language. Just writing the some important concepts of js.

**Shallow clone(copy) & deep clone(copy)**

```
Shallow copy
copy the original object into the clone object then the clone object has the copy of the memory address of the original object. Means both points to the same memory address. A shallow copy means once we make changes in the clone object it will be reflected back to the original object as well.
_code:_
var obj1 = {
    id: 1,
    company: "GFG"
};
var obj2 = obj1;
obj2.id = 2;
console.log(obj1.id);
console.log(obj2.id);
_output:_
2
2

Deep copy
But in the case of deep copy, changing the value of the cloned object will not reflect into the original object, because the original object has its own reference object and after cloning, the cloned object has its own referenced object. Both are different.
_code:_
var student1 ={ 
    name : "Manish",
    company : "Gfg"
 
    }
    var student2 =  { ...student1 } ;
    student1.name = "Rakesh"
    console.log("student 1 name is",student1.name)
    console.log("student 2 name is ",student2.name);
_output_
student 1 name is Rakesh
student 2 name is  Manish
```

**Events**

```
Browser events
Js events
```

**Value vs. Reference**
**Scope**
**Hoisting**
**Closures**
**this**
**new**
**apply, call, bind**
**Prototypes & Inheritance**
**Asynchronous JS**
**Higher Order Functions**
Calling all UK councils to try LocalGov Drupal
Tags: localgov, localgovdrupal, opensource, aws
Published: 2022-08-25 12:51:00

LocalGov Drupal is a way to distribute and install Drupal that helps UK government agencies publish websites for the public more quickly, cheaply, and effectively. It is the best of its kind and can be used by all local governments.

We're offering a free trial of LGD for any council.

## **LocalGov Drupal features**

**Types of content**
Make pages where you can tell people about your products and services. There are landing pages, step-by-step applications and registrations, and guides.

**Front end**
Subsites can be used to make different sections with their own themes, as well as news, events, different kinds of alert banners, and directories.

**Back end**
**Use the module for revisions and history, the dashboard for approvals, and different patterns, styles, and call outs.

**Style and idea**
On top of our scalable base theme, you can build your LocalGov Drupal site. Different LocalGov Drupal sites all use the same design patterns, which were made with best-practice, data-driven components and GOV.UK's design system. Your site can be changed so that it fits with the brand guidelines of your council.

**Accessibility**
LocalGov Drupal wants its content and features to meet or exceed WCAG 2.1 level AA. Level AA is also met or exceeded by the admin interface.

**Microsites**
The microsites feature of LocalGov Drupal lets council content designers make stand-alone sub-sites with simple design changes.

## **Who are Code Enigma?**

- Award-winning hosting services
- Local government websites have been optimised by us for 10+ years
- LocalGov Drupal preferred supplier
- Crown Commercial Services Supplier
- AWS-certified and Select Partners
- ISO-certified

## **Why would you pick LocalGov Drupal on AWS?**
We chose AWS to host the LocalGov Drupal trial because it is easy to use, flexible, safe, cheap, reliable, scalable, and performs well.

We've helped connect 14 sites to LGD, and we'd love to sign up some more.

[Check out the trial](https://www.codeenigma.com/localgovdrupal-free-trial)
Your font pairings are letting down your web design...
Tags: design, webdev, beginners, css
Published: 2022-08-25 12:47:00

## The importance of strong font pairings...

Font pairings can make or break a design. The use of a pair of fonts that are either too similar or too dissimilar can make your design look cheap or alternatively, unthoughtful.
Strong font pairings create a professional look and upgrade your brand image simply and effectively, with minimal effort.

## How to find the perfect font pairing...

For developers that came into web development from interests aside from design, it can often be difficult to achieve a design that meets the general standards of design - thus often developers without a design background can regularly struggle to select the best font pairings.
Adobe have recently been upgrading their Express software massively to make design easier for non designers and designers alike; with this has come top quality content to support it.
In mid may Adobe released [this blog post](https://www.adobe.com/express/learn/blog/10-ways-to-pair-fonts-for-maximum-impact?utm_campaign=The%20Code%20Crisis%20%7C%20Matt%20Davison&utm_medium=email&utm_source=Revue%20newsletter) listing ‘_[10 ways to pair fonts for maximum impact](https://www.adobe.com/express/learn/blog/10-ways-to-pair-fonts-for-maximum-impact?utm_campaign=The%20Code%20Crisis%20%7C%20Matt%20Davison&utm_medium=email&utm_source=Revue%20newsletter)_’ which covers some of the best tips to make your design experience easier.
However, [Adobe Express](http://express.adobe.com/sp/?utm_campaign=The%20Code%20Crisis%20%7C%20Matt%20Davison&utm_medium=email&utm_source=Revue%20newsletter) has also received an update to make choosing fonts easier! Now when you create a project within their free web-based program you can gain immediate access to the best fonts for your project by scrolling down on any selected text in the right-hand sidebar and navigating to the ‘Font Recommendations’ section. Thank me later.

## What this means for non-designers...

Well for those who don’t come from a design background there’s no more stress about finding the perfect assets including fonts for your next web design project. Simply load up a mock-up design into Express and find the greatest and best-fitting font recommendations to match your style!

### Disclaimer

This post includes ads.
Adobe Express Ambassadors #Ad

Originally released on [matt.lgbt](https://matt.lgbt) at [https://blog.matt.lgbt/archive/1316326](https://blog.matt.lgbt/archive/1316326)