teleren/devto huggingface dataset:
5 Best Portfolio Website Builders of 2022
Tags: website, builders, portfolio, beginners
Published: 2022-08-21 09:09:08

If your business doesn’t have a website yet, you can try the Best Portfolio Website Builders we’ve put together to build your business.

## Here are 5 best portfolio website builders of 2022

### 1. Zyro

Zyro is an innovative website builder that uses a visual drag & drop editor to easily build high-quality mobile-ready website in few minutes. With Zyro, you will be able to set-up complete, custom site in no time at all even if you have zero designing experience.
https://zyro.com/

### 2. Pixpa

Pixpa is website builder designed specifically for creators, artists, designer, illustrators, photographers, graphic designer and other professionals. Pixpa enables you to design a beautiful portfolio website by easily drag & drop your content.
https://www.pixpa.com/

### 3. Weebly

Weebly is a great option if you’re looking to create a professional portfolio website for free with amazing templates, a drag & drop editor and powerful tools like built-in online store functionality, weebly is a breeze to use.
https://www.weebly.com/

### 4. WordPress

WordPress is a powerful and flexible tool to build a website. You can create a beautiful websites, bogs and eCommerce stores. It comes with thousand of free & premium themes for you to use, along with intuitive plugs-in to supercharge your website.
https://wordpress.com/

### 5. Wix

Wix is one of the world’s most popular tool to build websites, blogs, portfolios and eCommerce stores. If you want to create a high-quality online portfolio of your work and you want it to be easy & fun, then wix is a perfect place for you.
https://www.wix.com/

Originally post: [5 Best Portfolio Website Builders of 2022](https://digital.pijari.com/2022/06/29/blog/5-best-portfolio-website-builders-of-2022/
)
Our First Week Experience Working On A Project As A Team At Techathon.
Published: 2022-08-21 09:08:28

This week on techathon my team and I have been tasked to build a clone piggvest landing page.The project is basically about cloning piggyvest landing page and with some features like the signup page, login page with validation.Piggvest is an online saving and investing platform where you save money and  get interest or earn when you save with any of their plans.

This page is built with Html, Css, and JavaScript, the font we are working with is DM+Sans,tools to be used are figma, photoshop, illustrator.

The navbar to be used is a bordered navbar and have overable link and most importantly it will be a responsive website meaning it's going to be accessible on every device. The navbar contain (logo, save, invest, stores, FAQs, sign in, create free account) 
Note: sign in and create free account are buttons. Other buttons are sign in, radio button, download button for android and iphone users to download the app. 

The size of the logo is width 225 and height 40 and the size are 400, 500, 700.
 
The color we're going to use in building the page are navy blue, white, and black.

I will keep you guys updated on our progress, thank you for reading through.
Shalom.
5 requirements before you start with ReactJS
Published: 2022-08-21 09:01:18

**1. HTML, JavaScript & CSS**


First prerequisites to start with react are Html, CSS and JavaScript. If you are good with fundamentals of this languages then you are good to go with react. You can't do better in react if you don't know JavaScript. JavaScript is a vast language and fun to learn. You will get better and better when you practice continuously. 
So make sure that you clear your concept of JavaScript and know its fundamentals, after that move toward the advance version of ECMAJavascript5 and ECMAJavascript6.

- Start with variables and its types.
- learn how to apply conditions and loops.
- Event handlers.
- Check the types of functions.
- Dom Manipulation according to conditions and variables.

**2. Package Manager (NPM)**

You can't start without installing Nodejs. There are many small software packages you need to install when you start working with react and for those Node helps you to do this.
Nodejs provide the NPM(node package manager) which helps you to install multiple required software and to create build of your project. Also it keeps track of your software. You can use Nodejs or Yarn.

**3. CLI (Command Line Interface)**

Everything in React you will be doing with the help of CLI (Command-line interface). Installing packages, using NPM, creating a react app, running react application, and a lot of things so you really need to make a habit of using CLI. 

**4. Problem Solving Skills (Debugging)**

Make sure you’ve learned to solve problems with JavaScript before learning what is simply a view framework. Many freshers can build React applications using tutorials and patterns they’ve learned from courses and tutorials, but can’t solve a basic coding challenge.
If you, or anyone else reading this, want to be taken seriously as a professional JavaScript engineer, I suggest learning as much as you can about the underlying language before learning a framework.

**5. jQuery (Optional)**

It simplifies common challenges of JavaScript. Just having an overview of how a library works can mitigate stuff. Its easy to use and easy to understand.
React & Redux Multifunctionality Todo app with fullyresponsive and attractive UI !!!
Tags: react, redex, javascript
Published: 2022-08-21 08:57:00


> ## **This application is build on React and redux. Consist of different functionality like**

Add priority to the task based on your needs like urgent!!, 
   onhold and completed.

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

Filter the todos and sort according to the priority like completed, urgent, onhold, new to old , old to new, etc.


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

Pagination for better experience when number of todos are high, on single page only 5 todos can be rendered. 


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

It is fully responsive from extra large devices to extra small devices like galaxy fold.


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

Like all other todo app it is also integrated with other features like create, edit, delete and search todos, functionality.

**You can get the source code from my github repo:**

[source code](https://github.com/anandpothraj/todo)

**Also the website is live and hosted on netlify:**
[click here to see website](https://anand-todo.netlify.app/)

_Please follow my github account and dev account to get wonder projects in future._
N-Queen : Check if possible to place in NxN
Tags: javascript, leetcode
Published: 2022-08-21 08:56:00

```

const N = 4;

function printSolution(board) {
  console.log(board);
}

function isSafe(board, row, col) {
  for (let i = 0; i < col; i++) {
    if (board[row][i] == 1) return false;
  }

  for (i = row, j = col; i >= 0 && j >= 0; i--, j--)
    if (board[i][j]) return false;

  for (i = row, j = col; j >= 0 && i < N; i++, j--)
    if (board[i][j]) return false;

  return true;
}

function solveNQUtil(board, col) {
  if (col >= N) return true;

  for (let i = 0; i < N; i++) {
    if (isSafe(board, i, col) == true) {
      board[i][col] = 1;
      if (solveNQUtil(board, col + 1) == true) return true;
      board[i][col] = 0;
    }
  }

  return false;
}
function solveNQ() {
  let board = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
  ];

  if (solveNQUtil(board, 0) == false) {
    console.log("Solution does not exist");
    return false;
  }

  printSolution(board);
  return true;
}


console.log(solveNQ());




```
Data Engineering 101 : Introduction to Data Engineering
Tags: data, dataengineering, beginners
Published: 2022-08-21 08:53:00

Data engineering is basically the process of collecting, sorting, processing and analyzing large amounts of data at scale.
This is usually done by data engineers.
Their job is to make quality data available from various resources to the right people so it can be used efficiently.

##Data engineering life cycle
- Collecting, gathering, cleaning, and pre-processing relevant data from various sources.
- Building and designing data platforms, data stores, data lakes, repositories.
- Querying and analyzing this data.
- Performance monitoring, evaluation, optimization and fine tuning of the process and systems

##Responsibilities of a data engineer
- Ingest data from different sources
- Develop, build, test, and maintain architectures such as databases and data pipelines to process and handle massive amounts of data
- optimize the databases and feature engineering.

Python, R, SQL are the most` used programming languages by data engineers. As a data engineer you should understand ETL tools, how data warehouses and data lakes work and also NoSQL databases.

Lastly a data engineer should have knowledge on how to work with the various cloud services _AWS_, _Microsoft Azure_ or _Google Cloud Platform_. Knowledge in BI tools is also a plus, helps data engineers to be able to create interactive dashboards
Dependency Inversion Principle in TypeScript
Tags: typescript, javascript, cleancode, beginners
Published: 2022-08-21 08:45:09

> Depend upon abstractions, not concretions.

In our applications we can differentiate between two types of classes:

- **Low level classes** which do operations like reading from a database or saving a file.
- **High level classes** which implement the business logic and use those low level classes.

What this principle proposes is that high level classes depend on interfaces instead of concrete implementations. This is easier to understand with an example.

---

In the following bad example we have the `OrderService` class that saves orders in a database. The `OrderService` class depends directly on the low level class `MySQLDatabase`.

If in the future we wanted to change the database that we are using we would have to modify the `OrderService` class.

```ts
class OrderService {
  database: MySQLDatabase;

  // constructor

  save(order: Order): void {
    if (order.id === undefined) {
      this.database.insert(order);
    } else {
      this.database.update(order);
    }
  }
}

class MySQLDatabase {
  insert(order: Order) {
    // insert
  }

  update(order: Order) {
    // update
  }
}
```

We can improve this by creating an interface and make the `OrderService` class dependant of it. This way, we are inverting the dependency. Now the high level class depends on an abstraction instead of a low level class.

```ts
class OrderService {
  database: Database;

  // constructor

  save(order: Order): void {
    this.database.save(order);
  }
}

interface Database {
  save(order: Order): void;
}

class MySQLDatabase implements Database {
  save(order: Order) {
    if (order.id === undefined) {
      // insert
    } else {
      // update
    }
  }
}
```

Now we can add new databases without modifying the `OrderService` class.
Adding intelligence to React Apps with Azure Cognitive Services
Tags: react, azure, tutorial
Published: 2022-08-21 08:44:03

---
title: Adding intelligence to React Apps with Azure Cognitive Services
published: true
date: 2022-08-21 08:42:00 UTC
tags: react, azure, tutorial
canonical_url: https://sahansera.dev/adding-intelligence-react-azure-cognitive/
cover_image: https://sahansera.dev/static/6133cead0f749e7bf91edef11c98d95c/dcbba/adding-intelligence-react-azure-cognitive.webp
---

Hi everyone 👋 this blog post kind of different from my usual ones since this is based on a conference talk I delivered at the [React Global Summit 2022](https://events.geekle.us/react2/) on the 21 April 2022.

Guess what, this time I don’t have any text to write, because there’s a video instead 😀 Check out the video below and don’t forget to like and subscribe.

{% embed https://www.youtube.com/embed/TLr_cxg4EhI %}

> 💡 You can follow along with demo code on [GitHub](https://github.com/sahansera/rgs-2022-demo)

The slides can be found at my SpeakerDeck [profile](https://speakerdeck.com/sahansera/infusingintelligence).

I know it’s a bit lengthy so I have segmented it into sections with timestamps. Should I continue doing this in the long run? I’d love to hear your thoughts. Thanks!

### Conclusion

Let me know what you think of this new format. Until next time 👋
Expression Solver using #python
Tags: programming, python, beginners, tutorial
Published: 2022-08-21 08:34:43

{% embed https://gist.github.com/dev3058/cf39c0b8e782a6c2f33c40f6acf8ca61.js %}

After running the👆🏻 program in your machine

1. Provide a valid expression

![Provide a valid expression like 20*96*45/78+78+95+12-69](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7rb0q7aevmz9mrksdof.png)

2. Press Enter to have your result.


![Press Enter to have your result which will be: "20*96*45/78+78+95+12-69" equivalent to 1223.69](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt5w9u2ig3a8vmff4hik.png)

---

> ⚠️⚠️ This program is not following the BODMAS approach (mathematics), it provides the result just like your calculator operations.
CSS Battle: #14 - Web Maker Logo
Tags: css, webdev, beginners, tutorial
Published: 2022-08-21 08:00:14



In this article, I will solve a [Web Maker Logo](https://cssbattle.dev/play/14) CSS Challenge on [CSS Battle](https://cssbattle.dev). Let's look at the problem first.

## Problem 

We need to create the following container by using CSS Properties only:
![Web Maker Logo](https://cssbattle.dev/targets/14.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

{% youtube https://youtu.be/2YXNVlBKhLI %}

### HTML


```html
<div wl><p l></div>
<div wr><p r>
```


- `<div wl>` : wrapper for left polygon
- `<div wr>` : wrapper for right polygon
- `<p l>` : Left polygon
- `<p r>` : Right polygon

### CSS

Now let's style the containers. 

```css
body {
  margin: 0;
  background: #f2f2b6;
  display: grid;
  place-items: center;
}
p {
  position: fixed;
  width: 150;
  height: 130;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}

[wl] {
  filter: drop-shadow(20px 0 #fd4602);
}

[l] {
  background: #ff6d00;
  left: -140;
  top: -6;
}

[wr] {
  filter: drop-shadow(20px 0 #ff6d00);
}

[r] {
  background: #fd4602;
  transform: scaleY(-1);
  bottom: -6;
  left: -30;
}
```

I am using a wrapper because we cannot add `box-shadow` to the `clip-path`. However, If you wrap the `clip-path` in some `div` and then apply the `drop-shadow` then it works. That's what I did here.


><small>Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)</small>

><small>Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.</small>

**Minified Version:**
```
<div wl><p l></div><div wr><p r><style>body{margin:0;background:#F2F2B6;display:grid;place-items:center}p{position:fixed;width:150;height:130;clip-path:polygon(100% 0,0 0,50% 100%)}[wl]{filter:drop-shadow(20px 0 #FD4602)}[l]{left:-140;top:-6;background:#FF6D00}[wr]{filter:drop-shadow(20px 0 #FF6D00)}[r]{background:#FD4602;bottom:-6;left:-30;transform:scaleY(-1)}
```

### Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
Javascript Tagalog - String indexOf Method
Tags: javascript, tagalog, pinoy, indexof
Published: 2022-08-21 07:51:00


**Ano ngaba ang String indexOf method sa Javascript?**
Yung indexOf method sa javascript is hahanapin niyalang yung pinakaunang occurence ng string na binigay mo as an argument tapos **re-return value niya yung index** nung string nayon. 

if wala siyang nakita **re-return niya is -1**

tignan niyo nalang pics if hindi niyo masyado maintindihan.

---

**<u>Pano gamitin:</u>**
**First Argument** - yung string na gusto mong kunin yung unahan niyang index

```javascript
const x = 'hello my dog name is dog'

console.log( x.indexOf('my')  ) // 6
console.log( x.indexOf('o')   ) // 4
console.log( x.indexOf('cat') ) // -1
```

**Second Argument (optional)** - kung sang index siya mag-uumpisa mag search (default is 0 which is yung start ng string)

```javascript
const x = 'hello my dog name is dog'

// Searching sa 'hello my dog name is dog'
console.log( x.indexOf('hello',0) ) // 0 

// Searching sa 'ello my dog name is dog'
console.log( x.indexOf('hello',1) ) // -1

// Searching sa 'llo my dog name is dog'
console.log( x.indexOf('llo',2) ) // 2

// Searching sa 'hello my dog name is dog'
console.log( x.indexOf('llo') ) // 2
```

**What if dalawa occurences sino kukunin niyang index?**

```javascript
const x = 'hello my dog name is dog'

console.log( x.indexOf('dog') ) // 9

console.log( x.lastIndexOf('dog') ) // 21
```
kukunin niya yung index ng pinakaunang occurence which is **9**,
kung gusto mo kunin yung index ng last occurence gamitin mong method is **lastIndexOf**

---

**More tagalog Javascript Learning Resources:**
https://javascript-methods-in-tagalog.vercel.app/
Day 9 : 100DaysOfSwift🚀
Tags: swift, ios, 100daysofswift, 100daysofcode
Published: 2022-08-21 07:38:00

**Day 9**
**Structs Part 2**

**Initializers**

Initializers are special methods that provide different ways to create your struct. All structs come with one by default, called their memberwise initializer


```
struct User {
    var username: String
}

var user = User(username: "Saurabh")

print(user.username) //Saurabh
```

We can provide our own initializer to replace the default one. For example, we might want to create all new users as “Anonymous” and print a message, like this:

```

struct User {
    var username: String

    init() {
        username = "Anonymous"
        print("Creating a new user!")
    }
}
```

our initializer accepts no parameters, we need to create the struct like this:

```
var user = User()
user.username = "Saurabh"

print(user.username)
//Saurabh
```
Javascript Tagalog - String includes Method
Tags: javascript, tagalog, pinoy, includes
Published: 2022-08-21 07:34:43


**Ano ngaba ang String includes method sa Javascript?**
Try ko explain ng madalian,
 For example yung string ko is "Hello", may **o** sa "Hello" diba? so "Hello".includes('o') == true
yung includes method returns niya is a Boolean Value (true or false) 


**Pano gamitin:**
**First Argument** - yung string na gusto mo i search if included siya sa original string.

```javascript
const x = 'Hello World'

console.log( x.includes('foo') ) //false 

console.log( x.includes('Hello') ) // true

console.log( x.includes('World') ) // true

//Case Sensitive
console.log( x.includes('world') ) // false

//Hindi naapektuhan yung original String
console.log( x ) // 'Hello World'
```

**Second Argument (optional, default is 0)** - kung sang index ng string siya mag-uumpisa mag search.

```javascript
//Searching sa 'Hello World
console.log( x.includes('Hello',0) ) // false

//Searching sa 'ello World
console.log( x.includes('Hello',1) ) // false

//Searching sa 'llo World
console.log( x.includes('llo',2) ) // true

```
**Workaround para maging case insensitive**
```javascript
const a = 'Hello World'
const b = 'WoRlD'

const x = a.toLowerCase()
const y = b.toLowerCase()
console.log(x.includes(y)) // true

// Shorter Version
console.log( a.toLowerCase().includes( b.toLowerCase() ) ) //true

```
convert niyo muna yung dalawang string sa lowercase or uppercase bago i pag-kumpara.

---

**More tagalog Javascript Learning Resources:**
https://javascript-methods-in-tagalog.vercel.app/
Pair Programming With AI - Friend or Competitor?
Tags: ai, programming, productivity, job
Published: 2022-08-21 07:24:31

Today! A fascinating Twitter Space, with Tabnine CEO and CTO of, along with a few interesting people in the community - Pedro Sanders, Adam Gross, and Eddie Jaoude - who discuss whether Artificial Intelligence will replace our jobs, or become our best friend in the future. 
https://twitter.com/i/spaces/1yNGaYLmdrnGj?s=20
What exactly the Agile is
Tags: agile, softwaredevelopment
Published: 2022-08-21 07:09:00

In Software Development Life Cycle (SDLC), there are 6 main steps:
1. Planning
2. Analysis & defining requirements
3. Design
4. Implementation or development
5. Testing, and
6. Operation & maintenance

It is a life cycle then it must be always **cyclic**, otherwise the product is stopped.

The Agile is a principle that the end-user is a precedence thing in software development. Due to it tends **customer-oriented**, people pursue to be **agile over the changes, communicative, and critical**. There are so many ways or methods to approach the Agile such as Scrum, Kanban, or _you even could create yours – depends on your situations_.

![waterfall vs agile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1w9fr4p2ns8yqtwkr6gu.jpg)

If the Waterfall runs linear from planning until maintenance which means it cannot go to the previous step. On the other hand, **the Agile could revisit the previous step before continuing the next step**. It could be happened because every person could give feedback on the task. In addition, every process must be under customer agreement or confirmation. 

**People in the team actively collaborate in cross functionality. At the end of the day, the product results end up with minimum risks.**
 
**The Scrum is highly prescriptive**, everything is estimated/decided in advance. A Scrum Master is needed to ensure all things are going on the track. A product is delivered in a few smaller parts in a sprint planning meeting. It followed by sprint review, retrospective, and daily sprint (standup) meetings. Usually, **a sprint takes 2 up to 4 weeks**.

The Scrum practice usually implemented by large startups or corporates that have mature technology ecosystem. I think the big size of application is the main reason. It needs great workflow and large composition team in order to make product development securely efficiently effective.

On the other hand, **the Kanban method has concern about priority**. It suits for the team has many backlog product to develop whereas has low quality and/or quantity of team member. Nonetheless, Kanban doesn't pursue the team to set the timeline. There is no such a "Scrum Master" who manage everything on the rail. **It really depends on collective collaboration and team commitment**. Unlike the Scrum, if the product finishes faster than the expectation, it could go to production as soon as possible. Again, because **Kanban has no definite schedule**.

A little addition, **CI/CD pipeline implementation in the Agile SDLC would be very helpful**. Whenever a feature ready to be integrated, it immediately could be delivered and deployed to the production, or any environment you want.

---
**References:**
1. https://www.northeastern.edu
2. https://www.atlassian.com
3. https://customerthink.com