teleren/devto huggingface dataset:
Getting Started With C Programming
Tags: c, programming, beginners, helloworld
Published: 2022-02-28 10:17:55

## What is C?
C is a general-purpose, procedural, middle-level programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system.

## Where C is used?
C programming language is used in the following areas:-
1. Operating System Design,
2. Compiler Design,
3. Text Editors,
4. Handling Database,
6. Interpreter, and many more.

## Why learn C?
1. Easy to learn
2. It is well structured.
3. It's syntax is similar to Java(if you're a Java programmer, then you'll understand).
4. It can handle low-level activities.

**Today we're gonna learn how to print hello world using C.**

## Source Code:-

```c
#include <stdio.h>

int main()
{
    printf("Hello World");
    return 0;
}
```
## Output:-
```
Hello World
```
So, this was pretty cool and simple.

---

## Hope this helps you. Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCsuzc8lqAbgUYo4yzpjtfSw) and connect on [LinkedIn](https://www.linkedin.com/in/susmita-dey-15a15a210/) or [Twitter](https://twitter.com/its_SusmitaDey).
Also, feel free to [support](https://www.buymeacoffee.com/susmitadey) my work.😊
Review the content of your last Git commit
Tags: git, todayilearned, productivity
Published: 2022-02-28 10:12:56

The other when working on one of my side projects, I needed to review the changes that I have made in my previous commit. For this kind of need, I usually browse to Github to review commits or look for a specific file in VS Code; but I could not use any of these methods as my project did not have a remote repository on Github and I wanted to see all the changes made across the whole project.

So I fallback to read Git documentation again to finally found the right command to help me review the changes of my last commit.

```shell
git log --patch -1
```

- The `—patch` option display the commit diff for each commit of my Git history
- The `-1` option limit the number of displayed commits to only 1 (the most recent of the current branch)

```git
Author: Jeremy Bertrand <my_email@example.org>
Date:   Fri Feb 18 15:16:31 2022 +0000

    chore: update the database config to support remote db

diff --git a/config/database.yml b/config/database.yml
index da4b691..2d92ba5 100644
--- a/config/database.yml
+++ b/config/database.yml
@@ -17,6 +17,9 @@
 default: &default
   adapter: postgresql
   encoding: unicode
+  username: <%= ENV.fetch("POSTGRES_USER") { "pg_user" } %>
+  password: <%= ENV.fetch("POSTGRES_PASSWORD") { "pg_password" } %>
+  host: <%= ENV.fetch("POSTGRES_HOST") { "127.0.0.1" } %>
```

It is also possible to use an other Git command to achieve the same result which can be used to see any Git objects using their reference, and use `HEAD` as default value if no object is passed.

```shell
git show
```

*For better rendering of Git diffs, I strongly recommend you to use the [delta utility](https://github.com/dandavison/delta)*

Want more?
- [Git - Viewing the Commit History](https://git-scm.com/book/en/v2/Git-Basics-Viewing-the-Commit-History)
- [Git - git-show Documentation](https://git-scm.com/docs/git-show)
Using 11ty to build base websites
Tags: 11ty, javascript, webcomponents, hax
Published: 2022-02-28 04:52:40

This post is regarding getting started with 11ty and being able to use it in a very basic setting to using it with a fully developed template.

## Making a Hello World 11ty Page
The first step is learning 11ty and its capabilities is making a very basic webpage with their [beginners tutorial](https://www.11ty.dev/). After going through this tutorial, you can get a good idea of how to use 11ty and mess around with its basic website. I was able to add some functionality and blog posts to my Hello World site. The github repo to that site is [here](https://github.com/zjohnson10/eleventy-lab) and the working site is [here](https://zjohnson10.github.io/eleventy-lab/).

## Using a  Basic 11ty Template
After making that hello world page, I moved on to using a basic template of a 11ty site and adding functionality there. The basic template I used can be found [here](https://github.com/11ty/eleventy-base-blog) that you can use too. I added my blog posts to that site as well, the github repo is [here](https://github.com/zjohnson10/eleventy-blog-1) and the working site is [here](https://zjohnson10.github.io/eleventy-blog-1/). Building and Deploying this site was tricky and took some effort, so don't shy away if it takes a few tries to get it working. 

## Hax11ty template
The final 11ty site I made was using hax's hax11ty template, which is already a very functional and complicated 11ty site. The template can be found [here](https://github.com/elmsln/hax11ty). I added my blog posts to this as well and they can be seen in the left hand column of the site. The github repo is [here](https://github.com/zjohnson10/eleventy-blog-3) and the working site is [here](https://zjohnson10.github.io/eleventy-blog-3/).

If you were able to follow along and make your own versions of these templates, then congratulations! There are many other templates out there for you to explore and try on your own as well. Happy hacking!
Getting Segfault on a healthy ptr
Published: 2022-02-28 10:08:20

I am getting a segfault on a pointer which is a healthy pointer. I can check in gdb and debugger, the node is healthy as it should be.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttngapt5bmbpnt2nbjz4.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/begq1kkcesagbytu105g.png)
How to load environment variables in Svelte
Tags: svelte, javascript, webdev, tutorial
Published: 2022-02-28 09:52:07

Svelte is a new, up-and-coming framework for building fast web applications. In contrast to React, it does a lot of the heavy lifting in a compile step instead of in the browser. It's very clever and comes with enormous advantages but can also have its pitfalls for developers used to the more popular frameworks. In case of the environment variables, one can't just import `dotenv` wherever and assume it will work - a replace plugin of rollup (the bundler) has to be used instead. This tutorial uses `yarn` for a package manager and would work the same with `npm`.

## Using dotenv and rollup's replace plugin to load environment variables

In order to be able to load environment variables like we're used to: `process.env.<variable-name>`, we will use `@rollup/plugin-replace` together with `dotenv`.

The magic will happen in the `rollup.config.js` file which tells rollup how to build our project. First, go ahead and install the required dependencies using `yarn` or `npm`. I'll assume yarn. Run `yarn add --dev @rollup/plugin-replace dotenv` and create a `.env` file (remember to git ignore it) in the main folder of your repo.

Now, in your rollup config, tell rollup to use the replace plugin, define which files it should include in the replacement procedure and which strings you want to replace:

```
  .
  .
  .
  plugins: [
    replace({
      include: ["src/**/*.ts", "src/**/*.svelte"],
      preventAssignment: true,
      values: {
        "process.env.TESTVAR": "'replacedtestvar'"
      }
    }),
  .
  .
  .
```

Note that the replacement happens at compile time which means that if you don't wrap the values of the provided dictionary in an additional quotation, javascript will be looking for a variable of that name instead of understanding that it was supposed to be a string. Thus, in order to use the familiar `process.env.<variable-name>` we will make a simple transformation of our config loaded using dotenv.

First import dotenv at the top of your `rollup.config.js`:
```
import { config } from 'dotenv';
```

Then proceed to transform the env. variables to suit the replace plugin:
```
const configToReplace = {};
for (const [key, v] of Object.entries(config().parsed)) {
  configToReplace[`process.env.${key}`] = `'${v}'`;
}
```

And finally adjust the plugins option of the exported rollup config:
```
  .
  .
  .
  plugins: [
    replace({
      include: ["src/**/*.ts", "src/**/*.svelte"],
      preventAssignment: true,
      values: configToReplace,
    }),
  .
  .
  .
```

Make sure to adjust the include option of the plugin and then you can joyfully write `process.env...` to access the properties you loaded from your .env file.
What is ModSecurity? Installation Guide for Apache on Ubuntu
Tags: beginners, devops, github, security
Published: 2022-02-28 09:43:29

ModSecurity (also known as ModSec) is an open-source web application firewall (WAF). It is implemented to protect sites and applications against many common attacks, including XSS, code injection, etc.

70% of all attacks are carried out through the application level of the web. Thus, implementing a WAF would be helpful for organizations in ensuring system security.

It establishes an extra security layer that increases the protection level of web servers, detects, and prevents attacks before they reach web application programs.

Initially, ModSecurity was a module for Apache web servers, and with time, it grew to a full-fledged web application firewall with support for different platforms, including Apache, Nginx, and IIS.

They work on the application layer (the 7th layer in the OSI model).

It examines the incoming requests, compares them to patterns described in the rules in the ruleset, and takes actions on the requests based on the results of the tests. If the check succeeds, the HTTP request is passed to the website to retrieve the content. If not, pre-defined actions are performed.

It has a flexible rule engine to perform simple and complex operations and comes with a Core Rule Set (CRS).

And the most popular one among those is the OWASP ModSecurity Core Rule Set, which is updated regularly and can block a wide range of generic attacks, including OWASP’s top-ten list of critical vulnerabilities.
[Click here to learn more about ModSecurity installation Guide for Apache on Ubuntu](https://beaglesecurity.com/blog/article/modsecurity-apache-installation-guide.html)
Build a Messenger Clone with MERN Stack (MongoDB, Express, React, Node JS) + Socket.io (Day 2)
Tags: javascript, webdev, react, tutorial
Published: 2022-02-28 09:42:20

In this Facebook Messenger   Clone  Tutorial series, we will learn to build an Awesome Full Stack  Facebook Messenger Project with realtime messaging functionality with socket.io . We have one on one chat as well as group chatting functionality in this app.

In this video, we will be creating express server



{% youtube 6Wx_y245rIM %}
Spread it!
Tags: php
Published: 2022-02-28 09:40:46

I'm usually not a big fan of "1-line refactoring", as it often means less readable code and _clever_ syntaxes that only make maintenance more time-consuming.

Of course, it's not always the case, and, for example, in PHP, I like to refactor the following code:


```php
$letters = [ ["a","b",], ["c","d",], ["e","f",], ["g","h"], ["i","j"] ];
$tmp = [];
foreach ($letters as $row) {
    $tmp = array_merge($tmp, $row);
}
print_r($tmp);
```

to this one:

```php
$letters = array_merge(...$letters);
```

It uses the spread operator and removes the hassle of useless temporary arrays. Besides, the first one can be a bad practice in terms of performance, because you use `array_merge` inside a loop.
ReactJS dev thought process 
Tags: react, design
Published: 2022-02-28 08:50:57

Hello ReactJS Gurus,

I am new to Reactjs. Does any one know of a training or a trainer where they could teach how to think before beginning to write reactjs code. The thing is I see people write these big projects which are complicated to read. I want to know how they start design process and sync that design to the react code.. and finally fill all the nitty gritty details in Reactjs. I have gone through some basic training and have understood some advance concepts. But i couldn’t get the idea of how they confidently take a UI idea and then take it to component level and fill in the details. Any one has any training recommendations on this?

Thanks a lot.
Sri
order-o-pedia - Hiring
Tags: webdev, programming, career, startup
Published: 2022-02-28 08:41:22

**Hiring!**
- join IN
If you believe in solving changes to the web development world, If you are a passionate software engineer, this job post is for you.

Your experience doesn't matter, Your will to do must matter for us.

Let's connect to build it together.

Yes, together, we can do!

[orderopedia.com](https://orderopedia.com)
Debouncing vs Throttling
Tags: javascript, react, performance
Published: 2022-02-28 08:40:49

## Throttling technique

#### Real-life example:

> _Imagine yourself as a 7-year-old toddler who loves to eat chocolate cake! Today your mom has made one, but it's not for you, it's for the guests! You, being spunky, keep on asking her for the cake. Finally, she gives you the cake. But, you keep on asking her for more. Annoyed, she agrees to give you more cake with a condition that you can have the cake only after an hour. Still, you keep on asking her for the cake, but now she ignores you. Finally, after an interval of one hour, you get more cake. If you ask for more, you will get it only after an hour, no matter how many times you ask her. This is what throttling is!_


It calls a function only once in a given time interval.
- it doesn't matter how many times the user fires the event. 
- it will reduce the notifications of an event that fires multiple times.

- *Use Cases:* for Throttle
Throttle is useful for cases where the user is carrying out a smooth or continuous event, such as scrolling or resizing. In the event of animating elements based on their scroll position or handling an infinite scroll page, we can use throttle to control how often the scroll handler is called

---

## Debouncing technique

#### Real-life example:

> _Consider the same cake example. This time you kept on asking your mom for the cake so many times that she got annoyed and told you that she will give you the cake only if you remain silent for one hour. This means you won’t get the cake if you keep on asking her continuously - you will only get it one hour after last time you ask, once you stop asking for the cake. This is debouncing._

It calls a function after the specified time once the user stops firing the event.
- it doesn’t matter how many times the user fires the event.
- it ensures that one notification is made for an event that fires multiple times.

- *Use Cases:* Search box suggestions, text-field auto-saves, and eliminating double-button clicks are all use cases for debounce

---

## What was the difference?

It is quite clear now, check this real example 
[demo.nimius.net/debounce_throttle](demo.nimius.net/debounce_throttle) is a good visualization 

ref:
[https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript)
What is Symbol.for in JavaScript?
Tags: javascript, programming, webdev
Published: 2022-02-28 08:22:25

`Symbol.for` is a built-in method of `Symbol`'s in JavaScript. What is it for and what is the difference between `Symbol` and `Symbol.for`?

## Symbol.for

Like `Symbol`, `Symbol.for` always returns a Symbol for a given key as well. What is unlike `Symbol` is `Symbol.for` will return the same `Symbol` if the key was registered once. When `Symbol.for(key)` is called for the first, a `Symbol` with the given key will be generated and stored in the global `Symbol` registry. It becomes a global `Symbol`.

Here is the difference between both.

With `Symbol`

```js
let symbol1 = Symbol('foo');
let symbol2 = Symbol('foo');
symbol1 === symbol2   // false
```

But with `Symbol.for`

```js
let symbol1 = Symbol.for('foo');
let symbol2 = Symbol.for('foo');
symbol1 === symbol2   // true
```

Here is the explanation.

```js
// the symbol `foo` doesn't exist, a symbol is created.
let symbol1 = Symbol.for('foo');
// the symbol `foo` has been created and registered, so return it.
let symbol2 = Symbol.for('foo');
// both are the same symbol
symbol1 === symbol2 // true
```

## Symbol.keyFor

This is a reverse call of `Symbol.for`. When `Symbol.for(key)` creates a global `Symbol`, `Symbol.keyFor(key)` returns the key name of this `Symbol`.

```js
let symbol1 = Symbol.for('foo');
Symbol.keyFor(symbol1);  // 'foo'
```

`Symbol.keyFor` don't return the name of a local `Symbol`. It returns undefined instead.

```js
let globalSymbol = Symbol.for('foo');
let localSymbol = Symbol('foo');
Symbol.keyFor(globalSymbol);  // 'foo'
Symbol.keyFor(localSymbol);  // undefined
```

## In conclusion

A `Symbol` is guaranteed to be unique. It is often used to be a property key of an object so that the properties will not corrupt each other. In modern libraries/frameworks, such as `React`, `node-Redis`, and so on, `Symbol` has been used a lot to identify the different properties and types. Most of the browsers have supported it, except IE. If you want to know if it is available on your browsers, you can check it on the [caniuse](https://caniuse.com/?search=symbol) website.

Thank you for reading.
Could not resolve peer dependency vuex@"^3.0 || ^4.0" with Vuex 4.0.0-rc.2 installed
Tags: vuexpersistedstate, vuex
Published: 2022-02-28 08:04:30

## Background

This post was written since [robinvdvleuten/vuex-persistedstate](https://github.com/robinvdvleuten/vuex-persistedstate) has been archived on February 2022.

However, [the issue](https://github.com/robinvdvleuten/vuex-persistedstate/issues/370) is still open...

---

## Problem

The error message was shown when I was trying to install dependencies with `npm install`.

Here was my `package.json` :
```json
...
"dependencies": {
    ...
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vuex-persistedstate": "^4.1.0",
    ...
},
...
```

The log of `npm install` was :
```
$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: frontend-v2-nuxt2@1.0.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.14" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.2" from vuex@4.0.2
npm ERR! node_modules/vuex
npm ERR!   peer vuex@"^3.0 || ^4.0.0-rc" from vuex-persistedstate@4.1.0
npm ERR!   node_modules/vuex-persistedstate
npm ERR!     vuex-persistedstate@"^4.1.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/kevin/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kevin/.npm/_logs/2022-02-28T07_34_01_560Z-debug.log
```

---

## Solution

I noticed that the package `vuex-persistedstate@"^4.1.0"` required `vuex@"^3.0 || ^4.0.0-rc"`. Therefore, I added vuex package :
```
npm install vuex@^3.0
```

After that, try installing dependencies with :
```
npm install
```

The error was gone this time.

`package.json` after being updated :
```json
...
"dependencies": {
    ...
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.1.0",
    ...
},
...
```

It is clear that `vuex` as a required package for `vuex-persistedstate` has been added.
Want to Host Your Website for free?
Tags: webdev, tutorial, opensource, github
Published: 2022-02-28 08:04:08

When you create a website, you essentially create a bunch of different files. These files need to be stored somewhere in order to be accessible on the Internet. Reliable and high-performing web hosting is a crucial part of any successful website.

Lets suppose you've just started making basic projects and you want to showcase your work with others but you can't afford to pay for a hosting service. In such a case what you're supposed to do then?

No need to worry there are quite a few free web hosting services out there.

In this article, we'll come across some of them!




## [Netlify](https://www.netlify.com/)


Netlify is an intuitive Git-based workflow and powerful server less platform to build, deploy, and collaborate on web apps.

Create amazing experiences for the web in record time—without thinking once about servers or devops.


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

## [GitHub Pages](https://pages.github.com/)

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git.

Host your website directly from your GitHub repository. Just edit, push, and your changes are live.


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


## [Vercel](https://vercel.com/)

Deploy web projects with the best frontend developer experience and highest end-user performance.

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow.



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


## [Heroku](https://www.heroku.com/)

Heroku is a platform that enables developers to build, run, and operate applications entirely in the cloud.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly.



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


## [Firebase](https://firebase.google.com/)

Firebase is a platform developed by Google for creating mobile and web applications.

With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).


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

Free hosting is good for anyone looking to create their first website. It is the ideal stepping stone for people who don't have much coding or design experience.
Create Searchable PDFs by OCR
Published: 2022-02-28 08:01:17

---
canonical_url: https://ironsoftware.com/csharp/ocr/examples/tesseract-create-searchable-pdf/
---

We can use Iron's advanced Tesseract engine to convert Images to searchable PDFs. It can also make existing PDF's searchable.

This adds to SEO performance and internal search indexing within intranets and databases.

**C#:**
```
using IronOcr;
 
  var Ocr = new IronTesseract();
using (var Input = new OcrInput())
{
    Input.Add(@"images\page1.png")
    Input.Add(@"images\page2.bmp")
    Input.Add(@"images\page3.tiff")
 
    Input.Deskew();
 
    var Result = Ocr.Read(Input);
    Result.SaveAsSearchablePdf("searchable.pdf");
}
```

**VB:**
```
Imports IronOcr
 
  Private Ocr = New IronTesseract()
Using Input = New OcrInput()
	Input.Add("images\page1.png") Input.Add("images\page2.bmp") Input.Add("images\page3.tiff") Input.Deskew()
 
	Dim Result = Ocr.Read(Input)
	Result.SaveAsSearchablePdf("searchable.pdf")
End Using
```