teleren/devto huggingface dataset:
Python slice()
Tags: python, programming, codenewbie, tutorial
Published: 2021-10-19 09:16:54

---
title: Python slice()
published: true
date: 2021-10-17 08:30:00 UTC
tags: #python #programming #codenewbie #tutorial
canonical_url: https://itsmycode.com/python-slice/
---

ItsMyCode |

The **`slice()`** in Python is a built-in function that returns a slice object and slices any sequence such as **string** , **tuple** , **list** , **[bytes](https://itsmycode.com/python-bytes/)**, **range**.

## slice() Syntax 

The syntax of the **`slice()`** is:

```
**slice(start, stop, step)**
```

## slice() Parameters

The **`slice()`** method can take three parameters.

- **start (optional)** – Starting integer where the slicing of the object starts. If omitted, defaults to **`None`**.
- **stop**  – Ending index where the slicing of object stops. The slicing stops at index **stop -1 (last element)**.
- **step (optional)** – An optional argument determines the increment between each index for slicing. If omitted, defaults to **`None`**.

**Note:**  If only one parameter is passed, then both start and step will default to **`None`**.

## slice() Return Value

The **`slice()`** method returns a sliced object containing elements in the given range. 

**Note** : We can use slice with any object which supports sequence protocol which means an object that implements **` __getitem__ ()`** and **`__len()__`** method.

## **Example 1: ** Python slice string Get substring using slice object

```python 
# Python program to demonstrate slice() operator

# String slicing
str = 'ItsMyPythonCode'
s1 = slice(3)
s2 = slice(5, 11,1)

print(str[s1])
print(str[s2])

```

**Output**

```python 
Its
Python
```

## **Example 2:**  Get substring using negative index

 In Python, negative sequence indexes represent positions from the end of the array. The **`slice()`** function can take negative values, and in the case of a negative index, the iteration starts from **`end `** to **`start`**.

```python 
# Python program to demonstrate slice() operator

# String slicing
str = 'ItsMyPythonCode'
s1 = slice(-4)
s2 = slice(-5, -11,-1)

print(str[s1])
print(str[s2])

```

**Output**

```python 
ItsMyPython
nohtyP
```

## **Example 3:**  Python slice list or Python slice array

```python 
# Python program to demonstrate slice() operator

# List slicing
lst = [1, 2, 3, 4, 5]
s1 = slice(3)
s2 = slice(1, 5, 2)

print(lst[s1])
print(lst[s2])

# Negative list slicing

s1 = slice(-3)
s2 = slice(-1, -5, -2)

print(lst[s1])
print(lst[s2])
```

**Output**

```python 
[1, 2, 3]
[2, 4]
[1, 2]
[5, 3]
```

## **Example 4: ** Python slice tuple

```python 
# Python program to demonstrate slice() operator

# Tuple slicing
tup = (1, 2, 3, 4, 5)
s1 = slice(3)
s2 = slice(1, 5, 2)

print(tup[s1])
print(tup[s2])

# Negative Tuple slicing

s1 = slice(-3)
s2 = slice(-1, -5, -2)

print(tup[s1])
print(tup[s2])
```

**Output**

```python 
(1, 2, 3)
(2, 4)
(1, 2)
(5, 3)
```

The post [Python slice()](https://itsmycode.com/python-slice/) appeared first on [ItsMyCode](https://itsmycode.com).
How set up webpack for TypeScript & SCSS
Tags: webpack, javascript
Published: 2021-10-19 15:14:55

I published a new section in my (still) free webpack course. If you look for quick inspiration, my final config is `webpack.config.js`:

```JS
const MiniCssExtractPlugin = require("mini-css-extract-plugin"),
  HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({ title: "Contact App" }),
  ],
  mode: "production",
  devtool: "nosources-source-map",
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.scss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.png/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 10kb
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
};
```

If you are interested in a full explanation in the video form, you can sign up for my course [here](https://bit.ly/webpack-course).
Elasticsearch for Beginners and SQL Developers
Tags: elasticsearch, sql, tutorial, cloud
Published: 2021-10-19 15:09:02

In this video we will learn some basic concepts of Elasticsearch eco-system. Topics that will be covered in this video: 1. What is Elasticsearch and its various use cases. 2. Key SQL Concepts and how ES handles it (or not)? 3. Hands-on demo with ES and SQL queries side by side.

{% youtube 1WF9AOEup_A %}

You have used SQL for your entire developer life. And then you came across Elasticsearch, for search or even having it as a primary NoSQL datastore. But how do you transition from the SQL mentality to Elasticsearch? In this video we will learn some basic concepts of Elasticsearch eco-system. Topics that will be covered in this video: 1. What is Elasticsearch and its various use cases? 2. Key SQL Concepts and how ES handles it (or not)? 3. Hands-on demo with ES and SQL queries side by side.


If you enjoyed this talk, join our cloud collective group here ► https://www.meetup.com/cloud-collective/ and participate in our next meetup!
The Glam Look your web projects deserve ✨
Tags: webdev, frontend, beginners, codenewbie
Published: 2021-10-19 14:43:54

For the past few days, I've been building quite a lot of applications and every time I start a new one, the thought that I need to style it and make it more presentable daunted me as the process took nearly half or even more the time it took to build the functionality.

But the pain is all worth it when you see the finished product come together. In the process of figuring this out, I came across amazing resources that are high quality and absolutely free but capable of turning around your project's look by a complete 360°.

So in no particular order here are the things I felt played a major role in the look of the application alongside the resources that make it look even better.

**Background**

A simple quality background sets the theme of the application and trust me it makes the whole app look a lot better in a jiffy.

>*Tip : Make sure to use svg backgrounds, as their resolution remains intact no matter how the website is scaled.*

Resource: [Haikei App](https://app.haikei.app/) - Provides customizable background options of all sorts.


**Font**

Fonts set the tone of the context that you are trying to communicate to the user via your application. The right choice of font also makes it easy to consume the application.

Resource: [Google Fonts](https://fonts.google.com/) - A plethora of options available with different font weights, styles and much more.


**Icons**

Icons are a fun way to introduce some character to your application alongside the choice of font. Using the same size and type of icons make the process of aligning it way easier and also ensures there is continuity.

>*Tip : If you are looking to customize the color of your icons, download a svg format icon and change the color in the fill property and voila you just made your own color customized icon !*

Resources: [Google Icons](https://fonts.google.com/icons), [Flaticon](https://www.flaticon.com/)


**Color Palette**

Sticking to a color palette maintains uniformity and makes it easier for the user to understand the content flow. Pick three colors - a primary one accounting for at least 70% of the app, a secondary color accounting for around 25% - 27% and a tertiary color that can be used for highlighting.

Resource: [Coolors](https://coolors.co/) - Makes the work easier by providing the color options alongside their hex codes.

These may seem to be the tiniest of details, but trust me they go a long way !

If you have made it till here, thank you for taking the time to read this and I hope you found it useful.

![bye gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwb3x583vhk2qtn8aozw.gif)
 
Until next time 😄👋🏽
🆕 Luos feature in the V2.0.0: the open-source bootloader
Tags: embedded, luos, opensource, release
Published: 2021-10-19 14:25:53

🆕 Luos feature in the V2.0.0: the open-source bootloader

This feature is the big new one everyone has asked us for years. Now, you can compile Luos in bootloader mode. By compiling it this way, you can flash it to your board then use the Luos embedded network through a Gate to update your board firmware.

This allows you to update any board/firmware anywhere on your device without having physical access to it. More information about bootloader: https://docs.luos.io/pages/tools/boot.html
Upload Content Using your Web Address with Tiiny Host

Tags: webdev, showdev, programming, codenewbie
Published: 2021-10-19 14:23:27

Uploading content using your own web address has now become easier than ever before. 

Tiiny Host allows you to upload websites to a subdomain of your domain. This may seem complicated, but it isn't.

You can upload your content using your own web address in 5 quick and easy steps. All you've to do is:

1. Head over to http://tiiny.host.
2. Click the "CREATE" button from your control panel.
3. You’ll see a bar with a “website-name” text mentioned. Enter your preferred subdomain name here.
4. Click the .tiiny.site option, and a dropdown list will appear. Here, select your connected domain.
5. Select and upload your zip file here and click Launch. 

Tiiny host will only take a few seconds to launch your site and that's it!

You can read more about the benefits of having your own web address at https://tiiny.host/blog/how-to-upload-content-using-your-own-web-address/
VetsWhoCode Extension Pack
Tags: vetswhocode, vscode
Published: 2021-10-19 13:30:57

---
title: VetsWhoCode Extension Pack
published: true
description: Demonstrate the benefit of using a plugin for vs code extensions
tags: #vetswhocode #vscode
//cover_image: https://direct_url_to_image.jpg
---
![This is the Vets Who Code hashflag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbwqv2as96n8haz63a63.jpg)
Vets Who Code is a non-profit organization providing veterans with software development training. As part of the training, the students set up their development environment, including VS Code.  Most students are not aware of the available extensions they could use and they receive a list to install from the marketplace.

Realizing there must be a better way, we built a VS Code plugin to flatten the productive learning curve. This plugin is an extension pack filled with common extensions used in the training program. We asked for feedback from the VetsWhoCode community, and added the most common extensions into the plugin.

The value in using this plugin is the time saved getting new veterans up and running. The troops install the extension pack, increasing the amount of instructional time. This translates to a faster transition into writing software.

The [VetsWhoCode Extension Pack](https://marketplace.visualstudio.com/items?itemName=VetsWhoCode.vetswhocode-extension-pack) contains the following extensions:
-Alphabetical Sorter
-Axe Accessibility Linter
-Bookmarks
-CSS Peek
-DotEnv
-Drawio
-ESLint
-GitBlame
-GitLens
-JavaScript Booster
-LiveServer
-Markdown All in One
-Path-Intellisense
-Prettier
-Quokka
-React-VSCode-Extension-Pack
-Sort JSON objects
-Thunder Client
-VSCode-Dash
-VSLiveShare Pack

We are always open to more feedback and grateful to those who support us in our learning and building journey. Don't hesitate to provide feedback or ideas via GitHub discussions. Our open-source extension pack can be found [here](https://github.com/Vets-Who-Code/vetswhocode-extension-pack).
How I created my portfolio with Nextjs and PlainCSS!
Tags: nextjs, css, javascript, portfolio
Published: 2021-10-19 13:29:49

At present Next.js has been a very popular library to build beautiful, scalable Full-Stack Applications. Today I would like to share my experience on building a portfolio with Next.js.

Before going to my [Portfolio's](https://rana-portfolio.vercel.app/) explanation, Let me give a brief intro about Next.js.

##Why Next.js?
Next.js is a React Framework used for front-end development that enables us to use functionalities such as generating static websites and server-side rendering for React-based web applications.

It's a great tool to build your next website. It has many great features and advantages, which can make Next.js your first option for building your next web application.

If you want to learn more about it please visit [Next.js Official Website](https://nextjs.org/docs/getting-started).

##The Idea.
One Year ago⏲ I built [my last portfolio](https://r-rana-portfolio.netlify.app/) website with React.js and SASS, and till now I was using that one. But Last weekend I thought why not make a new portfolio. Because it's my current fav framework so I picked Next.js and I started working on it.

##Steps
Firstly I was planning🤔 to make it only single page portfolio, but then I decided to use Next.js routing and lets make different pages for different data, like about page, blog page, contact page and projects page.

After Deciding Number of pages, I started working on Homepage or you can say landing page. I divided homepage into three sections, Hero Section, About, Skills. 

Background Videos in website is always excites😍 me, so I used a video in Hero Section's background, and I used [Kaushan script](https://fonts.google.com/specimen/Kaushan+Script) fonts for Main Heading in Hero Section.

In About Section, I added two boxes one for image and second for details and A button to read more, and it redirects to about page.
For Skills section, I added logos of all framworks and technologies in a single box. I prefer logos instead of text because it creates attention.

Let's come to Other Pages, For Project's Page I made reusable component, this component create a box and it divide the screen width equally into two boxes and one box contains the Project's Image and other box contains the project's title and description. I loop through this component in projects data array and my projects page is ready.

About page contains the same component which we have in project page and I added my data in it and it works fine for about page as well. 

Please Have a look on my [Portfolio](https://rana-portfolio.vercel.app/)🚀.

If you want to check the source code please visit my [Github Profile](https://github.com/Randeep-Rana-au8).

###Hope you liked it
Thank you guys for reading my first blog. Feel free to write your view and suggestion. Your feedback is always appreciated😄.

Happy Coding😉
Use the all positional operator in MongoDB to update all elements in an array
Tags: mongodb, database
Published: 2021-10-23 23:23:41

---
title: Use the all positional operator in MongoDB to update all elements in an array
published: true
date: 2021-10-19 13:22:00 UTC
tags: MongoDB,database
canonical_url: https://donaldfeury.xyz/use-the-all-positional-operator-in-mongodb-to-update-all-elements-in-an-array/
series: Small Bytes of MongoDB
cover_image: https://donaldfeury.xyz/content/images/size/w960/2021/08/MongoDB_Logo2-4.png
---

For a full overview of MongoDB and all my posts on it, check out my [overview](https://donaldfeury.xyz/introduction-to-mongodb/).

MongoDB provides a special update operator `$[]` to apply an update operation to all elements in an array belonging to matching documents.

With the following data inserted into a collection called `games`:

```
db.games.insertMany(
	{
		name: "Genshin Impact",
		reviewScores: [8, 6, 9, 5]
	},
	{
		name: "Factorio",
		reviewScores: [7, 7, 10, 8]
	},
	{
		name: "Bloodborne",
		reviewScores: [9, 8, 9, 9]
	}
)

```

For every game that does NOT have a score of 10 in its reviews, increase all the review scores by 1.

```
db.games.updateMany(
	{ reviewScores: { $ne: 10 } },
	{ $inc: { "reviewScores.$[]": 1 } }
)

```

[Use the find method](https://donaldfeury.xyz/get-all-the-documents-out-of-a-collection-in-mongodb/) to read all the data back out to view the results:

```
{
	name: "Genshin Impact",
	reviewScores: [9, 7, 10, 6]
},
{
	name: "Factorio",
	reviewScores: [7, 7, 10, 8]
},
{
	name: "Bloodborne",
	reviewScores: [10, 9, 10, 10]
}
```

### Related

- [All posts on MongoDB](https://donaldfeury.xyz/tag/mongodb)

* * *

Did you find this information useful? If so, consider heading over to my [donation](https://donaldfeury.xyz/donate/) page and drop me some support.

Want to ask a question or just chat? Contact me [here](https://donaldfeury.xyz/contact)
A Beginner Journey to Typesense Dashboard
Tags: typesense, aviyel, beginners, opensource
Published: 2021-10-19 13:15:26

[Check out the full article on Aviyel here](https://aviyel.com/post/1194/a-beginner-journey-to-typesense-dashboard).

The ease to integrate a search-as-you-type experience into an app has had some limitations and most available choices were not engineered to use with few clicks by developers. In this post, we will learn about Typesense, its benefit, and most importantly Typesense Dashboard, its use, configuration, and workability.

## What is Typesense?

[Typesense](https://typesense.org/) is an [open source](https://aviyel.com/post/1181/hacktober-2021-how-can-beginners-start-their-open-source-journey), typo tolerant, and instant search engine, engineered as user-friendly and enterprise-oriented. Unlike its alternatives that have some limitations like a steep learning curve and a heavy operational burden, or are expensive, Typesense is relatively cheap and gives a developer the ease to build apps and sites at a very minimized cost and without operational burden. Quoting Typesense’s founders- Typesense does not require a Ph.D., which explains how easy it is to use it. Developers can also get a good guide on how to use Typesense [here](https://typesense.org/docs/guide/).

## Accessing Typesense Dashboard

There are two possible ways to install and run Typesense which are by [Typesense Cloud](https://cloud.typesense.org/) or by Self Hosting. [Typesense Cloud](https://cloud.typesense.org/) is the hosted SaaS version of Typesense and this means that the setup has been done and hosted to make it easy for users to access Typesense instead of doing all the configuration on our local machine and hosting it. A user even gets the right to choose the option they want and configure their RAM size to their needs.

We just need to follow a major step below to get into our Dashboard and start using Typesense.

* Sign in with GitHub which saves users the stress of the complex onboarding process.

![Typensense Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87qc579lafkiok5ujoxz.JPG)

After signing in we can now have access to the landing page of our Typesense Dashboard where we can generate API keys and spin up our cluster. The reason why SaaS use Typesense Dashboard is to give every user a platform to access Typesense service online with less stress, so a user that is properly signed in can use every feature of Typesense online without having it on their local machine and every of this feature will be discussed in details in next section of this article.

## How to use Typesense Dashboard?

In this section, we will learn about the different sections or tabs of the dashboard and how they function to give users a good experience while using Typesense.

The sections we will look into are:

* Home

* Pricing

* Docs

* Status

* Clusters

* Account

* Logout

To understand how these different sections of Typesense Dashboard works, check out the full article on Aviyel [here](https://aviyel.com/post/1194/a-beginner-journey-to-typesense-dashboard).
Introduction to GPGPU Computing with CUDA and C++
Tags: cpp, tutorial, programming
Published: 2021-10-19 13:14:45

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

Nowadays some software programs become complex and need huge computation power with sequential programming this is a problem but with parallel processing, the speed of the programs can be increased because it exploits the parallelism provided by the multi-core architecture. So developers Shift in the traditional paradigm of sequential programming, towards parallel processing when there is a need for huge parallelism....

[Read Full article](https://sachithsiriwardana.medium.com/introduction-to-gpgpu-computing-with-cuda-and-c-51266a5e0d83)
Json parser uses
Tags: javascript, programming, python
Published: 2021-10-19 12:34:26

JSON is a subset of JavaScript (hence its name). Json  became popular around the time of web browser scripting languages. The JSON data structures are supported by nearly all popular programming languages, making it completely language-independent.

This is a fast and convenient method to send data to Javascript. JSON has nearly replaced XML in the last few years due to its simplicity and ease of processing by machines. json data is used to create in realtime and send a database to the clients. Json takes place of xml ,like it easy to read json than xml syntaxes.

<a href="https://jsonparser.org/">https://jsonparser.org/ </a>
How to use the dev.to API?
Tags: javascript, webdev, tutorial, beginners
Published: 2021-10-19 12:14:37


### Why do we need to use it ?

In this article I am only covering the article api of Dev.to. we can use this api for our personal portfolio website. Think like you are building a portfolio website and you need to show your blogs from Dev.to in your portfolio so this api comes into play.

## How to use it?

I'm using the vanilla Javascript to show the demo you can use `axios` as well.

### Fetch the public Articles without `API_KEY`
```js
const article = fetch(`https://dev.to/api/articles?username=${username}`).then((res) => res.json()); 
```

### Fetch the public Articles by `API_KEY`
```js
const articles = fetch("https://dev.to/api/articles/me", {
    headers: {
      "api-key": process.env.API_KEY,
    },
}).then((res) => res.json()); 
```

### Fetch the  Articles by Path (`slug`)
```js
const article = fetch(`https://dev.to/api/articles/<your_username>/${slug}`).then((res) => res.json()); 
```

### Fetch the  Articles by  `article_id`
```js
const article = fetch(`https://dev.to/api/articles/${articleId}`).then((res) => res.json()); 
```

### Fetch the  Comments of article by `article_id`
```js
const article = fetch(`https://dev.to/api/comments?a_id=${articleId}?sort=-created_at`).then((res) => res.json()); 
```

### Fetch the user by `user_id`
```js
const article = fetch(`https://dev.to/api/users/${userId}`).then((res) => res.json()); 
```
### Fetch the user by `username`
```js
const article = fetch(`https://dev.to/api/users/by_username?url=${username}`).then((res) => res.json()); 
```

So basically this is all we need to fetch the Dev.to API. 

[Learn How to use fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

Let me know what do you think?