teleren/devto huggingface dataset:
Video: Transformer training shootout, part 2: AWS Trainium vs. NVIDIA V100
Tags: aws, gpu, opensource, transformers
Published: 2023-10-09 12:44:26

---
title: Video: Transformer training shootout, part 2: AWS Trainium vs. NVIDIA V100
published: true
date: 2023-05-17 12:24:03 UTC
tags: aws,gpu,opensource,transformers
canonical_url: https://julsimon.medium.com/video-transformer-training-shootout-part-2-aws-trainium-vs-nvidia-v100-525fca92ef22
---

In this video, I compare the cost/performance of AWS Trainium with the NVIDIA V100 GPU.

I first launch a trn1.32xlarge instance (16 Trainium chips) and a p3dn.24xlarge (8 V100s). Then, I run 3 benchmarks: language pretraining with GPT2, token classification with BERT Large, and image classification with the Vision Transformer.

The results? Trainium is 2 to 5x faster, and 3 to 8x cheaper!

{% youtube VDKDmKFOJ5M %}
JavaScript Wonderland
Tags: beginners, javascript, codenewbie
Published: 2023-05-17 12:17:26

I’m into the JavaScript portion of my boot camp (it’s been a month since I started boot camp but I’m moving at a faster pace) HTML and CSS came to me easy, a trend I am seeing in this community 😮‍💨 This JavaScript is a different beast though. I am working with it everyday, attempting to re-wire my brain 🧠. I read somewhere that business-minded people struggle with JavaScript because they want the results without understanding the actual process. I feel like I am in my own Wonderland 🐛. So many functions, arguments, punctuation differences. One slight error causes my entire script to do nothing 🥴

My latest beast👹:

let now = new Date();
let h2 = document.querySelector(“h2”);
let days = [“Sunday”,”Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”];
let day = days[now.getDay()];
h2.innerHTML = ‘Today is ${day}’;
Magento vs other eCommerce Platforms: Why Magento Development is the Best Choice
Tags: webdev, magento, magentodevelopment, development
Published: 2023-05-17 12:08:31

Magento is an open-source eCommerce platform that is known for its flexibility, scalability, and performance. It is a popular choice for businesses of all sizes, from small startups to large enterprises.


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


If you are considering using Magento for your eCommerce store, then you should **[hire Magento developers](https://www.webcluesinfotech.com/magento-development-services)** to build and maintain your site. Magento developers have the expertise and experience to create a high-quality, secure, and reliable online store.

In this blog post, we will compare Magento to other popular eCommerce platforms and discuss why Magento development is the best choice for your business.

**What is Magento?**

Magento is an open-source eCommerce platform that is written in PHP. It is a powerful and flexible platform that offers a wide range of features, including:

- Product management
- Customer management
- Order management
- Shipping and payment integration
- Reporting and analytics
- Marketing tools

There are many reasons why Magento is considered to be the best choice for eCommerce development. Here are just a few:

**Flexibility:** Magento is a highly flexible platform that can be customized to meet the specific needs of any business. It offers a wide range of features and extensions that can be used to create a truly unique online store.

**Scalability:** Magento is a scalable platform that can grow with your business. It can handle even the most demanding traffic levels and can be easily upgraded to meet your changing needs.

**Performance:** Magento is a high-performance platform that delivers a fast and responsive shopping experience for your customers. It is optimized for search engines and can help you to improve your online visibility.

In addition to these advantages, Magento also has a large and active community of developers and users. This means that there is a wealth of resources available to help you get the most out of your Magento store.

If you are looking for an eCommerce platform that is flexible, scalable, and performant, then Magento is the best choice. To learn more about Magento development, or to hire Magento developers, please contact **WebClues Infotech**.

WebClues Infotech is a leading Magento development company with over 10 years of experience. They have a team of experienced and certified Magento developers who can help you to create a custom Magento store that meets your specific needs.

To learn more about their **[Magento development services](https://www.webcluesinfotech.com/magento-development-services)**, or to get a free quote, please contact them today.
What I learned about React Components
Published: 2023-05-17 12:02:46

When learning Javascript for the first time, all of our code to render information on a webpage was on one index.js file. While this is convenient for a small website, as more complex websites are built with lots of different pieces, it can be difficult to keep your code organized. 

React introduces a way to organize your data in a way that will allow the programmer to render independent and reusable pieces to the DOM. Components contribute to the functionality and presentation of our code, which becomes more and more helpful as our web applications become more complex. The simple goal of a React component is to contain a smaller section of code that describes what should be rendered to the 
DOM. 

In order to write a component, we must declare a function and name it starting with a capital letter. The capital letter differentiates javascript functions from react components, and must be used in order to render the components to the DOM. The return value for the function contains a snippet of JSX. The beauty of a React component is that if we then wanted to render this JSX multiple times, we could repeatedly call on this component so that is gets rendered with no variations. It is almost as if components are like functions for rendering sections of JSX to the DOM. 

An example of a component that would create a header tag is:

```
function Header(){
  return(
    <div>
      <h1>Hello</h1>
    </div>
  )
}

export default Header
```

When finished writing a component, we export it and import it to its parent component in which it will use in its return statement. It is common of react applications to contain one main component, typically called App.js, that renders the application's top-level components. 

An example of how a our Header component would be imported and returned in its parent (App) component is detailed below:

```
import Header from "./Header"

function App(){
  return(
    <div>
      <Header/>
    </div>
  )
}
```

What this translates to is:

```
function App(){
  return(
    <div>
      Hello
    </div>
  )
}
```

Overall, React components make a programmer's life much easier by organizing their code in a way that renders JSX through small sections of code that are independent, and reusable.
Component Re-renders
Tags: angular, typescript, frontend
Published: 2023-05-17 11:59:25

Hello everyone,
I am new to this community and I am facing an issue that a component re-renders every time when I navigate to other menus, The following is the order of component
Login component -> Home Component -> Child components.
The other components are children of a home component in the router module. Whenever I go to other menus the home component renders every time and the constructor and ngoninit is calling every time. Can anyone know why this is occurring?

Thanks.
A novel idea for (more) deterministic recommendation engines
Tags: recommendation, search, research
Published: 2023-05-17 11:20:59

The idea comes from the fact that the search engine of YouTube is pretty decent, but the recommendation one isn't.

If only we could used that search engine for recommendations...

That's where Algorithmic Reduction comes in. If we can express our recommendation problem as a search problem, then we can just use the search engine to get our recommendations.

What's a recommendation engine anyway? Basically (or mathematically), it's a function that takes a `User` and returns an ordered list of `Item`.

What's a search engine? Basically (or mathematically), it's a function that takes a `SearchQuery` and returns an ordered list of `Item`.

What if we could turn a `User` into a `SearchQuery`? Then the recommendation engine would simply be the composition of the transformer function and the search engine.

Given that most website collect statistics about their users, this shouldn't be such a daunting task. And given how search engines are usually more deterministic than recommendation engines, then even if that transformer function is a heuristic, this approach should give extremely satisfactory results.

Potential pitfalls:
* Recommendation engines nowadays have a very strong bias towards how recently an item has been visited by the user (you get more recommendations on the latest 15 videos you've watched). You might want to stray away from that tendency
SIMPLE WAYS TO ENSURE HIGH AVAILABILITY FOR APPLICATIONS HOSTED IN AZURE.
Tags: azure, tutorial, cloud, beginners
Published: 2023-05-17 11:08:10


**HIGH AVAILABILITY IN AZURE:** This refers to the capability of ensuring that applications and services hosted in the Azure cloud infrastructure are accessible and operational without significant downtime. It involves implementing strategies and utilizing Azure services to minimize service disruptions and maintain continuous availability.



**1. _Employ Azure Load Balancer_:** Azure Load Balancer distributes incoming network traffic across multiple virtual machines (VMs) or instances of your application. It helps achieve high availability by distributing the workload and automatically routing traffic to healthy instances in case of failures.

**2. _Deploy Azure Traffic Manager_:** Azure Traffic Manager enables you to distribute user traffic across multiple endpoints (such as different Azure regions or availability zones). It can perform load balancing, failover, or even prioritize traffic based on different routing methods, ensuring your application remains accessible and responsive.


**3. _Utilize Azure Availability Zones_**: Azure provides the concept of Availability Zones, which are physically separate data centers within a region. By deploying your application across multiple availability zones, you can ensure that even if one zone goes down, your application remains available in other zones.

**4. _Purchase Azure Application Gateway_:** Azure Application Gateway acts as a web traffic load balancer that provides layer 7 (application layer) load balancing and advanced application delivery features. It can handle application-level routing, SSL termination, and other features that improve the performance and availability of your application.

**5. _Utilize Azure Functions with App Service Plans_**: Azure Functions is a serverless compute service that allows you to run your application code in a scalable and event-driven manner. By using App Service Plans with Azure Functions, you can automatically scale your application based on demand, ensuring high availability during peak usage periods.

_**N/B**_: Remember that high availability also depends on proper design considerations, such as using redundant storage, configuring automatic backups, monitoring application health, and designing for fault tolerance.
State vs Props in React and how to utilize them
Published: 2023-05-17 11:03:01

Although state and props both serve different purposes, we cannot explore their differences without first acknowledging their similarities. For instance, both State and props can both be used to facilitate the passage and utilization of data within components. However, the differences are where we see how unique each tool can be. Some distinctions include;

- State is controlled within the component, whereas props are passed to the component
- State is a built in feature of react
- State can be changed in response to event handlers, and props do not change
- State is asynchronous, props are not as they are passed from parent to child components
- Props allow us to make components reusable by allowing certain components to receive data

When it comes to utilizing each of these tools it is good to remember that you can update the state by utilizing the setState method which can take a new state object or a callback function as its argument. In a functional component, the state update function given by useState can be used to alter the state value. And with props as we’ve mentioned they are great for passing data from the parent to the child by means of propName={propValue}, but always remember to define the prop in the parent element first.
STEPS TO CREATE AN AZURE COMPUTE GALLERY, CAPTURE THE IMAGE OF A VM AND STORE IN A COMPUTE GALLERY.
Tags: beginners, tutorial, azure
Published: 2023-05-17 10:44:33

Before you begin with this exercise, you must have a virtual machine running already. If you do not have a vm yet, please see previous videos to guide you on how to deploy a virtual machine.

**STEP 1:**
a. Go to your Azure portal and search for "Azure compute galleries" and click on it.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7d6gbam3en22jul1mqas.png)

**STEP 2:**
a. Click on "Create"
b. Choose your resource group, Give it a name of your choice. Leave every other thing as default then click on review+create" and once validation passes, click on "create"

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

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

**STEP 3:**
a. Click on "Go to resource"
b. Go back to your Azure Home page and click open your virtual machine.
c. Click on Capture" 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioj2d57ox0emz46k4w29.png)

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

**STEP 4:** Fill in the columns
a. Share image to azure compute gallery column should be YES
b. Target azure compute gallery column should be the name you gave your gallery.
c. Under Target vm image definition, Click on "Create new", give it a name and click on a Ok"
d. Version number column should be 0.0.1
e. Change your Target region replica to 2 so your image can be backedup in other regions. Here, i used East US and West uS
f. Change your default replica  count to 2 so it can match the target region.
g. Click on review+create

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

**STEP 5:**
a. After the validation has passed, Click on Create"

**STEP 6**
a. After deployment is complete;
b. Click on "Go to resource"
c. Go back to your compute gallery to see the captured image and also see that it's in the gallery.

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

N/B Deployment will take a while because it's  more than 1 region and the vm has to be generalised  so the admin username and password  can be added for easy access.

!!!
#1 Builder Pattern In Typescript
Published: 2023-05-17 10:38:30

**Định nghĩa**: 
Builder Pattern 

> phân tách một đối tượng phức tạp thành các thành phần đơn giản, sau đó tạo chúng 1 cách riêng biệt theo các nhu cầu khác nhau. Và sau cùng là xây dựng lại 1 đối tượng phức tạp

Để dễ hiểu hơn chúng ta lấy 1 ví dụ: 

```
class User {
  constructor(
    public username: string,
    public sex: string,
    public age: number,
    public photo: string,
    public email: string
  ) {}
}
```
Chúng ta có 1 Class User và chúng ta khởi tạo 1 đối tượng User với từ khoá New

```
const user = new User('john','male',18,'photo','john@gmail.com')
```
Bằng cách này chúng ta vẫn có thể tạo ra 1 đối tượng user nhưng **trong quá trình tạo chúng ta cần chú ý đến thứ tự các tham số được truyền vào, cần truyền đủ các tham số và đúng kiểu dữ liệu của chúng**.

Để giải quyết vấn đề trên thì ta có Builder Pattern.

```
class UserBuilder {
  public username!: string;
  public sex!: string;
  public age!: number;
  public photo!: string;
  public email!: string;

  setUserName(name: string) {
    this.username = name;
    return this;
  }

  setSex(sex: string) {
    this.sex = sex;
    return this;
  }

  setAge(age: number) {
    this.age = age;
    return this;
  }

  setPhoto(photo: string) {
    this.photo = photo;
    return this;
  }

  setEmail(email: string) {
    this.email = email;
    return this;
  }

  build() {
    return new User(this.username, this.sex, this.age, this.photo, this.email);
  }
}

```
Với cách này chúng ta có thể xây dựng lại 1 đối tượng phức tập theo ý muốn của chúng ta.

```
const bytefer = new UserBuilder()
  .setAge(30)
  .setSex("male")
  .setEmail("bytefer@gmail.com")
  .setPhoto("https://***.com/**")
  .setUserName("Bytefer")
  .build();
```
Kết quả: 

`User: {
  "username": "Bytefer",
  "sex": "male",
  "age": 30,
  "photo": "https://***.com/**",
  "email": "bytefer@gmail.com"
} `


Nếu ai dùng Nestjs rồi thì thấy cái này quen quen đúng không.
Git Config
Tags: webdev, javascript, programming, tutorial
Published: 2023-05-17 10:36:00

Git is a version control system that allows you to configure various settings. Here are some commonly used Git configuration settings:

1. **Username and email**: Set your name and email address that will be associated with your Git commits.
   ```
   git config --global user.name "Your Name"
   git config --global user.email "your.email@example.com"
   ```

2. **Editor**: Configure the default text editor for Git commit messages.
   ```
   git config --global core.editor "editor-name"
   ```

3. **Branch settings**: Set the default branch name, behavior, and tracking.
   ```
   git config --global init.defaultBranch "branch-name"

   ```

4. **Credential helper**: Configure how Git handles authentication and credential storage.
   ```
   git config --global credential.helper "helper-name"
   ```
Wednesday Links - Edition 2023-05-17
Tags: java, jvm, formatting, springboot
Published: 2023-05-17 10:35:36

Testcontainers support in Spring Boot 3.1 (2 min)📦
https://github.com/spring-tips/development-containers-with-docker-compose-and-testcontainers/

Hidden and Not-So-Hidden Gems In Java 20 (21 min)💎
https://foojay.io/today/hidden-and-not-so-hidden-gems-in-java-20/

Formatting Inlined @value in Javadocs (7 min)📜
https://www.javaspecialists.eu/archive/Issue308-Formatting-Inlined-value-in-Javadocs.html

Introducing JUnit 5 FormattedSource (6 min)📜
https://mikemybytes.com/2023/05/03/introducing-junit5-formattedsource/

Spring Transaction and Connection Management (6 min)🗃️
https://vladmihalcea.com/spring-transaction-connection-management/
NFT Component Card | Frontend mentor
Tags: webdev, html, css, beginners
Published: 2023-05-17 10:19:39

This was a particularly challenging task for me however it was still fun with a sense of accomplishment once it was done.

I approached this project with a pen and a piece of paper. First drawing it out and visualising it by breaking the different elements down into sections. This gave me a better sense of how to approach this challenge. Once in Visual studio I started off with the necessary boilerplate and links (fonts & CSS)

Styling the elements was pretty simple with the addition of span elements I've made use of to get the desired colour result.

Once I got to the Ethereum section I ran into my first hurdle where the icons and text weren't lining up, horizontally. Playing around with a solution I eventually came to figure out that flexbox - align items: center worked for me. My next hurdle was creating the overlay for the main image. I've never done this before so it was new to me and took a bit of research to figure out. W3schools was where I found my solution **(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade)**

Instead of copy/pasting the solution. I tried to understand what exactly it meant and was doing to get a better understanding of how it worked. It was fairly simple to implement in my code and it gave me a smile once I figured it out.

Overall I am happy with the result however I am concerned with the amount of code that is used to produce the result. I'm sure there are much better ways to write efficient code. Are there any areas where I can improve on this within my current code? I would love to hear your thoughts and suggestions.

DevDan
Why Trusting an Airline Ticketing Company Can Save You Time and Hassle
Published: 2023-05-17 10:12:58


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpn2sfb1pacrec5vqy1z.jpg)
Are you sick and weary of wasting hours looking for the best [airfares](ukairfares.co.uk)? Are you frustrated with trying to navigate through complicated booking systems and travel itineraries? Look no further, as trusting an airline ticketing company can save you time and hassle. These businesses not only offer knowledgeable assistance and guidance, but they also give you peace of mind knowing that your travel plans are in capable hands. It's up to discuss the many advantages of using a trustworthy airline ticketing service for all your travel requirements in this blog post. Get ready to take a seat, unwind, and let the experts handle everything!
Selecting an airline ticketing provider is one of the most crucial decisions when anyone of you wants to travel. Nowadays, there are so many possibilities on the market that it can be overwhelming and perplexing to choose a reliable business that offers reasonable airfares and keeps its commitments. 
This is where opting for a UK airfare company that has established its reputation over time becomes advisable. By working with such an established travel agency, you can leverage their expertise and benefit from exclusive discounts not easily accessible by individuals who book flights themselves. Moreover, experienced agents at reliable ticketing services help maintain up-to-date information on flight schedules and changes which saves travelers time spent poring over multiple airline websites or waiting on hold for customer service representatives from individual airlines. 
Not only will this save precious time but also prevent hassles associated with last-minute cancellations or emergencies by providing assistance around-the-clock through dedicated support centers promptly addressing any issues encountered during travels. Ultimately booking your tickets through a reputable travel agency goes beyond merely acquiring a plane seat; It's about receiving exceptional assistance throughout all stages of travel planning - allowing you to rest assured knowing every detail has been accounted for meticulously, leaving nothing to chance!