teleren/devto huggingface dataset:
Deploy a javascript only blog with CMS JS
Tags: javascript, cms, blog
Published: 2020-12-19 12:18:40


<p>
Deploying a blog can be sometimes strenous, from Jekyll to Ghost CMS and Hugo, I've tried out quite a lot of CMS Deployment methods, but there's just one that more than meets my eye - CMS JS
</p>
<p>
CMS JS is a Javascript only(yes, javascript only!) blog CMS that can be deployed in only a matter of minutes.
This ensures that you dont need any backend tools like Node JS or Ruby to have your own blog, CMS JS is a lightweight and simple alternative 
<img src="https://media.giphy.com/media/aWPGuTlDqq2yc/giphy.gif"/>
</p>

<h3>How to set up CMS JS</h3>
<p>
CMS JS currently has two modes, Server mode and Github mode which means you can choose to host your content on Github with Github Pages or you can choose to self host your content.
</p>
<a href="https://github.com/chrisdiana/cms.js/wiki/Server-Mode">Learn more about server mode here</a>

<h3>How to set up server mode</h3>
<ol>
<li>Clone the <a href="https://github.com/chrisdiana/cms.js-starter">starter repo</a>: <code>git clone https://github.com/chrisdiana/cms.js-starter.git</code> or download the latest <a href="https://github.com/chrisdiana/cms.js/releases/latest">release</a>
</li>
<li>Navigate to js/config.js and modify the settings to your liking.<br>
<img src="https://i.ibb.co/qBhH1tP/image.png"/><br>
Change <code>mode</code> to GITHUB or SERVER mode based on your hosting environment
</li>
<li>If you're using Github mode, you'll want to make sure your Github settings are correct, then create a new branch from your master or working branch called <code>gh-pages</code>(Github's default branch for hosting)</li>
<li>And you're done!, as easy as you could imagine</li>
</ol>
<img src="https://media.giphy.com/media/l0Iyl55kTeh71nTXy/giphy.gif"/>

<h3>Themeing</h3>
<p>
Unfortunately, CMS JS does not provide so much fancy themes like most CMS providers do, though it is quite very easy to customise it comes with a few not so great themes.<br>
You can find them <a href="https://chrisdiana.github.io/cms.js-themes">here</a>
</p>
<p>Well, that's that, if you want to read more about CMS JS, check out the <a href="https://github.com/chrisdiana/cms.js/wiki">Wiki</a> or chekout the <a href="https://github.com/chrisdiana/cms.js">Github repository</a>
</p>

<p> If you enjoyed this post you can <a href="https://www.buymeacoffee.com/Godwinjemegah">buy me a cofee </a> to encourage me to write more techy stuff :D<p>
Test 2 post
Published: 2020-12-19 12:08:59

# Illo volabat

## Ignoto maxima deme clauso in

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0xyw5ogz0c4u438rizbq.png)

Caeli uritur dos proles, Daphne pax, aurea. Amittere in recipit. Molimine
agreste Thermodontiaca gratia subitusque sub agri pariter *et pecori circum*
Rhodopen. Unam malorum nos levi dis est et solito auctore nemorisque; me tibi
parabat aut Clymeni natalis, quod poterat.

## Iter mandere animum diximus qui micat altis

Esse tenet, illo ipsum robora timoris: fera poenas, edita ipse auguror mortisque
pietate meae [tutus](http://et.org/iugulo) sua pennis. Alimenta tibi.
[Fundamina](http://levatae.io/) luces fingens! Populos spinas ad fugientem
clausis deum sic in Triviae plenis vidit, ille hominesque peragat.

> Vos vident haec turba, missa ilice labore amento amplexus Iuppiter moderatior
> turis. Hostia est [vocari super](http://ictubalearica.com/o) nexilibusque
> movet, est sentit patulos quoque, cum vulnus fundere ede absens comitante
> telis. Genitore in cutis.

## Tellus praeterque vulnera

**Et hoc et** ille membrisque tetigere et quam simul: *quoque* Pentheus videbar
sola? Munere huic ossa: non mutavit hanc perque, Ausonium mitis prospectet
donare, per probat. Nomen ignes facies hirsuta Tisiphone poscor; ni clipeum
vitiato trementia: montibus. Tenuerunt chaos contraria, erat Iuno, venantum cur
arma baculum ad vulgus i [mentis](http://pictissed.org/rerumcapillos.html)
dubitare. Congelat dixerat multo, aureus, vera collo flavam, cum ego sequendo,
coget tribulique hiems *tegmina*.

## Clausus quae tabuit infectaque luctu

Facie **pavet relinquit** omne: tempus mersit reperitur ille fugaverat, quodsi.
Quam custodia nunc exi qua infelix *ausa putat* viribus: quaerit *inspirare*.

Hoc valuit verba se tantum veniam, quo pius non; lucoque in nam *et*. Marmoreum
tardius mater inmissos, cum praetemptatque fistula minetur evanuit: caede aequo,
et vivacem quondam imagine.
Shell - load env variables from .env
Tags: shell, tips
Published: 2020-12-19 11:57:35

Sample codes to load environment variables from .env file in sh.

```sh
#!/usr/bin/env sh

# Load variables from .env file.
export $(cat ./.env | grep -v ^# | xargs) >/dev/null

# Refer to variables.
echo "KEY_IN_ENV=${KEY_IN_ENV}"
```

Here is test code, which creates test .env and echo it.

```sh
#!/usr/bin/env sh

TEST_KEY1="This value will be replaced."

# Create test .env
cat <<EOF > .env
TEST_KEY1=VALUE1
TEST_KEY2=VALUE2
EOF

# Load .env
export $(cat ./.env | grep -v ^# | xargs) >/dev/null

# Check
echo "TEST_KEY1=${TEST_KEY1}"
echo "TEST_KEY2=${TEST_KEY2}"
```
Customize SVGs in React
Tags: react, svg, svgr
Published: 2020-12-19 11:26:11

I tried a few ways to display SVG images in React and I want to share my choice.



*   Packages with SVG icon collections
*   `img` tag: `<img src="someSvg" alt="some text" />`
*   Copy/paste `svg` tag into JSX: `<svg>...</svg>`
*   Import SVG as React component **<– my choice**


## Advantages of using SVGs as a React component

Why did I choose to use SVGs as a React component?



*   No need to install icon collections;
*   I can do customization through props: `width`, `height`, `fill`, `stroke`, `strokeWith`, etc.;
*   I can define other styles with CSS through `className` prop;
*   No need to copy/paste the SVG file;


## Usage with Create React App

If you use CRA you can import SVG files and use them as React component right away.

`App.js`

```diff
- import logo from "./logo.svg";
+ import { ReactComponent as Logo } from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
-       <img src={logo} alt="logo" />
+       <Logo stroke="#f60" strokeWidth={10} width={500} />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7xbj5lfo8seght92j44n.png)
Stroke changed logo


## Usage without Create React App

Create React App uses [SVGR](https://react-svgr.com/) behind the scenes to import SVG files as a React component, so let’s do the same now.



### 1 - Install the Webpack loader called `@svgr/webpack`


```
yarn add --dev @svgr/webpack
```


### 2 - Update your `webpack.config.js`


```
 ...
  module: {
    rules: [
      ...
      // SVG loader
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              titleProp: true,
            },
          },
          'file-loader',
        ],
      },
    ],
  },
  ...
```


**NOTE**: I use it in conjunction with <code>[file-loader](https://github.com/webpack-contrib/file-loader)</code>, in case I want to import SVG files normally.

### 3 - Import SVG files as React component


```
import { ReactComponent as SomeImage } from 'path/to/image.svg'

...

<SomeImage width={100} height={50} fill="pink" stroke="#0066ff" />
```



## Credits



*   Transform SVGs into React components — [SVGR](https://react-svgr.com/)
*   File Loader — <code>[file-loader](https://github.com/webpack-contrib/file-loader)</code>
*   Cover photo by [Harpal Singh](https://unsplash.com/@aquatium?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/icons?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)


## Conclusion

Summing it up, using SVGs as a React component allows me to easily customize my SVG icons in a snap. That’s what I want.
Day 53 of #100DaysOfCode: How to Publish an npx Command to Improve productivity?
Tags: 100daysofcode, npm, javascript, tooling
Published: 2020-12-19 11:56:39

## Introduction
Blog posting is kind of my knowledge base. I can review and apply knowledge from those posts to my new projects.
Building tools is another efficient way to create a new project without recalls or a few manual works. To integrate the knowledge, 

[I create an npx tool to create a new project with Next.js, Redux, and Styled Components with default folders and files](https://www.npmjs.com/package/create-nrs-web).
This article introduces the following topics.

1. Steps to push a new npx command
2. Other useful commands to manage npm packages

## Details
Please refer to my [article](https://medium.com/a-layman/how-to-publish-an-npx-command-to-improve-the-productivity-23c6480c176)

## Porfolios
There are some of my articles and released projects. Feel free to check if you like! 
* [My blog-posts for software developing](https://medium.com/a-layman)
* [Facebook page](https://www.facebook.com/imalayman)
* [My web resume](https://jenhsuan.github.io/ALayman/cover.html)
* [Twitter bot](https://twitter.com/ALayman84368087)
* [Side project - Daily Learning](https://daily-learning.herokuapp.com/)
* [Chrome-extension-Markdown Clipboard](https://chrome.google.com/webstore/detail/markdown-clipboard/ogoefibjphnddpjkpddnmlmecdmjbfce?hl=en-US)
useState Hook as simple as a 'cake'!
Tags: react, hooks, webdev, components
Published: 2020-12-19 11:56:33

*"Returns a stateful value and a function to update it."*

**Note:** A state variable can be a number, boolean, variable, object, or even an array 

**Method 1:**
![Hooks without functional form](https://dev-to-uploads.s3.amazonaws.com/i/xvsj4cu8cli6en1jl9dc.JPG)

vs

**Method 2:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zjngdyh7sbhti4dqdwl3.JPG)

*Always Prefer "Method 2" over "Method 1" *

**Reason:** 
React functional components are just closures, the state value that you have in the closure might be outdated

**1.)** The update function is considered to be **async** in nature which means that you shouldn't expect immediate value change for the count after setCount call and, thus can't rely on that new value.

**2.)** When you call the update function multiple times in the same closure, the react functional component without a functional form might break.

The "+" and "-" buttons use the functional form because the updated value is based on the previous value. But the “Reset” button uses the normal form because it always sets the count back to the initial value.

**Happy Coding**

*-Jayant Khandelwal*

<a href="https://www.buymeacoffee.com/jackent2b" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
How do YOU secure your remote database?
Tags: discuss, digitalocean, database, security
Published: 2020-12-19 11:52:22

The simplest example would be MongoDB Atlas. **Which IP addresses do you allow in development?** (Why can't it be secured by SSH in development? Also, considering you work on the move, using mobile hotspot, how do you deal with it?)

Harder example is self managed DO droplet / VPS. How much do allow for `ufw allow $PORT/tcp`, or `ufw allow from $IP to any proto tcp port $PORT`?

At least in Postgres + DigitalOcean, I have to allow in _three (3)_ places.

```sh
# /etc/postgresql/12/main/pg_hba.conf
host all all 0.0.0.0/0 md5
```

<small>My settings is actually `host $DB $USER 0.0.0.0/0               md5`, but what the heck is Subnet mask?</small>

```conf
# /etc/postgresql/12/main/postgresql.conf
listen_addresses = '*'
```

```sh
sudo ufw allow 5432/tcp
```

But, isn't ALLOW ALL just bait for security hell?
How to use JQuery? What is it? Written By Nima Owji
Tags: webdev, javascript
Published: 2020-12-19 11:52:18

#Intro
Hello, My name is Nima Owji. I am a 14 years old programmer. Today, I want to talk about JQuery! What is JQury? jQuery is a JavaScript library. You can use it on your websites.

#How to add JQuery to our project?
You can download JQuery from https://jquery.com/download/ or you can use a CDN (Content Delivery Network). There are many CDNs for JQuery. 

After that, you should reference it to your HTML page (Like CSS but a bit different)!

As you know you can write your codes in "script" tags. You can also use the src attribute of script tags for referencing a js file!

See this example:
```HTML
<script src="jquery-3.5.1.min.js"></script>
```
You should assign your JQuery path to the src attribute. For Example, my JQuery is in root and I can simply write the name of the file.

#How to use JQuery?
You should write your scripts after referencing JQuery because if you write your codes before it, they won't work.

You can simply write your codes in another .js file or in script tags.

Like this:
```HTML
<script src="jquery-3.5.1.min.js"></script>
...
<script>
   //Your JQuery Codes
</script>
```

#How to write JQuery codes?
JQuery codes are too easy, first of all, you should call JQuery. For this, you should use a "$" at the beginning of your codes.

After "$", you should select one or many elements, for this, you can use CSS query selectors.

Like this 
```HTML
<script>
   $("#MyElementID")...
   $(".MyClass")...
   $("MyElementTagName")...
</script>
```

after that, you can modify your elements with JQuery methods, They are so many and I can't tell you all of them but you can search for them in documentations.

For example, this code will hide an element with "el1" id!
```HTML
<script>
   $("#el1").hide();
</script>
``` 

#JQuery Codes
jquery codes are like this:
```
$(css_selector).[jquery_method];
```

#Follow me on Twitter and don't forget to like it!
I hope you liked this article. If you liked this, Please follow me on Twitter https://twitter.com/nima_owji. And like this article. Thanks a looooooooooooot. Have a nice time!
Building Fail-Safe Scrapers: Example of Writing a Self-Monitoring Scraper
Published: 2020-12-19 11:46:19

In an earlier post, we have seen how we can build a simple web scraper that scrapes Airbnb listings. In a perfect world, this is enough. But in the real world, you will see that scrapers fail more often than silicon valley startups.

This can be avoided by building in monitoring systems inside of our scraper. This is an example of a simple monitoring system that converts the code in the blog post above to something that is more monitor-able, debuggable, and reliable. You can make it more sophisticated by adding database logging and other hooks to it.

First, we need a working list of places a scraper/crawler could fail. Here is a simple starter list.

List of places scrapers fail

Url fetch errors: Website is down
Url fetch errors: Our internet is down
Url fetch errors: Website times out
Url fetch errors: too many redirects
Url fetch errors: IP blocked
Url fetch errors: Captcha challenge issued
Scraping errors: Website changed the pattern
Scraping errors: Some data pieces are missing
There are more.
We will now define a simple function that handles all the monitoring needs.
Just the requests object can fail in many ways. The code above takes care of that. You can extend this to other error codes as well.
This code checks if there is an IP block or a Captcha challenge because we KNOW that the length of the HTML is more than 200 bytes usually.
This code checks if the primary pattern is still working. In the above example, its a deal-breaker. It issues an alert.

You can apply this to individual data pieces in your selector codes as well.
When run, it could produce data.
In more advanced implementations, you will need even to rotate the User-Agent string, so Airbnb cant tell its the same browser!

If we get a little bit more advanced, you will realize that Airbnb can simply block your IP, ignoring all your other tricks. This is a bummer, and this is where most web crawling projects fail.

Overcoming IP Blocks

Investing in a private rotating proxy service like Proxies API can most of the time make the difference between a successful and headache-free web scraping project, which gets the job done consistently and one that never really works.

Plus, with the 1000 free API calls running an offer, you have almost nothing to lose by using our rotating proxy and comparing notes. It only takes one line of integration to its hardly disruptive.

Our rotating proxy server Proxies API provides a simple API that can solve all IP Blocking problems instantly.

With millions of high speed rotating proxies located all over the world
With our automatic IP rotation
With our automatic User-Agent-String rotation (which simulates requests from different, valid web browsers and web browser versions)
With our automatic CAPTCHA solving technology
Hundreds of our customers have successfully solved the headache of IP blocks with a simple API.

A simple API can access the whole thing like below in any programming language.
Moving away from Hugo
Tags: dohackathon, hugo, react
Published: 2020-12-18 19:38:17

As part of the [Digital Ocean App Platform Hackathon](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k) I am going to remake my Portfolio website. The question here is why, when I have an existing portfolio website that does its job?

There are many reasons for this, but first I'll go over why I love my current setup

# Why Hugo is great

**Hugo is really really fast**, it does in milliseconds what will take other static site generators minutes. This means that I never need to worry about how long my build will take, and so the content is updated as fast as possible.

**Hugo is already set up to be a blogging platform**, there is built in support to mark files as drafts and so not publish them. You also don't need to add any boilerplate code to get up and running with a blog format where you have a page of all the blogs and lots of blog pages.

# Why I might want to move from Hugo

**I can use a CMS**, this gives a better authoring experience than what is possible with Hugo. I currently use Forestry as a CMS for Hugo, but due to it being git based rather than API based, there is a limit to the features it can provide. An example of this is when adding technologies to my portfolio projects, I have to manually set up the technology each time with title, image and link, whereas with an API based CMS I can predefine the technologies and just include them with one click. 

**I can use React**, I'm thinking of moving away to a React based static site generator. This provides an advantage as I don't need to manually include Alpine.js which I currently use for the interactivity and React provides a greater range of features. I can also use React libraries such as Framer Motion to provide animation on the website.

**Greater flexibility**, Hugo is great at doing what it is designed to do, but I was already somewhat stretching the use case for Hugo with single pages beyond the index page. In comparison, React based static site generators are just frameworks for single page apps, and I can make whatever I want with them.
Cool Websites Every One Should Visit!!
Tags: webdev, javascript, python, tutorial
Published: 2020-12-19 11:44:27


**1) Live Stats**

- Internet users in the world

- Total number of websites

- Email sents today

- Google Searches

- And lot more 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608371596634/iFQ9iKHSR.png)

**https://www.internetlivestats.com/**










**2) Udemy Free Courses and Coupons:**


- Discudemy

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608371890654/xPB7xAK3h.png)

**https://www.discudemy.com/**


- GeeksGod

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608371912343/kROUPh2_u.png)

**https://geeksgod.com/**


**Connect**

- Twitter

https://twitter.com/NewGenDeveloper





> 
Will be updating this blog regularly with new cool and helpful websites.
Various Allocation Methods in Contiguous Memory Management | Operating System - M05 P05
Tags: linux, beginners, tutorial, devops
Published: 2020-12-19 11:25:44

**This is a multipart blog article series, and in this series I am going to explain you the concepts of operating system. This article series is divided into multiple modules and this is the fifth module which consists of 26 articles.**

_In this article we will see various methods for allocation in primary memory in contiguous memory management system._

1. **First-fit:** 
    - Allocate the first hole that is big enough.
    - In it searching time is less.
    - Fast and simple to implement.
2. **Next-fit:** 
    - Same as first-fit but start search always from last allocated hole.
    - Search time is more than first-fit, as it has to search for the last hole that was filled.
3. **Best-fit:**
    - Allocate the smallest hole that is big enough.
    - It will search the entire list, that’s why it is slow.
    - It will allocate the process to that hole which will have the minimum internal fragmentation.
4. **Worst-fit:**
    - Allocate the process to the largest hole.
    - It will always search the entire list that’s why it is slow.

_So this was all about various allocation methods in contiguous memory management system. Hope you liked it and learned something new from it._

If you have any doubt, question, quires related to this topic or just want to share something with me, than please feel free to contact me.

### 📱 Contact Me

[Twitter](https://twitter.com/r_mishra10)
[LinkedIn](https://www.linkedin.com/in/rahul-mishra-66210b185)
[Telegram](https://t.me/rahul_mishra10)
[Instagram](https://www.instagram.com/rahul_mishra10/?hl=en)

### 📧 Write a mail
<rahulmishra102000@gmail.com>

#### 🚀 Other links

[GitHub](https://github.com/rahulMishra05)
[HackerRank](https://www.hackerrank.com/rahulmishra10201)
org.codeaurora.btmultisim
Tags: codequality, programming, computerscience
Published: 2020-12-19 11:17:10

There are so many data file managers over there. On ios, AppStore and android google play store contains tons of the data managers. Many of them are provided by the authentic sources and contains many features. But on the ark side, there are many of the managers are corrupted and sending some data of your phone or keep track of your data by using these data managers.

---
title: org.codeaurora.btmultisim, originally posted here 👇
canonical_url: https://kodlogs.com/blog/17/org-codeaurora-btmultisim
---

Many corrupted data managers use the file making tactics for keeping a track record. 

#How it works?

→ The track of the files can be done by two types. Installing additional files into the platform. OR adding files or extracting constantly for hours and hours.

‘org.codeaurora.btmultisim’ is the most data corrupters are using. It is a file transfer protocol and contains the power of the tackle each anti corrupt software. It causes the overwhelming of the files of gigabytes in the pc or phones. 

##How to stay away?

→ By using the authentic data managers the data robbery and tracking can be stopped. Google has removed almost each of the data sources. From a loophole, the protocol can enter in the phone.

→ Removing files is also a good idea, but not a solution.