teleren/devto huggingface dataset:
Mistakes to Avoid as a Web Developer
Tags: webdev, beginners, programming
Published: 2021-10-29 11:24:48

Developing a site for single Screen Sizes

Remember, the US statistics showed that 68% of the traffic comes from mobile phone users. So, you might be tempted to develop a site, only viewing it on your machine, but not considering other screen sizes. If you are new to the web, just press F12 while viewing your site. It will show different screen sizes.
Make sure it fits and has a good impression on the computer, tablets, and many phone types. It’s hard to design a responsive website for every gadget, but an estimation of 9 gadgets is okay. Just make sure the site appears good on the phone.

Developing site for single Browser

While testing, you must be keen. This is a mistake that has affected almost every web developer. Each site has its rules, colors, fonts, and grids. Make sure you test it with four popular browsers, i.e Chrome, Mozilla, Firefox, and Microsoft Edge. You will find a different appearance in one of the four sites. This might be due to outdated functionality or a new package that is not unknown on the browser.

Using too many third parties

Third parties are packages or libraries that are owned and modified by the owner. Let’s say you have used a Django package to integrate with a certain payment method. After a while, the developer updates the package, which means the functionality won’t work. Also, those third parties increase the loading speed. If you can write your CSS, it’s fine, don’t use too much bootstrap. They increase the loading speed.

In short, if you can write your code do it. Let’s not pour those libraries into every place. Using libraries and packages speed up the rate of your development. But too much of something is poisonous.

Not designing a rough sketch

Designing is something that ‘Apple founder’ use to insist on while making their products. So if you just rush into development, it will be hard. That’s where software engineering principles apply. You have to sketch the platform and understand where all the items will go. You can do this on paper. It’s not a waste of time. Narrow down all the resources required before commencing the implementation process.

Less or No Optimization of the site

Let’s take an example, if you upload 10 images on the same page, what will be the loading time? What if you use jpeg over the png, will the time be the same? What if we add two videos? You have to understand the aspect of site optimization. The statistics say a customer will spend less than 10 seconds waiting for the site to load, if it doesn’t, he/she leaves it.

Know how to compress staff like the server-side HTTP. Make sure the images are smaller. Then, eliminate unused code in CSS, HTML, and JavaScript. Don’t fill your HTML with unimportant tags.
Adieu Facebook
Tags: webdev, tutorial, blockchain, javascript
Published: 2021-10-29 11:01:33

 
Why the news about Facebook is trending on social media? #deleteFacebook #facebook #fb #meta.
On October 28/10/2021, at the Facebook connect augmented and virtual reality conference, Mark Zuckerberg CEO of Facebook has announced that Facebook will be called as META which will be effective from December 1.


Yes, Facebook will now call META or you can set it as Facebook declares the company’s rebrand will be known as META
Facebook has been providing services since 2004 which are very much valuable and useful to the customers.
As of now, Facebook provides products such as Facebook, Messenger and WhatsApp for instant communication, Facebook shops and ads for business and so on, etc…


What will be the reason behind changing the company name?

The change in the name reveals that the company is looking beyond news, communication, business and social media. They’re focusing on building the future of social networks, but it’s not in the usual computers or mobile.
But dude this is a completely different universe called Virtual reality and Augmented reality, and digital infrastructure is supported by decentralised technologies like crypto currency and blockchain, sounds fascinating isn’t it?., It’s going to be watching a sci-fi movie in our daily habit

Where the idea for META comes from?


Hmmm, The word ”META” is a relatively new and buzzword which doesn’t exist to date which is popularized in the 90’s SciFi novel called snow crash. In that particular book, human’s life is in a dystopian world where people leave the real world instead of a virtual world.
In the metaverse world, you can go to school, college, office, work, play cricket, football, shopping, watching movies without leaving your home, sounds interesting isn’t it? Imagine this scenario, where half of your classmates are doing internships in a remote location or attending classes online and the rest of them are attending the classes from school or college or doing their internship in the corporate world, still, with the help of Facebook’s META you know you can interact with your friends and colleagues, Oh, My God we are going to witnesses the feel of SciFi movie genre soon.
And remember, this is is going to be future of social media and when company like facebook is going to implement the META project, this is going to be inevitable in the future. We have to adapt to new emerging technologies and move on. The future is going to inevitable, that’s if for today and this is Suresh signing off.
https://youtu.be/Uvufun6xer8
How to make Font Awesome icons more accessible
Tags: a11y, webaccessibility
Published: 2021-10-29 10:56:17

I have been learning about web accessibility and recently had to use some Font Awesome icons in my code.

Here is how to go about making the icons accessible.

The first question to ask yourself is whether the icon is purely decorative or adds meaning to your content

### Purely Decorative Icons
Add the `aria-hidden` attribute to each icon.

```html
<i class="fas fa-envelope" aria-hidden="true"></i>
```

### Icons with Meaning
Add the `aria-hidden` attribute to each icon.
Add an alternative text that explains the icon.

```html
<i aria-hidden="true" class="fas fa-map-marker-alt"></i>
<span class="sr-only">Company offices location</span>
<span>Nairobi, Kenya</span>
```
Then hide the alternative text except to screen readers.
```css
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
```
 [Learn more about hiding content.](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility) 
### Interactivity Icons
For interactive icons, simply add `aria-label` attribute to include the alternative text

```html
<a href="http://twitter.com/remigathoni" aria-label="Twitter account for Remi Gathoni">
  <i aria-hidden="true" class="fab fa-twitter"></i>
</a>
```
I hope this helps you :)
OSD600-SSG with Docusaurus features
Published: 2021-10-29 10:53:56

#Docusaurus overview
Docusaurus is amazing with various useful features. It will help you to build a site that can include blog posts, documentation, and it also support markdown files. One of the features that impresses me a lot is that Docusaurus can even read your React code in the markdown files. On top of that, Docusaurus can help you write your app's docs quite easily with markdown support and some cool features such as adding a section to sidebar.

#Installation and tutorial
To get familiar with Docusaurus, their is a 5-minute tutorial. This tutorial will make you build a page, and start putting features on it, it includes create regular page, markdown files, blog posts, and writing simple docs. Every thing is very handy and easy, all you need to do is creating a <code>.md</code> file or <code>js</code> file and put it into a folder that contain your options (docs, blog, /src/page), Docusaurus will auto generate a page for you.

#Prototype Features
To improve my static-site generator, I copy 2 features of Docusaurus. Firstly, I upgrade my markdown feature, instead of using basic logic, I swapped out it with a library (markdown-it). Also, if the text is put inside 2 <code>triple-backstick</code>, my tool will render that text with a styled background (syntax highlighting). In order to make the changed, I filed 2 issues, created 2 branches and start working on them. First branch, I install <code>markdown-it</code>, and apply it to my code. This was quite easy because the syntax of <code>markdown-it</code> was simple and clear. To highlight the syntax, I add a class to an element, which is put inside <code>triple-backstick</code> and styled it with CSS. In the future, I will implement more features to my tool, and rendering React codes that inside markdown files into browser is one of my plans at the moment.

#Links: 
Sample docusaurus site: https://nguyenhung15913.github.io/osddocusaurus/
Static-site generator tool: 
https://github.com/nguyenhung15913/OSD600-SSG
Finding Unique Substrings In A Given String
Published: 2021-10-27 19:32:35

Given a string `abc`, our goal is to generate the following unique substrings:

```
['abc', 'bc', 'ab', 'c', 'b', 'a']
```

## With A Queue

We can do it with the help of a queue. 

Here's the logic:

1. Take the given string, add it to our queue `q`.
2. While the `q` is not empty, repeat steps 3-5.
3. Pop the first item in the `q`.
4. Add this to our final result list called `res`.
5. Add left substring (e.g. `ab`) and right substring (e.g. `bc`) to the queue only if it isn't already in `res`.
6. Once queue is empty, print `res`.

```python
def findSubstrings(s):

	res = set()
	q = [s]

	while q:

		s = q.pop(0)
		res.add(s)

		x = 0
		y = len(s)-1

		right_string = s[x+1:y+1]
		left_string = s[x:y]

		if right_string and right_string not in res:
			q.append(right_string)

		if left_string and left_string not in res:
			q.append(left_string)

	return res

r = list(findSubstrings('abc'))
r.sort(key=len, reverse=True)
print(r)

# Result:
# ['abc', 'ab', 'bc', 'b', 'c', 'a']
```

## With Recursion

Here the logic is the same but we do it recursively using one helper function.

```python
def findSubstrings(s):

	res = set()

	def helper(s):

		if len(s) <= 0:
			return

		res.add(s)

		right_string = s[1:len(s)]
		left_string = s[0:len(s)-1]

		if right_string not in res:
			helper(right_string)

		if left_string not in res:
			helper(left_string)

	helper(s)

	return res

r = list(findSubstrings('abc'))
r.sort(key=len, reverse=True)
print(r)

# Result:
# ['abc', 'ab', 'bc', 'b', 'c', 'a']
```

## Complexity

I guess the worst case time here could be `(2^n)-1` if we don't use a set to check for unique values (where n is length of the given string).

![Tree diagram for substrings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvso7bwhth02iqpfk2b9.png)

## Final Thoughts

Where can you use this? Once you understand the basic logic, you can use it to solve many string related problems. For example: [Finding the longest palindromic substring](https://leetcode.com/problems/longest-palindromic-substring/).

There could be various other (simpler) ways to achieve this but I believe this approach helps us visualize the process. Thanks for reading! :)
PPC for Tech Companies: Everything You Should Know
Tags: ppc
Published: 2021-10-29 10:52:26

It makes sense to market your technology company on the internet. People may come to your website to research your products or services, contact your sales team, and convert into paying clients all in one place.

The challenge is to figure out how to get those visitors to your site in the first place.
Tech Business pay per click (PPC) advertising is a smart place to start.
Unlike traditional advertising, PPC for IT companies promotes your brand to specific consumers that are likely to convert into new sales leads.
With so many alternatives for marketing your products and services, PPC is simply one of the best. But what exactly makes it so effective at generating fresh qualified leads for your tech firm?
Traditional advertising necessitates extensive advance planning and investment since you must sign contracts, develop an ad, produce it, and then air it. And once the commercial is shown to the whole public, there is no way to edit it. On the other hand, you can test and update PPC advertising on a frequent basis in a couple of days to achieve better results for your investment. Furthermore, the actual cost of an ad is determined by a budget that you select, so you will never pay more than you desire. And if you decide to spend more or less on PPC, you can do it at any time.

One of the most significant benefits of IT company PPC is the opportunity to drive more traffic to your website from people who want to become clients.

This is because adverts only appear for people who have already demonstrated an interest in your company. Depending on whether you use Google, Facebook, or another supplier, your PPC provider will assess this differently. But the end result is always the same: highly focused traffic for monetary gain.
Responsive Design With CSS Media Queries
Tags: webdev, javascript, beginners, programming
Published: 2021-10-29 10:41:02

It is very important to be able to design a website whose contents looks good on all screen sizes

###What Exactly Is Responsive Design?
Responsive Design is the process of making your web content fit all screen sizes (ranging from **mobile phones** to large screens like **desktop screen** and much bigger screen). Every element or component on the site should be able to automatically adapt to the specific devices that opens the website.

>An important thing to look at when we talk about responsive web design is media queries.

###What Then Is Media Queries?
In **CSS**, a media query is used to apply a set of styles based on the browser's characteristics including **width**, **height**, or **screen resolution**. This allows the programmer to provide certain features on each devices, Thus you may see a search bar on larger screens but only a search button on a smaller screen.

###Media Query Syntax
This is the basic syntax for a media query in CSS
```css
@media media-type(media-feature){
  /*styles go here*/
}
```
Let's try to understand the syntax above, The `@media` is a type of `At-rule` in **CSS**. These rules will dictate what the **CSS** will look based on certain conditions.

The **media-type** refers to the category of media for the device. The different media types include `all`, `print`, `screen` and `speech`.
* `all` - works for all devices
* `print` - works for devices where the media is in print preview mode
* `screen` - works for devices with screens
* `speech` - works for devices like screen readers where the content is read out loud to the user.

>According to [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), Except when using the `not` or `only` logical operators, the **media-type** is optional and the `all` type is implied.

You can choose to omit the **media-type** and use the following syntax instead,
```css
@media (media-feature){
  /*styles go here*/
}
```
If you want to create more complex media queries, then you can use logical operators like `and`, `not` or `,`.

###Devices and Their Width
* Mobile Devices : 320px - 480px
* Ipads, Tablets : 481px - 768px
* Small Screens, Laptop : 769px - 1024px
* Desktops, Large Screens : 1025px - 1200px
* Extra Large Screens,TV's : 1201px and more

####Examples
If we want to change the background color of a website to **blue** for only `mobile devices` and `tablets`, we will use the code below
```css
@media (max-width: 768px){
  body{
    background-color: blue;
  }
}
```

###Conclusion
If you want your website to look good and also to be able to run on more devices, then responsive design is a necessity for you.
Thank you for taking your time to read this article.

Please follow Me On:
* [Twitter](https://www.twiiter.com/set_addo)
* [Github](https://www.github.com/seths10)
* [Dev](https://www.dev.to/seths10)

by clicking on the link for more tech inspired tweets, articles and more...
Starting my API journey...
Tags: dotnet, webapi, microservices, csharp
Published: 2021-10-29 10:25:56

During my career i mostly worked in small to medium companies. In most of them i had to create some kind of web based apis for a lot of different use cases. Being it as a backend for SPAs, public facing apis for customers and so on. Creating a simple rest api using the asp.net stack is quite simple. But very soon you have to tackle a lot more complicated / sophisticated problems like Authentication, load balancing, routing, configuration management, scheduled tasks and so on. 

There are a lot of free and or open source tools, libraries and frameworks that help you to solve those problems. But then the real challenge starts. The available solutions a often very powerful, written in different languages and require some effort to get started with. So you have to integrate them, manage the deployment / hosting on different OSes and keep all of this up to date. That is extremely challenging for a small to medium company. You just don't have all the skills on your team or the time and budget.

So, what can i do? I want to create yet another framework :) 

No, i don't want to reinvent the wheel. My goal is to create some kind of framework that incorporates existing tools where possible and hides the magic behind but gives you the power to extend if required. In the end you should have everything at hand to create apis that provide your business value without havening to much to care about the rest of the infrastructure.

So what does that mean. Lets say you want to have a logging solution. Then you could just do something like this pseudo code.

```cs
   app.UseLoggingServer(); // Enable logging server on this machine
   app.UseLogging("logging server uri"); //Send logs to the logging server
   app.UseLoggingUI(); // Provide some ui to show the logs
```

Under the hood it could use for example serilog. This code would configure serilog with settings that should be sufficient in most cases. But if not you could change the serilog configuration directly.

These are some of the key aspects that i want the framework to follow:

- Modular

Cherrypick what you want. Just need an api gateway or logging? Pick this from the framework.

- Scalable

It should be possible to run everything within a single web application or scale out stuff that is hitting the limits. 

- No rules for your code

The framework should handle the infrastructure stuff. It should not force you how to write your code in any way. 

- OS agnostic

The whole framework has to run on windows, linux, mac os.

Here my journey starts...


---

<sup>Photo by [Clemens van Lay](https://unsplash.com/@clemensvanlay) on [Unsplash](https://unsplash.com/)</sup>
EditorJS delete image from server. 
Tags: react, javascript
Published: 2021-10-29 10:04:10

EditorJS delete wrong image from uploaded server before saved.



https://gist.githubusercontent.com/HeinKoZin/8b862af98e0de012282199d58780c388/raw/897731665001e9a61284428d51034acc37eceb6e/EditorJSWithReact.tsx
SQL - Sub Queries
Tags: beginners, tutorial, sql, database
Published: 2021-10-29 09:58:36

SQL is the standard language for the Relational Database, for storing, manipulating and retrieving stored data. For basics of SQL ([link](https://www.tutorialspoint.com/sql/))

#### Why Sub Query? 🤨
It is easy to understand and maintain. Subqueries use the result of the query in the outer query.
Subqueries divide the complex queries into parts so that a complex query can be broken into a series of logical steps. It can also replace complex joins and union.

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

#### Sub Queries
A subquery or a nested query is a query within another SQL query. subquery return data that will be used in the main query as a condition to further restrict the retrieved data. 

Subqueries can be used with the SELECT, INSERT, UPDATE, DELETE statements with operators like =, !=, <, >, BETWEEN, IN etc.


#### Subquery with SELECT statement:
Subqueries are mostly used with select statement. The basic syntax is:
SELECT ColumnName FROM TableName 
WHERE ColumnName Operator (SELECT ColumnName FROM TableName);

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

#### Subquery with INSERT statement:
The INSERT statement uses the result from the subquery to insert into another table. The basic syntax is:
INSERT INTO TableName
SELECT ColumnName FROM TableName 
WHERE ColumnName Operator (SELECT ColumnName FROM TableName);

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


#### Subquery with UPDATE statement:
Multiple Columns can be updated using the subquery with the UPDATE statement. The basic syntax is:
UPDATE TableName SET ColumnName = Value
WHERE ColumnName Operator (SELECT ColumnName FROM TableName);

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


#### Subquery with DELETE statement 
Subquery can be used with DELETE statement like with any other statements above. The basic syntax is:
DELETE FROM TableName 
WHERE ColumnName Operator (SELECT ColumnName FROM TableName);

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

Thank you!! Feel free to comment on any type of feedback or error you have 😄✌