teleren/devto huggingface dataset:
Hackerrank Angry Professor Solutions
Tags: solution, hackerrank, python
Published: 2023-03-06 12:14:27

A Discrete Mathematics professor has a class of students. Frustrated with their lack of discipline, the professor
decides to cancel class if fewer than some number of students are present when class starts. Arrival times go
from on time (arrivalTime 0) to arrived late (arrivalTime > 0).
Given the arrival time of each student and a threshhold number of attendees, determine if the class is
cancelled.

## Python
```
def angryProfessor(k, a):
    students = 0
    for i in a:
        if i <= 0: students += 1
    if students < k: print("YES")
    else: print("NO")

angryProfessor(3,[-1,-3,4,2])
```
## JavaScript

```
function angryProfessor(k, a) {
  let students = 0;
  for (let i = 0; i < a.length; i++) {
    if (a[i] <= 0) {
      students++;
    }
  }
  if (students < k) {
    console.log("YES");
  } else {
    console.log("NO");
  }
}

```
## C++
```
#include <iostream>
using namespace std;

void angryProfessor(int k, int a[], int n) {
  int students = 0;
  for (int i = 0; i < n; i++) {
    if (a[i] <= 0) {
      students++;
    }
  }
  if (students < k) {
    cout << "YES" << endl;
  } else {
    cout << "NO" << endl;
  }
}

```
Migrating from ASP.net to PHP Laravel
Tags: laravel, aspdotnet, sqlserver
Published: 2023-03-06 12:13:34

Recently, we had a project to migrate from ASP.NET to Laravel. During the process, we found that the information on the internet was scattered and disorganized. At times, we had to check the Laravel framework source code to truly understand what had gone wrong. Therefore, this post serves to record the issues we encountered during the migration and how we solved them.

As we were only migrating the backend language while keeping the SQL Server database, we did not want to go too deep into ASP.NET. Consequently, there is a high chance that we may have misinterpreted the ASP.NET information presented below. Please let us know if we have.

First off, there are differences in the SQL Server database schema compared to the conventional MySQL database used by Laravel.

Take the user table as an example. The default `AspNetUsers` table uses the column "Id" (than "id") as its primary key, which is stored as a 128-bit GUID string by default. To model the `AspNetUsers` table, we had to set the primary key and cast its type to a string in the user model, like so:

`Models\User.php`
```php
class User extends Authenticatable
{
    public $table = "<your-schema>.AspNetUsers";
    protected $primaryKey = 'Id';
    protected $keyType = 'string';
```

Without specifying the `$primaryKey`, you will encounter an error like the one below, as Laravel tries to inject the instance model using `id`.
  
```
Missing required parameter for [URI: products/{record}/edit] [Missing parameter: record].
```

If without specifying the the `$keyType` to string, you will encounter an error like the one below.
```
SQLSTATE[22018]: [Microsoft][ODBC Driver 18 for SQL Server][SQL Server]Conversion failed when converting the nvarchar value 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' to data type int. (Connection: sqlsrv, SQL: select top 1 * from [<your-schema>].[AspNetUsers] where [Id] = 5637154)
``` 

We are using SQL Server via a Docker image. To access the SQL Server, we have to set the `.env` and `config/database.php` files.

```.env
DB_CONNECTION=sqlsrv
DB_HOST=127.0.0.1
DB_PORT=1433
DB_DATABASE=XXX
DB_USERNAME=XXX
DB_PASSWORD=XXX
```

`config/database.php:`
```php
'trust_server_certificate' => env('DB_TRUST_SERVER_CERTIFICATE', 'true'),
```

To test if the above settings are correct, you can try running tinker and pulling user data from the database. If that works, you are good to proceed with your next step.

This is a rather short blog, but we hope that it is useful for anyone who is looking to migrate from ASP.NET to Laravel.
F/OSS Spotlight: 📑 VuePress
Tags: vue, webdev, javascript
Published: 2023-03-06 12:11:15

Building a static site? If you like and work with Vue, you should check out [VuePress](https://vuepress.vuejs.org/) ([code](https://github.com/vuepress/vuepress-next)).

While newer tooling like `vitepress` may get all the "press" lately, VuePress is still a great stable choice for building good looking documentation sites:

![VuePress Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juubl7fikt2rodpow2lz.png)

One of the best indicators for quality projects is a "why" page, and [VuePress documentation describes exactly why you should use it versus other solutions](https://v2.vuepress.vuejs.org/guide/#why-not).

If you're impatient and want to get started away:

```
mkdir vuepress-starter
cd vuepress-starter
pnpm init
pnpm add -D vuepress@next @vuepress/client@next vue
vuepress dev docs
```

(NOTE: definitely use [`pnpm`](https://pnpm.io/) so you can dedup packages locally!)

And if you're *not* impatient, check out the official [Getting Started guide](https://v2.vuepress.vuejs.org/guide/getting-started.html).

The ecosystem for VuePress is somewhat smaller than other site generators (for example Gatsby), but they have their own [awesome list](https://github.com/vuepress/awesome-vuepress/blob/main/v2.md) which is full of goodies.

Vue is worth choosing for it's power and simplicity, and VuePress is the more opinionated static site generator that's built with Vue at the core.

This was [originally posted on AWSM FOSS](https://awsmfoss.com/vuepress)
How to Develop and Deploy Django Tailwind Blog and Developer Portfolio Website
Tags: django, python, webdev, portfolio
Published: 2023-03-06 12:01:51

A portfolio website is must for any developer as it showcases the developer's projects and help him to organize his work at a place.

I created an **Developer Tailwind Portfolio Website** using Python's Django Framework, HTML, CSS and JavaScript. This website not only includes the section to showcase your projects but also has a dynamic blog page therefore its a Developer Portfolio  + Blog Website.


![django-tailwind-css-portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p73rf73hob9dq6v004b9.png)

## An Overview of Django Tailwind CSS Portfolio
**"Django Tailwind Blog"** is a developer blog and portfolio website built using **Django** and **Tailwind CSS**. It includes several pages such as **Home, About, Contact, Blog, Projects, Categories, and custom 404 pages**.

The project features a clean and modern design that is fully responsive and optimized for performance. It includes a powerful admin interface for managing the content, and is easy to customize and deploy to a production environment.

## Technologies used
1. Python (Django)
2. HTML
3. Tailwind CSS
4. JavaScript

## Pages
- **Home:** The landing page of the website, which displays a brief introduction and links to other pages.
- **About:** A page that provides information about the site owner, their background, and skills.
- **Contact:** A page that contains a contact form for visitors to send messages to the site owner.
- **Blog:** A page that displays a list of blog posts in reverse chronological order, with links to individual post pages.
- **Blog Post:** A page that displays the content of a single blog post, including the title, author, date, and content.
- **Projects:** A page that displays a list of portfolio projects, with links to individual project pages.
- **Project:** A page that displays the details of a single portfolio project, including the title, description, date, and any relevant images or links.
- **Categories:** A page that displays a list of blog post categories, with links to filtered lists of posts for each category.
- **Custom 404 Pages:** Custom error pages that display when a user navigates to a non-existent page or encounters an error.

## Website Admin Dashboard
Using admin dashboard you can easily create, update and delete the blogposts. The admin dashboard uses WYSIWYG editor, TinyMCE to write your posts.

More information about this project can be found on my **[GitHub](https://github.com/ashish-makes)** Profile.

**Project Link:** [Django Tailwind CSS Portfolio](https://github.com/ashish-makes/django-tailwind-blog)
**LinkedIn:** https://www.linkedin.com/in/ashish-makes/
**GitHub:** https://github.com/ashish-makes/
S'Monday 😪 Doug Linder
Tags: beginners, codenewbie, discuss, motivation
Published: 2023-03-06 12:00:00

From the Sunday scaries to the Monday...ughs, it can be hard to start the week off in in a good state of mind. So, if you're looking for a little motivation to tackle the week ahead, we gotchu. 

From programming wisdom to career advice, we've compiled a collection of quotes that will make you think, make you laugh, maybe make you roll your eyes. 

This week's programming wisdom comes from Doug Linder:

> A good programmer is someone who always looks both ways before crossing a one-way street.



Share your quotes, inspirational memes, words of wisdom, or anything else to help us brave the day!
Python scripts fails to copy the website and translating text into Hindi on my Terminal
Tags: selenium, googletranslation, panda, python
Published: 2023-03-06 11:55:00

Hi team

I need some help with my script, the script does two things, first scraps the webiste. In this instance i am using selenium to scrap the site and this works. But when i tried to translate what the content of the site(title course and name) From english to Hindi using data frame its failes. See below exceptions and stuck since this morning;

 

>                                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>   File "C:\Users\Zux\PycharmProjects\ClassCentral\ClassCentral\Lib\site-packages\googletrans\client.py", line 182, in translate
>     data = self._translate(text, dest, src, kwargs)
>            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>   File "C:\Users\Zux\PycharmProjects\ClassCentral\ClassCentral\Lib\site-packages\googletrans\client.py", line 78, in _translate
>     token = self.token_acquirer.do(text)
>             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>   File "C:\Users\Zux\PycharmProjects\ClassCentral\ClassCentral\Lib\site-packages\googletrans\gtoken.py", line 194, in do
>     self._update()
>   File "C:\Users\Zux\PycharmProjects\ClassCentral\ClassCentral\Lib\site-packages\googletrans\gtoken.py", line 62, in _update
>     code = self.RE_TKK.search(r.text).group(1).replace('var ', '')
>            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> AttributeError: 'NoneType' object has no attribute 'group'


// code to implement scraping the website using selenium webdrive and pandas.
`from googletrans import Translator
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions
import pandas as pd
import urllib.request as urllib2
import time

chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument('--headless')
chrome_options.add_argument("window-size=1920,1080")
driver = webdriver.Chrome(options=chrome_options)
url = "https://www.classcentral.com/collection/top-free-online-courses"
driver.get(url)

translator = Translator()

try:
    while True:
        # wait until button is clickable
        WebDriverWait(driver, 1).until(
            expected_conditions.element_to_be_clickable((By.XPATH, "//button[@data-name='LOAD_MORE']"))
        ).click()
        time.sleep(0.5)
except Exception as e:
    pass

all_courses = driver.find_element(by=By.CLASS_NAME, value='catalog-grid__results')
courses = all_courses.find_elements(by=By.CSS_SELECTOR, value='[class="color-charcoal course-name"]')

df = pd.DataFrame([[course.text, course.get_attribute('href')] for course in courses],
                  columns=['Title (eng)', 'Link'])

df['Title (hin)'] = df['Title (eng)'].apply(lambda x: translator.translate(x, dest='hi').text)

print(df)`
The Easiest Way to Install Node.js on WSL, Mac & Ubuntu
Tags: node, tutorial
Published: 2023-03-06 11:49:53

Let's have a look at the easiest way to install Node.js on your WSL, Mac, or Ubuntu system.

We're going to be using a tool called **[nvm](https://github.com/nvm-sh/nvm)**.

## Video Tutorial
If you prefer, you can watch my 4-minute video on installing Node.js instead:

{% youtube R73JI8rwkKc %}

## How to Install Node.js on Your WSL, Mac or Ubuntu System

1. Go to the [GitHub page for nvm](https://github.com/nvm-sh/nvm).
2. Copy and paste the **install script** into your command line. At the time of writing, 0.39.3 is the latest version:
    ```sh
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
    ```
3. Hit **Enter**. Once installation is complete, close and re-open your terminal window.
4. Now that **nvm** is installed, you can install the latest version of Node.js by typing:
    ```sh
    nvm install node
    ```
5. That's it! You should now be able to type `node --version` and see that the latest version is installed.

Happy coding 😎

## [Enrol Now 👉 JavaScript DOM Crash Course](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)
You can find a complete course on the JavaScript DOM using the link below 👇

[https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)

![Course Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svof0kxvtm28c5ki4ios.jpg)
Make the ALX SE 0x01. Emacs project a breeze with these easy-to-follow steps!
Published: 2023-03-06 11:48:39

// I will advice you to use the Webterm terminal in the sandbox
// Don’t include type any where you see type echo , just copy echo & the command
// You might have to click on start a new test if you get an error while checking your code
// The done Botton turns green after a successful task so you don’t need to click on it!

Task 0
Navigate to /root and create a directory named 0x01_emacs

cd root & hit enter
mkdir 0x01_emacs & hit enter
got back to the project page to click on Check your code

Task 1 - Opening

cd root & hit enter
cd 0x01_emacs & hit enter
echo C-x C-f > opening & hit enter
cat opening & hit enter to see your code

got back to the project page to click on Check your code

Task 2 - Saving

cd root --> hit enter
cd 0x01_emacs & hit enter
echo C-x C-s > saving & enter
cat saving & hit enter to see your code
got back to the project page to click on Check your code

Task 3 - Cutting

cd root & hit enter
cd 0x01_emacs & hit enter
type echo C-k > cutting & hit enter
cat cutting & hit enter to see your code
got back to the project page to click on Check your code

Task 4 - Pasting

cd root & hit enter
cd 0x01_emacs & hit enter
type echo C-y > pasting & hit enter
cat pasting & hit enter to see your code
got back to the project page to click on Check your code

Task 5 - Searching

cd root & hit enter
cd 0x01_emacs & hit enter
type echo C-s > searching & hit enter
cat searching & hit enter to see your code
got back to the project page to click on Check your code

Task 6 - Undoing

cd root & hit enter
cd 0x01_emacs & hit enter
type echo C-x u > undoing & hit enter
cat undoing & hit enter to see your code
got back to the project page to click on Check your code

Task 7 - Quitting

cd root & hit enter
cd 0x01_emacs & hit enter
type echo C-x C-c > quitting & hit enter
cat quitting & hit enter to see your code
got back to the project page to click on Check your code

Goodluck 👍🏼
Special thanks to Kasiera Bertha and Michael Anderson
DOM vs Virtual DOM
Tags: webdev, javascript, react
Published: 2023-03-06 11:47:31

##⏩ What is DOM❓

- **DOM** stands for => **D**ocument **O**bject **M**odal

- **DOM** is a **Programming Interface** for the HTML document that allows us to create, change, add, or remove elements from the HTML document.

- **DOM** is represented as a **tree** data structure.

![DOM tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r3qhr1x14o0gjo6qell.png)

---

🤔 At this point you may be wondering, and ask yourself **Why can't update HTML document directly.. Why DOM is Required ❗❓**
✅ We need DOM because <u>JS doesn't natively understand HTML document.</u> So the browser creates DOM. therefore we could say that **DOM is an API that represents the same HTML document but in different format (object format).** 
For example: JS can't understand the `<h1></h1>` tag in HTML documents ,it only understand h1 object in DOM.

### Updating DOM is Expensive, WHY ❗❓
✅ Whenever DOM changes it causes browser to run two expensive operations: [**Reflow and Repaint**](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg)

---

Because of how updating DOM is expensive - React is using **Virtual DOM.**

##⏩ What is Virtual DOM❓

React uses virtual DOM which is a **lightweight copy of the actual DOM**, the only difference is the ability to directly change the layout of the document.

### How DOM updates in React❓

- On the first run, both virtual DOM and real DOM are created.

- **Whenever state changes:**

   - 
React creates a new virtual Dom and compare it with the previous one.

   - 
The compression is done by **Diffing Algorithm.**

  -  
After compering react creates a new virtual Dom with the changes.

  - 
Then <u>**React updates the real DOM without rendering the entire DOM**</u>, and this is how virtual DOM is helping to enhance performance.

- This entire process of transforming changes to the real DOM is called [**Reconciliation**](https://www.geeksforgeeks.org/reactjs-reconciliation/).

### 🤔 Suppose we have new data similar to the previous one?
✅ In that case React compares previous and new structures and sees that it has no change, so nothing gets rendered to the Browser. This is how the Virtual DOM is helping to enhance the Browser performance.

### 🤔 Is Virtual DOM the only way to reduce costly DOM operations?
✅ Not necessarily, other frameworks like ember.js, angular, and svelte uses different approaches to solve the very same problem.

---

###⏩ Recap:

![DOM vs Virtual DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03ilzb6s27r8tglqu2j5.png)

---

###⏩ Learn Further:
https://www.geeksforgeeks.org/reactjs-virtual-dom/
https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg
https://www.geeksforgeeks.org/reactjs-reconciliation/
Free course on Software Architecture - part 3
Tags: beginners, programming, architecture
Published: 2023-03-06 11:43:57

Yesterday I have published a third episode of my "Software architecture for beginners" course.

Today we have explored two main benefits of 3-layer architecture (apart from simplicity) - testability and extendability.

This one got a bit controversial, as I wasn't concentrating on some of the code practices, trying to demonstrate other things instead. Well, it's even better, because I have some more interesting things to discuss.

So here's what's coming next:
👉 How to add authentication (using roles, finally)?
👉 Is it OK to use __dict__ to convert object to dictionary
👉 Why I didn't inject SqliteStorage as a dependency?
👉 Multithreading awareness
👉 Is it OK to use "handlers" in Main?

Those are questions from people who saw the course already - and you can ask your questions too!

{% embed https://www.youtube.com/watch?v=SPtVxOgg7A0 %}
switching toggle button on and off using template
Tags: angular, html, buttton
Published: 2023-03-06 11:41:12

Hi team

I need some help with my logic below, basically i am answering this instruction below using angular js to create switch toggle button in Angular.

//instructions for the task.

> We provided some simple Angular template code. Your goal is to modify the component so that you can properly toggle the button to switch between an ON state and an OFF state. When the button is on and it is clicked, it turns off and the text within it changes from ON to OFF and vice versa.

// code solution but its not showing any UI to switch on and off.
// @ts-ignore
`import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-area',
  template: `<label class="ng-toggle-switch">
<div class="ng-toogle-switch-button"[ngStyle]="buttonStyle">ON</div>
  <ng-container *ngIf = "labels">
  <span class="ng-toggle-switch-label ng-toggle-left" [ngStyle] = "labelStyle" *ngIf = "toggled"
  </ng-container>
  </label>`,
  styles: []
})

export class MainAppComponent implements OnInit {
  // code goes here
  ngOnInit() { 
    
  }
}`
Pull sooner and merge faster in VS Code
Tags: vscode, tutorial, programming, git
Published: 2023-03-06 11:35:27

🔑 The key to faster merging is to pull sooner! Here is how you can make sure you’re always up to date with your remote and reduce the chances of conflicts.

**TLDR**;

 {% embed https://www.youtube.com/shorts/etLkpLtI8_Y %}

*** 

1️⃣ If you haven’t already, go to the VS Code marketplace and install [GitLive](https://marketplace.visualstudio.com/items?itemName=TeamHub.teamhub) extension.


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

2️⃣ Once you click on the GitLive icon in the activity bar, you'll get the overview of all branches ahead, in terms of commits, of your current branch, and changes on those branches, grouped by the author.


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

3️⃣ Your tracking and base branches will show at the top of the tree. If you're behind you’ll see how many commits there are to pull and you can open up the branch to review the changes.


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

***

That's it for now, thanks for reading and let us know what you think in the comments!
Views
Tags: opengauss
Published: 2023-03-06 10:57:33

A view is a virtual table, not a base table. A database only stores the definition of a view and does not store its data. The data is still stored in the original basic table. If data in the base table changes, the data in the view changes accordingly. In this sense, a view is like a window through which users can know their interested data and data changes in the database.

**Syntax**

**·** Create a view

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

**·** Delete a view

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

**Parameter Description**
**· TEMP | TEMPORARY**

Creates a temporary view.

**· view_name**

Specifies the name of the view to be created. It is optionally schema-qualified.

Value range: a string. It must comply with the identifier naming convention.

**· column_name**

Specifies an optional list of names to be used for columns of the view. If not given, the column names are deduced from the query.

Value range: a string. It must comply with the identifier naming convention.

**· query**

Specifies a SELECT or VALUES statement that will provide the columns and rows of a view.

**Examples**

Create the customer_t1 table. The data in the table is as follows:

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

Create a view in the customer_t1 table. The view selects only several columns from the customer_t1 table.

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

You can query the CUSTOMER_VIEW view in the same way as querying a table.

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

The results are as follows:

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

After using the view, you can delete it to release space.

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