teleren/devto huggingface dataset:
Công ty TNHH Truyền Thông Tomato Việt Nam
Published: 2022-02-21 10:04:33

Tomato Media là công ty dịch thuật hàng đầu Châu Á về dịch vụ ngôn ngữ bao gồm: bản địa hóa, biên dịch, phiên dịch, thu âm, lồng tiếng, dịch phụ đề, thuyết minh, biên dịch phim/video, chép dịch audio & video, dịch thuật kịch bản với hơn 50 cặp ngôn ngữ.
"Địa chỉ: 
Trụ sở chính Hà Nội: Phòng 504, tòa nhà Kinh Đô, 292 Tây Sơn, Phường Trung Liệt, Quận Đống Đa, Hà Nội, Việt Nam. 
Chi nhánh tại Bangkok: 362 Krungthep, Nonthaburi 2, Bangkok, Thailand. 
Chi nhánh tại Jakarta: 12th Floor, Wisma 46 Tower, Karet Tengsin, Jakarta, Indonesia."
Website: [https://tomatotranslation.com/](https://tomatotranslation.com/)
Hotline: 0938 596 333
Email: info@tomatomediavn.com
#dịch_thuật #dịch_thuật_Tomato #Tomato_Media
Follow các mạng xã hội của Tomato:

[https://www.facebook.com/TomatoMediaVietnam](https://www.facebook.com/TomatoMediaVietnam)
[https://www.linkedin.com/company/tomatomediavn](https://www.linkedin.com/company/tomatomediavn)
[https://www.instagram.com/tomatomediavn/](https://www.instagram.com/tomatomediavn/)
[https://www.youtube.com/channel/UCP_ZBJKTbnE6pbaliSK--cA](https://www.youtube.com/channel/UCP_ZBJKTbnE6pbaliSK--cA)
[https://www.blogger.com/profile/01401313489673216729](https://www.blogger.com/profile/01401313489673216729)
[https://tomatomediavn.tumblr.com/](https://tomatomediavn.tumblr.com/)
[https://twitter.com/TomatoMediaVN](https://twitter.com/TomatoMediaVN)
[https://www.diigo.com/profile/tomatomediavn](https://www.diigo.com/profile/tomatomediavn)
[https://trello.com/tomatomediavietnam](https://trello.com/tomatomediavietnam)
[https://getpocket.com/@tomatomediavn](https://getpocket.com/@tomatomediavn)
Rails: Easily allow Capybara to find elements with a helper method.
Tags: rails, rspec, capybara, testing
Published: 2022-02-21 10:01:40

Capybara is the testing framework for writing E2E(end-to-end) tests in Ruby. 

It has multiple helper methods to allow you to write neat system specs. You can use `id`, `.class`, or any normal valid css selector that you can think off.

But, sometimes Capybara does not find the element, although the selector you wrote is correct.

I have came up with a small helper method that will add an HTML `id` to the tag that is only used in testing environment. So that it will not be visible in production when being inspected.

```ruby
# app/helpers/capybara_helper.rb

module CapybaraHelper
  def capybara_can_find_by(id)
    "id='#{id}'".html_safe if Rails.env.test?
  end
end
```

This method appends an HTML id to the element that is called on. For example, it can be used like this in your `erb` files.

```html
<div <%= capybara_can_find_by "element-id" %>>

</div>
```

Now. When writing capybara specs, you can simply use the `id` selector to easily find the element you are looking for.

```ruby
within "#element-id" {  }
find "#element-id"
```

This was inspired by Laravel Dusk's [selectors](https://laravel.com/docs/9.x/dusk#dusk-selectors)

### References

- [Capybara::Session#within](https://www.rubydoc.info/gems/capybara/Capybara%2FSession:within)
- [Capybara::Node::Finders#find](https://rubydoc.info/github/jnicklas/capybara/Capybara/Node/Finders:find)
- [Laravel Dusk](https://laravel.com/docs/9.x/dusk)
- [CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
Find Paths in Graphs.
Published: 2022-02-21 10:00:21

We explored some basics of graphs in [this post](https://dev.to/wanguiwaweru/graphs-in-python-1pom). 
Now let's put some of that knowledge into practice.

###Instructions

Find if there is a path between two nodes in a directed graph. 

##Approach

We iterate through the neighbors of the source node and determine if they are equal to the destination node.
If there is a path from the source's neighbor to the destination then there is a path from the source to the neighbor.

###Depth-First Implementation

```python
def hasPath(graph,source,destination):
    if source==destination:
        return True
    for neighbor in graph[source]:
        if hasPath(graph,neighbor,destination)==True:
            return True
    return False

graph = {
    'a' : ['c','b'],
    'b': ['d'],
    'c': [ 'e'],
    'd': ['f'],
    'e': [],
    'f': []
}

print(hasPath(graph,'e','f'))
```
###Breadth-First Implementation

```python
def hasPath(graph,source,destination):
    queue = [source]
    while queue:
        current = queue.pop(0)
        if current== destination: 
            return True
        for neighbor in graph[current]:
            queue.append(neighbor)
    return False

graph = {
    'a': ['c', 'b'],
    'b': ['d'],
    'c': ['e'],
    'd': ['f'],
    'e': [],
    'f': []
}
print(hasPath(graph, 'e', 'f'))
```

This solution has a time complexity of O(e) where e is the number of edges.
The space complexity is O(n) where n is the number of nodes.

##Undirected Graph

We can consider the same problem but for an undirected graph. In an undirected graph we may encounter an endless loop if the nodes are cyclic.

We can handle this by using a set to keep track of visited nodes to avoid visiting them again.

##Implementation

```python
def uniPath(edges, source, destination):
    graph = createGraph(edges)
    return hasPath(graph, source, destination, set())

def createGraph(edges):
    graph = {}
    for edge in edges:
        x,y = edge
        if x not in graph:
            graph[x] = []
        if y not in graph:
            graph[y] = []
        graph[x].append(y)
        graph[y].append(x)

    return graph


def hasPath(graph,source,destination,visited):
    if source==destination:
        return True
    if source in visited:
        return False
    visited.add(source)
    for neighbor in graph[source]:
        if hasPath(graph,neighbor,destination, visited)==True:
            return True
    return False

edges = [['i','j'],['k','i'],['m','k'],['k','l'],['o','n']]
print(uniPath(edges,'k','n'))

```

We shall explore more about graphs in other posts.
Version 💯 of Chrome, Edge, and Firefox may break your website
Tags: testing, webdev, javascript
Published: 2022-02-21 09:53:06

---
title: Version 💯 of Chrome, Edge, and Firefox may break your website
published: true
description: Preparing for Version 100 of Chrome, Edge, and Firefox
tags: #testing, #webdev, #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vr7hzlujpu5a4tbj7de.jpeg
---

Chrome, Microsoft Edge and Firefox are all getting closer to the release of their 100th version.

This may look like a nice round number, but it might introduce bugs or create compatibility issues for your website.

We've seen similar situations, such as the Y2K bug and Microsoft skipping Windows 9.

##1. How exactly?##

This particular situation is related to how websites read user-agent (UA) strings to identify your web browser.

When you visit a webpage on a website, your browser sends a request to that page that includes a user agent string that looks something like this:

***Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36***

Mozilla already ran some experiments in August 2021 to test if three-digit version numbers would break some websites, and found that a number of websites did not work properly.

Examples include Slack, Yahoo, Bethesda, HBO GO, and more.

##2. It's not just your own code##

Think about all those 3rd party libraries your website is currently using.

Each one has its own way of checking the browser version.

![npm packages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3opt55754w7hpt63q6r.png)

##3. How to prevent this?##

As always, testing is the only way to know that a website works as expected.

Chrome 100 will be released on March 29 and Firefox 100 will land on May 3, but you don't have to wait until then.

You'll be able to test your website on these browser versions while they're in beta, by using [Endtest](https://endtest.io).

Right now, you can already run your automated tests on Chrome Beta v99, Edge Beta v99 and Firefox Beta v98.

![Endtest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwxkj9ipfcu5f6jzu3dx.png)

If you want to learn more about that platform, I recorded a video tutorial:

{% embed https://www.youtube.com/watch?v=usUEr0KUaKw %}
What the heck is useReducer Hook
Tags: react, productivity, career, javascript
Published: 2022-02-21 09:37:40

Let's have a look at an advanced hook in the React series.

### useReducer Hook
This is one of the hooks that can be considered as advanced React. 
We use this hook when we have a more complicated setup as far as states are concerned. 

It is similar to useState hook but a bit more advanced than its predecessor. The hook helps us in creating or providing more structure to the state. 

Some common practise includes that we declare reducer as 
```react
const [state, dispatch]= useReducer(reducer, defaultState)
```
The default state is the initial value passed along with the reducer can be of any type or a combination of types. 

Now whenever we need to do something with the state it must, must use the **'dispatch'** and it goes <u>through</u> the **'reducer'**.

The **reducer** function takes the old state and an action to return the new state. 
```react
const [people, setPeople] = useState([])
const [isModalOpen, setIsModalOpen] = useState(false)
const [modalContent, setModalContent] = useState('')
```
The above code written using the useState hook can be condensed using the useReducer hook

```react
const deafaultState = {
   people: [],
   isModalOpen: false,
   modalConten: ""
}
const [state, dispatch] = useReducer(reducer, defaultState)
```
While calling the dispatch function we **'always'** need to pass an object with the property name of **"type"**. The object is called the action.

The common practice while the passing type is using uppercase. For example:

```react
{type: "TESTING"}
```
From the reducer we **always**, **always** must return some kind of state. To do that we need something called a payload.

Payload is a property of action which holds the content of the message of the action. You can think of it as the content or message of an email. I think of it as the payload in fighter jets xD.
![Payload](https://media.giphy.com/media/j7hKCWwNAhGKNVrCJk/giphy.gif)

Type is the type of action being sent. Think of it as the subject of the email. I think of it as the type of TNT in the payload.

One last thing to keep in mind is to always keep track of the old states while dealing with the actions in the reducer function.

Let's have a look at a simple counter program made using the hook.
```react
const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
```
Do let me know your thoughts and follow my [Twitter](https://twitter.com/Neo_kaizerr) and [LinkedIn](https://www.linkedin.com/in/sobhandash/).
How To Setup New Mac For Web Development | Setup Laravel On Mac | Install Laravel On Mac
Tags: laravel, webdev, programming, beginners
Published: 2022-02-21 09:34:32

{% embed https://www.youtube.com/watch?v=yxuR5myrVi4 %}

Hi everyone! In this video, I walk you through how to setup your Mac for web development! Setup Mac for Laravel. I hope this is helpful, let me know what tools you love to use that I should be using!! 

Follow me:
Twitter: https://twitter.com/Laravellercom
Facebook Page: https://www.facebook.com/1laravellercom
Instagram: https://www.instagram.com/laravellercom/
Github: https://github.com/laraveller
Website: https://laraveller.com/

Playlists:
Laravel Roles and Permissions: https://bit.ly/3gOhM7d
LARAVEL INERTIA MOVIE APP: https://bit.ly/3FVMp4Q
Laravel Livewire Movie App: https://bit.ly/3s8D6v1
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M
#laravel #webDevelopment #tutorial
Best practices for JWT tokens
Tags: jwt, bestpractices, passwordless, authentication
Published: 2022-11-01 06:53:01

---
title: Best practices for JWT tokens
published: true
date: 2022-02-21 09:11:23 UTC
tags: JWT, bestpractices, passwordless, authentication
canonical_url: https://mojoauth.com/blog/best-practices-for-jwt-tokens/
---

Best practices for JWT tokens JWTs are the latest technology used for securely transmitting information between backend and frontend as JSON objects. While using a React app or any other SPA or SSR apps for your frontend, there’s a high chance that your data setup looks like this. And as you may know, this data setup requires a way of securing your calls from the malicious hackers who can steal your data.

[Read On](https://mojoauth.com/blog/best-practices-for-jwt-tokens/)
Save Excel to Database
Published: 2022-02-21 08:47:36

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/save-excel-to-database
---

Shows how to iterate data in an Excel `WorkSheet` and import that data into a `System.Data.DataTable` so that it may be saved to any SQL database supported by C#.

Entire `WorkBooks` can also be converted to `System.Data.DataSet`

**C#:**
```
using IronXL;
using System.Data;
 
 
WorkBook workbook = WorkBook.Load("test.xls");
WorkSheet sheet = workbook.DefaultWorkSheet;
 
//This is how you convert your worksheet to DataTable
//Boolean parameter allows you to set whether you want to treat your first row as column names of your table.
//The default value is false
var dataTable = sheet.ToDataTable(true);
 
//Optionally inspect your data
foreach (DataRow row in dataTable.Rows)
{
    for (int i = 0; i < dataTable.Columns.Count; i++)
    {
        Console.Write(row[i]);
    }
}
 
 
 
//Also you can convert the whole workbook to DataSet and work with it the way you like.
var dataSet = workbook.ToDataSet();
 
foreach (DataTable table in dataSet.Tables)
{
    Console.WriteLine(table.TableName);
}
```

**VB:**
```
Imports IronXL
Imports System.Data
 
 
Private workbook As WorkBook = WorkBook.Load("test.xls")
Private sheet As WorkSheet = workbook.DefaultWorkSheet
 
'This is how you convert your worksheet to DataTable
'Boolean parameter allows you to set whether you want to treat your first row as column names of your table.
'The default value is false
Private dataTable = sheet.ToDataTable(True)
 
'Optionally inspect your data
For Each row As DataRow In dataTable.Rows
	For i As Integer = 0 To dataTable.Columns.Count - 1
		Console.Write(row(i))
	Next i
Next row
 
 
 
'Also you can convert the whole workbook to DataSet and work with it the way you like.
Dim dataSet = workbook.ToDataSet()
 
For Each table As DataTable In dataSet.Tables
	Console.WriteLine(table.TableName)
Next table
```
Embedded GUI Webinar
Published: 2022-02-21 08:46:08

As you can see, the Internet of Everything extends the embedded devices that emphasize human-computer interaction to describe a more intelligent connection with graphical user interface (GUI) and voice to best clarify the value of the Internet of Things. We now get very easy to enjoy the high-definition, high-nature interaction experiences pervaded through daily life, for example, the smartphone. However, introducing a colorful UI into a resource-limited embedded device (MCU) is not easy.



RT-Thread partnered with LVGL and manufacturers to bring this webinar(a design contest will soon be launching), opening an opportunity for embedded developers that come from everywhere to explore more possibilities with embedded GUI. Topics feature several, such as discussing the best-fitting GUI for your projects, hardware commits to human-computer interaction, skills to simplify GUI development. Also, many examples and projects showcases will be introduced. 


⏰ Time: 3/15/2022, 8:00 AM PST
✅ Free & Virtual
✅ The e-certificate is provided to attendees.
👉 Register now:  https://bit.ly/3rNzOg6



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj6bryf7r5jm6apl08qw.png)
Research Study
Tags: blockchain, developers, survey
Published: 2022-02-21 08:41:43

hi everyone,
I`m a Research Scholar. My study is about Developer`s perception towards Blockchain. I kindly ask every blockchain developers who is willing to spend your quality time for this survey. Please help me for my study. Its all about a very general survey to gain a knowledge for my study. Im attaching the link with this.

https://docs.google.com/forms/d/1jkZFAKaDjwq09bmBkJXI7gKzApPjpfmAObKv07hk4Y0/edit


Regrads,
S Harini,
Asst Prof. 
DRBCCC Hindu College,
Chennai
Upgrade to Gradle JDK 11 on Github Actions
Tags: githubactions, gradle, reactnative
Published: 2022-02-21 08:15:11

Getting a compiler exception while building Android on Github Actions?

```bash
> Task :react-native-device-info:compileReleaseJavaWithJavac FAILED
An exception has occurred in the compiler (1.8.0_322). Please file a bug against the Java compiler via the Java bug reporting page (http://bugreport.java.com) after checking the Bug Database (http://bugs.java.com) for duplicates. Include your program and the following diagnostic in your report. Thank you.
java.lang.AssertionError: annotationType(): unrecognized Attribute name MODULE (class com.sun.tools.javac.util.UnsharedNameTable$NameImpl)
```

In my case, `react-native-device-info` requires newer Gradle JDK during build. Hence, we need to update the JDK reference to version 11, not the default JDK 8 that uses version 1.8 compiler. See: https://github.com/actions/virtual-environments/blob/main/images/macos/macos-11-Readme.md#java
- I'm using `macos-11` Image on Github Actions.

In our local machine, we can do the upgrade here in Android Studio > Preferences > Build, Execution, Deployment > Build Tools > Gradle > Select Gradle JDK version:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cl7ckexmhsw8odimnoq0.png)

On CI/CD, we can configure the environment to upgrade to JDK 11. For example, in Github Actions deployment steps, we add a upgrade step (Set up JDK 11):

```yml
jobs:
  deploy:
    name: Deploying to Playstore
    runs-on: macos-11
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2
      - name: Install Dependencies
        run: yarn
        working-directory: ${{ env.working-directory }}
      - name: Set up JDK 11
        uses: actions/setup-java@v2
        with:
          distribution: 'liberica'
          java-version: '11'
          cache: 'gradle'
```


See https://github.com/actions/setup-java for more configuration regarding distribution, version and caching.
OCR a Region of an Image (Code Example)
Published: 2022-02-21 08:28:31

---
canonical_url: https://ironsoftware.com/csharp/ocr/examples/net-tesseract-content-area-rectangle-crop/
---

This examples renders a 41% speed improvement by choosing a specific area of an image to perform OCR in .NET.
These are called ContentAreas or CropAreas.

**C#:**
```
using IronOcr;
 
var Ocr = new IronTesseract();
 
using (var Input = new OcrInput())
	{
	// a 41% improvement on speed by specifiying a pixel region
	var ContentArea = new System.Drawing.Rectangle() { X = 215, Y = 1250, Height = 280, Width = 1335 };
	Input.AddImage("img/example.png", ContentArea);
 
	var Result = Ocr.Read(Input);
	Console.WriteLine(Result.Text);
}
```

**VB:**
```
Imports IronOcr
 
Private Ocr = New IronTesseract()
 
Using Input = New OcrInput()
	' a 41% improvement on speed by specifiying a pixel region
	Dim ContentArea = New System.Drawing.Rectangle() With {
		.X = 215,
		.Y = 1250,
		.Height = 280,
		.Width = 1335
	}
	Input.AddImage("img/example.png", ContentArea)
 
	Dim Result = Ocr.Read(Input)
	Console.WriteLine(Result.Text)
End Using
```
Preserve Excel Macros in XLSM (Code Example)
Published: 2022-02-21 08:26:12

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/preserve-excel-macros-xlsm
---

IronXL supports macros in Excel. Simply load, edit and save an XSLM document - and macros will not be edited or disabled.

XLSX files may be saved as XLSM file extension to enable macros.

To disable macros, simply save an XSLM with the XLSX file extension.

**C#:**
```
using IronXL;
 
WorkBook workbook = WorkBook.Load("test.xlsm");
//You can load xlsm file and work with it as you wish.
var sheet = workbook.CreateWorkSheet("one more sheet");
sheet["A1:B2"].Value = "Hi";
//Then you can save it with xlsm extension and all macros will be preserved.
workbook.SaveAs("test.edit.xlsm");
```

**VB:**
```
Imports IronXL
 
Private workbook As WorkBook = WorkBook.Load("test.xlsm")
'You can load xlsm file and work with it as you wish.
Private sheet = workbook.CreateWorkSheet("one more sheet")
Private sheet("A1:B2").Value = "Hi"
'Then you can save it with xlsm extension and all macros will be preserved.
workbook.SaveAs("test.edit.xlsm")
```
Sort Excel Ranges in C#
Published: 2022-02-21 08:20:47

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/sort-excel-range-csharp
---

IronXL makes sorting Excel Columns, Rows and Ranges extremely simple in C# and Vb.Net.

Arranging data in alphabetical or value order makes human analysis of data feasible in Microsoft Excel.

**C#:**
```
using IronXL;
 
WorkBook workbook = WorkBook.Load("test.xlsx");
WorkSheet worksheet = workbook.DefaultWorkSheet;
 
//Select a Range
Range range = worksheet["A1:D20"];
 
//This is how we can sort the current range in ascending order (A to Z)
range.SortAscending();
 
 
//This is how we can sort the current range in descending order (Z to A)
range.SortDescending();
 
workbook.SaveAs("SortExcelRange.xlsx");
```

**VB:**
```
Imports IronXL
 
Private workbook As WorkBook = WorkBook.Load("test.xlsx")
Private worksheet As WorkSheet = workbook.DefaultWorkSheet
 
'Select a Range
Private range As Range = worksheet("A1:D20")
 
'This is how we can sort the current range in ascending order (A to Z)
range.SortAscending()
 
 
'This is how we can sort the current range in descending order (Z to A)
range.SortDescending()
 
workbook.SaveAs("SortExcelRange.xlsx")
```