teleren/devto huggingface dataset:
One-page IT cheat sheets
Tags: interview, cheatsheet
Published: 2022-12-25 18:01:04

Hello everyone 👋

Today I want to start the series of posts with One-page IT cheat sheets. Main features of it:
- One topic occupied only one page;
- Page in A4 format;
- Cheat sheet contains the most often questions for a job interview.

I hope these cheat sheets will be very suitable for revising your knowledge about some topics before a job interview. Also, the A4 format and very compact structure allow you to print the cheat sheet and stick it on the wall behind your PC for quick access to it during the interview.

This post will be updated whenever I will release a new cheat sheet 😉

List:
- [HTTP/REST](https://dev.to/toliyansky/one-page-httprest-cheat-sheet-15j9)
- [Database](https://dev.to/toliyansky/one-page-database-cheat-sheet-e6j)
- [Software design](https://dev.to/toliyansky/one-page-software-design-cheat-sheet-n5o)
- Container orchestration (k8s) (coming soon)
- [Java](https://dev.to/toliyansky/one-page-java-cheat-sheet-gbn)
- Spring Framework (coming soon)
- Multithreading/Concurrency (java) (coming soon)

All cheat sheets allow leaving your comments on them. From time to time I will check comments and make corresponding changes.

Good luck with the interview 🤞
Python top free courses from Coursera🐍💯🚀
Tags: python, programming, beginners, tutorial
Published: 2022-12-25 17:55:04

- If you're looking to learn Python, there are a number of great courses available on Coursera.

- The Python for Data Science Specialization offers a comprehensive introduction to the fundamental concepts and tools of data science with Python. 

- Python for web development covers the fundamental elements of designing and developing a website using the Django framework.

- This course provides an introduction to essential concepts in statistics and data science using Python. 

🎥[List of top Python Free Courses on Coursera](https://youtu.be/2VRXU2H4q0c)


### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
Maximizing Your Industry Insights & Expertise on LinkedIn
Published: 2022-12-25 17:49:00

LinkedIn is a professional networking platform that allows individuals to connect with others in their industry, share their expertise, and stay up to date on industry news and trends. As a result, it is an excellent source of information for anyone looking to gain industry insights and expertise.

There are several ways to access industry insights and expertise on LinkedIn. One of the most effective is through the platform's Groups feature, which allows users to join professional communities related to their industry or area of expertise. These groups often feature discussions and content from industry experts and thought leaders, as well as job postings and other resources.

Another way to gain industry insights and expertise on LinkedIn is through the platform's "Influencers" feature, which highlights the thoughts and opinions of well-known figures in various industries. By following influencers in your industry, you can stay up to date on the latest trends and insights from leading experts.

Additionally, LinkedIn offers a variety of educational resources, including courses and webinars, that can help users develop their skills and knowledge in their chosen field. These resources can be accessed through the platform's Learning and Development section.

It is also worth noting that LinkedIn is a great place to connect with other professionals in your industry. By building relationships with others in your field, you can gain valuable insights and perspectives, as well as access to job opportunities and other resources.

In summary, LinkedIn is a rich source of industry insights and expertise, offering a variety of resources, including Groups, Influencers, and educational resources, to help users stay informed and develop their skills. By actively engaging with these resources and building relationships with other professionals, you can gain valuable insights and expertise in your chosen field.
CSS Box Model
Published: 2022-12-25 17:38:58

## Margin :
Margin are use to create space around element form all four border.
Example 
`margin: 10px 12px 15px 20px` it cerate space 10px form top 12px from right 15px from bottom and 20px from left. if we just want create space only one side could be top or bottom or right or left we can simply use these property.

```
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
```

## Padding:
Padding are use to create space around element content but inside of boarder. we can create space to top , bottom, right and left.
`padding: 10px 12px 15px 20px`

```
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xdz6qlchc52loo7lk3s.png)
Baby Steps to Learn Web Development and land your first internship!
Tags: webdev, html, javascript, beginners
Published: 2022-12-25 16:58:33

_Well Web development is a easy way you can get into Developing projects which you can show in your Resume as well as land your first Internship. _

**Here's a list of resources and the things you will have to learn to get started :**

1. Learn HTML: HTML (Hypertext Markup Language) is the foundation of frontend development. It's the language that is used to structure and format web content. Start by learning the basics of HTML, such as tags, attributes, and elements. Here are some resources to get you started:

- W3Schools HTML Tutorial: https://www.w3schools.com/html/
- MDN Web Docs HTML Guide: https://developer.mozilla.org/en-US/docs/Web/HTML/Guide
- Codecademy HTML Course: https://www.codecademy.com/learn/learn-html

2. Learn CSS: CSS (Cascading Style Sheets) is the language used to style and design web pages. It's what allows you to change the appearance of your HTML content, such as the font, colors, and layout. Start by learning the basics of CSS, such as selectors, properties, and values. Here are some resources to get you started:

- W3Schools CSS Tutorial: https://www.w3schools.com/css/
- MDN Web Docs CSS Guide: https://developer.mozilla.org/en-US/docs/Web/CSS/Guide
- Codecademy CSS Course: https://www.codecademy.com/learn/learn-css

3. Learn JavaScript: JavaScript is a programming language that is used to add interactivity and functionality to web pages. It's what allows you to create things like dropdown menus, image sliders, and form validation. Start by learning the basics of JavaScript, such as variables, loops, and functions. Here are some resources to get you started:

- W3Schools JavaScript Tutorial: https://www.w3schools.com/js/
- MDN Web Docs JavaScript Guide: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
- Codecademy JavaScript Course: https://www.codecademy.com/learn/introduction-to-javascript

4. Practice building websites: The best way to learn frontend development is to start building websites. Find a tutorial or template online and start experimenting with HTML, CSS, and JavaScript. You can also try creating your own designs from scratch to really challenge yourself. Here are some resources to get you started:

- FreeCodeCamp Front End Development Curriculum: https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/
- CodePen: https://codepen.io/
- CodePen Challenges: https://codepen.io/challenges/

5. Stay up-to-date: Frontend development is an ever-evolving field, so it's important to stay up-to-date with the latest trends and technologies. Follow blogs and newsletters, join online communities, and attend conferences to keep your skills sharp. Here are some resources to help you stay informed:

- CSS-Tricks: https://css-tricks.com/
- Smashing Magazine: https://www.smashingmagazine.com/
- Front End Front: https://frontendfront.com/
- Dev.to: https://dev.to/

_**- Twitter: Follow developers and companies in the frontend industry to stay updated on the latest news and trends.**_
Scope, Scope Chain and Lexical Environment
Tags: webdev, javascript, programming, beginners
Published: 2022-12-25 17:23:52

**Scope** means where you can access a specific variable or a function in code. The scope is directly dependent on the **Lexical environment.**

A **Lexical Environment** is created whenever an execution context is created and the lexical environment is the local memory plus reference to the lexical  environment of the parent(the lexical parent)

Lexical in general means in hierarchy or in a sequence.

Lexical Parent means where that function sits inside the code.

**Example :-**

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

as shown in above image `function a()` lexical parent is global and `function c()` is lexically inside `function a()` that means `function c()` lexical parent is `function a()`

The Lexical Environment is local memory plus the lexical environment of the parent and this whole chain of lexical environments is known as the **Scope Chain** it defines whether a variable or function is present inside the scope or not. if the scope chain is exhausted and the variable is not found that means it is not inside the scope chain.
Flex-Box (Align-item)
Published: 2022-12-25 17:13:16

Align item same as justify-content but justify-content set item on horizontal line but when we want to adjust item in vertical line we use align-item.
syntex is 

```
.flxbox{
display:flex;
flex-direction:row | column;
align-item: flex-star | flex-end | center;
}
```
Help required on Very Interesting NLP problem
Tags: nlp, machinelearning, ai
Published: 2022-12-25 17:12:50

Hello sir,

I am working on an NLP Problem for which i need some guidance.
Below is the problem description:

Develop a voice assistant which remembers things or takes note of them. Also, Voice assistant should also have the capability to relate the user's statement and answer the user questions.

For example,
User Statement 1: User says, "Remember my mother's mobile number is 9880988023.
Voice Assistant Response 1: Sure, I remember this.
User Statement 2: User says, "Remember my mother's name is Jenny".
Voice Assistant Response 2: Sure, I remember this.

Next User asks, "What is Jenny mobile number?". Then the voice assistant should give jenny's mobile number i.e. 9880988023.

I am new to NLP. Can you please tell me how to approach this problem?

Thanks.
How to Transition into Backend Development as a Frontend Web Developer
Tags: javascript, webdev, beginners, react
Published: 2022-12-25 16:50:24

The MERN stack consists of four main technologies: MongoDB, Express, React, and Node.js. In order to transition from the backend to the frontend using this stack, there are a few steps you can follow.

First, you'll need to set up your backend environment. This includes installing MongoDB and setting up your database. You'll also need to install and configure Express, which is a web application framework for Node.js.

Next, you'll need to create your backend routes. These are essentially functions that define how your backend will handle different types of requests from the frontend. For example, you might create a route for retrieving data from your database, or for updating a record in your database.

After you've set up your backend routes, you can then move on to setting up your frontend environment. This includes installing React and setting up your React app.

Once your frontend environment is set up, you can start building your React components. These are essentially pieces of code that define how your frontend will look and function.

Finally, you'll need to connect your frontend and backend. This is typically done using APIs (Application Programming Interfaces). Essentially, you'll create a function in your frontend that sends a request to your backend, and your backend will respond with the appropriate data.

Overall, transitioning from the backend to the frontend using the MERN stack involves setting up your backend environment, creating your backend routes, setting up your frontend environment, building your React components, and connecting your frontend and backend using APIs. It's a complex process, but with a little practice and patience, you'll be able to master it.

All The best!!
Enrich your analytics projects with NLP
Tags: analytics, beginners, programming, tutorial
Published: 2022-12-25 16:50:07

According IDC, 80% of all data produced are NoSQL. See:


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

There are digital documents, scanned documents, online and offline texts, blob content into SQL, images, videos and audio. Imagine a Corporate Analytics initiative without all these data to analyze and support decisions?

In all the world, many projects are using techonologies to transform these NoSQL data into textual content, to allows analyze it. See:

  1. Scanned images and images with text extracted using OCR (Google Tesseract is a great option);
  2. Videos analyzed with Visual Computing supported by Machine Learning (OpenCV is a good option) and transforming the results into JSON or XML dataset results;
  3. External content from Internet and Social midia scraping using Python and storing results into textual content.

All these content extracted are stored into text, and could be analyzed with NLP engines, like InterSystems IRIS Text Analytics (iKnow).

There are some options to do this:

1. Store textual data extracted to a table and create a NLP Domain to this table, see:


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

2. Use NLP API to send extracted text to NLP in realtime, see:

<div style="color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;">
  <div>
    $SYSTEM.iKnow.IndexString("OcrNLP", pRequest.FileName, pRequest.Text, , 0, .src)
  </div>
</div>

3. Save extracted text to text files and set data location to files folder.

4. Create RSS channel to NLP consume the text extracted.

Now, with your NLP configured you can analyze the results, see:


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

With no effort, IRIS did the ranking of concepts, cluster similiar entities (things, facts, names, substantives) and created the relationships between entities (concepts), the CRC - Concepts/Relations/Concepts. It was possible analyze the path to reach a concept and could be used colors to know features like sentiments, negations and other features, including features modeled into a custom dictionary.

To training and refine results, IRIS NLP use dictionaries, like it: https://github.com/intersystems-community/irisdemo-demo-twittersentiment/raw/master/twittersentiment/twittersentiment-atelier-project/IRISDemo/NLP/Sentiment.cls

Finally, the analysis may be consumed using IRIS native API with Java, .NET, Python and Node.js. Can be consumed as REST API too, see: https://docs.intersystems.com/irislatest/csp/docbook/Doc.View.cls?KEY=GIKNOW\_rest#GIKNOW\_rest_swagger 

To see all details see these projects:

1. https://openexchange.intersystems.com/package/Twitter-Sentiment-Analysis-with-IRIS

2. https://openexchange.intersystems.com/package/COVID-19-iKnow-Content-Navigator

3.https://openexchange.intersystems.com/package/OCR-Service
Building IoT Applications with ESP32 and Bytebeam: A beginners Guide
Published: 2022-12-25 16:44:28

Building an IoT system involves integrating hardware, software, and network infrastructure, which can be complex and time-consuming. This is the most prominent reason for the failure of IoT projects.
 
One of the key challenges in building an IoT project is finding the right client side libraries to use. While there are resources and services available for protocols like MQTT, time-series databases, IoT device management etc. But managing all these services at scale is it self a struggle and these services don't provide the level of abstraction that many embedded developers need to connect their devices to cloud.

This is where **[Bytebeam](https://bytebeam.io/)** comes in. Bytebeam provides a one stop solution for various usecases that you as an embedded developer have like:

1.**Connect and manage their IoT devices**: Bytebeam allows organisations to easily onboard, provision, and manage their devices from a central location.

2.**Collect and analyse data**: Bytebeam can collect and store data from connected devices in real-time, and provide multiple widgets for analysing and visualising this data. This can help organisations to identify patterns, trends, and anomalies, and make informed decisions based on this information.

3.**Secure and protect data**: Bytebeam typically include secure role based user authorisations. devices uses certificates to securely connect to Bytebeam cloud.

Bytebeam's vision is to create a common platform that is device agnostic, yet provides developers with powerful client side libraries for easy integration. _**As a first step, we are releasing an open source integration for the [ESP32 built](https://github.com/bytebeamio/esp-bytebeam-sdk) using Espressifs IoT Development framework (IDF)**._

The **ESP32, developed by Espressif Systems**, is a popular choice in the maker community for IoT development. It offers low cost, low power consumption, and a wide range of features including Bluetooth and Wi-Fi capabilities.

To get started with the Bytebeam ESP SDK and to try out various feature provided by Bytebeam cloud, check out our three part tutorial series:

- 
**[Part 1](https://bytebeam.io/blog/getting-started-with-esp32-idf-and-bytebeam-part-1-data-visualization/)** shows you how to push data and visualize it on the Bytebeam platform.

- 
**[Part 2](https://bytebeam.io/blog/getting-started-with-esp32-idf-and-bytebeam-part-2-over-the-air-updates/)** demonstrates how to perform over-the-air updates (OTAs) on your ESP32 device.

- 
**[Part 3](https://bytebeam.io/blog/getting-started-with-esp32-idf-and-bytebeam-part-3-actions/)** shows you how to handle actions, allowing you to send commands from the Bytebeam platform to your device.


We can't wait to see what you build with ESP32 and Bytebeam! Don't hesitate to file any issues on our [GitHub page](https://github.com/bytebeamio/esp-bytebeam-sdk) or contact us at support@bytebeam.io
Creating Graphic content using Python Pillow Library
Published: 2022-12-25 16:28:14

To create an image using the Python PIL library that displays graphic content like rectangle and a circle, you will need to follow these steps:

1.Install the PIL library by running 
```pip install pillow```

2.Import the necessary modules:
```{python}
from PIL import Image, ImageDraw
```
3.Create a blank image with a white background using the `Image.new()` method:
```{python}
# Create a blank image with a white background
image = Image.new('RGB', (400, 400), 'white')
```
4.Create a drawing context using the ImageDraw.Draw() method:
```{python}
draw = ImageDraw.Draw(image)
```
5.Use the rectangle() method to draw a rectangle on the image:
```{python}
# Draw a rectangle at (50, 50) with a width of 100 and a height of 200
draw.rectangle((50, 50, 150, 250), fill='red')
```
6.Use the ellipse() method to draw a circle on the image:
```{python}
# Draw a circle at (200, 200) with a radius of 50
draw.ellipse((150, 150, 250, 250), fill='blue')
```
7.Save the image using the save() method:
```{python}
image.save('image.png')
```

Here is the complete code that puts everything together:

```{python}
from PIL import Image, ImageDraw

# Create a blank image with a white background
image = Image.new('RGB', (400, 400), 'white')

# Create a drawing context
draw = ImageDraw.Draw(image)

# Draw a rectangle
draw.rectangle((50, 50, 150, 250), fill='red')

# Draw a circle
draw.ellipse((150, 150, 250, 250), fill='blue')

# Save the image
image.save('image.png')
```
This code will create an image file named "image.png" that contains a red rectangle and a blue circle. You can then view the image using an image viewer or display it in a Python program using a library such as PyQt5 or tkinter.
Top vs code extensions for WEB DEVELOPMENT
Tags: webdev, javascript, productivity, vscode
Published: 2022-12-25 16:27:20

There are a lot of great extensions for Visual Studio Code that can help with web development. Here are a few that I recommend:

- **Live Server** - this extension allows you to quickly spin up a local development server, which is useful for testing your web pages and applications.
- **ESLint** - this extension integrates the popular ESLint linter into VS Code, which can help you identify and fix syntax errors and other problems in your code.
- **Prettier** - this extension formats your code according to a set of predefined rules, helping you ensure that your code is consistent and easy to read.
- **Debugger for Chrome** - this extension allows you to debug your JavaScript code in the Chrome browser, making it easier to find and fix bugs.
- **IntelliSense for CSS class names** - this extension provides autocomplete suggestions for class names in your CSS, saving you time and making it easier to work with large stylesheets.
- **GitLens** - this extension adds powerful Git integration to VS Code, including the ability to see blame information and compare commits.
- **HTML Snippets** - this extension provides a set of predefined HTML snippets, making it easier to write common HTML structures like tables and lists.
- **REST Client** - this extension allows you to send HTTP requests and view responses directly from within VS Code, which can be useful for testing APIs and other HTTP-based services.

These are just a few examples, and there are many more extensions available that can help with web development in VS Code.
Svelte-kit (vite) with HMR over NGINX (Solution)
Tags: sveltekit, nginx, hmr, vite
Published: 2022-12-25 16:25:52

I need to use svelte-kit over nginx reverse proxy (because of third-party cookies which requires HTTPS). If you will just make simple proxy on nginx, pages will load, but HMR will not work. You will get this error message on console:

```
[vite] failed to connect to websocket.
your current setup:
  (browser) example.com/ <--[HTTP]--> localhost:5173/ (server)
  (browser) example.com:/ <--[WebSocket (failing)]--> localhost:5173/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .
(anonymous) @ client.ts:48
(anonymous) @ client.ts:99
```

Problem is you cannot easily proxy HTTP + websocket over one nginx server. But solution is simple:

add `server.hmr.clientPort` to `vite.config.js`:
```js
import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [sveltekit()],
	server: {
		hmr: {
			clientPort: 5111
		}
	}
};

export default config;
```

This will make wss to work over different port, so you can use different configuration for HTTP and websockets in nginx:
```nginx
server {
	listen 443 ssl;
	server_name example.com;
	
	ssl_certificate     /etc/ssl/private/cert.pem;
	ssl_certificate_key /etc/ssl/private/key.pem;

	location / {
		proxy_pass http://127.0.0.1:5173;
		proxy_set_header Host $host;
	}
}

server {
	listen 5111 ssl;

	ssl_certificate     /etc/ssl/private/cert.pem;
	ssl_certificate_key /etc/ssl/private/key.pem;

	location / {
		proxy_pass http://127.0.0.1:5173;
  		
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
	  	proxy_set_header Connection 'upgrade';
		proxy_set_header Host $host;
		proxy_set_header X-Forwarded-Proto $scheme;

	}
}
```

Now hot module reloading (HMR) works over nginx!