teleren/devto huggingface dataset:
Facebook Post Box Clone Using HTML & JavaScript
Tags: javascript, html, css, tutorial
Published: 2022-01-12 11:23:16

Hey everyone, today in this tutorial, you’ll learn **how to create a Facebook Post Box in HTML CSS & JavaScript**. In the previous tutorial, I have shared [How To Create AdBlock Detector using HTML & JavaScript](https://codegyan.in/articles/how-to-create-adblock-detector-using-html-javascript.htm). Now it’s time to create a Facebook Post Box and its drop-menu animation like facebook.


![Facebook Post Box Clone Using HTML & JavaScript](https://codegyan.in/articles/wp-content/uploads/2022/01/Facebook-Post-Box-Clone-Using-JavaScript.png)

If you wann to read full article about Facebook post box clone you can read on [codegyan](https://codegyan.in/articles/how-to-create-a-facebook-post-box-in-html-css-javascript.htm).
3 Facts About Computer Pioneer Konrad Zuse
Tags: history, programming, software, computers
Published: 2022-01-12 11:22:51

---
title: 3 Facts About Computer Pioneer Konrad Zuse
published: true
tags: history,programming,software,computers
---

Konrad Zuse is widely regarded as one of the creators of the modern computer. In 1942 he released the Z3 which was the first digital computer. After the war, he founded his own computer company and made significant contributions to both computing and software.

There are though three interesting facts about Zuse which highlight his ingenuity and influence.

- In 1938 he completed his first computing machine, the Z1. At the time of its construction he had no money. So in true Jobs and Wozniak fashion he built it in his parents' living room.
- Zuse created the first computer game, a simulation of Chess. This was based on the first programming language, Plankalkül, which Zuse created in 1945.
- In 1950 Zuse founded his own computer company and built one of the first transistor-based computers. This company was taken over by Siemens in 1969, today Siemens turns over more than €50bn annually.

Zuse was a genius and an innovator, he made huge contributions to the academic, technical and business worlds. He can be regarded as the Jobs and Wozniak of his era. Or maybe Jobs and Wozniak should be regarded as the Zuse of theirs.

For more on the history of Konrad Zuse watch this video on the great man.

{% youtube 6GSZQ9g-jiY %}

---

**Useful Sources**
- https://mathshistory.st-andrews.ac.uk/Biographies/Zuse/
AtlasHackathon: "Tralive" (An Online Travel Booking App)
Tags: atlashackathon
Published: 2022-01-12 11:22:37

### Overview of My Submission
This project is an online travel booking website using React.js as front-end, and Express as backend and MongoDB Atlas as database. This project is created to participate in the MongoDB Atlas Hackathon.


### Submission Category: 

Choose Your Own Adventure


### Link to Code

{% github Md-Abdur-Raheem/tralive %}

[Live-site](https://tralive-faad8.web.app/)

### Technology Used

- React.js, React Bootstrap, CSS3
- Node.js , Express
- Firebase Auth.
- MongoDB Atlas

### Additional Resources / Info

I have used MongoDB atlas to store all of my Destinations as well Bookings & Users data. I have done CRUD operation to get, read, write and delete data from my backend server.


![All destinations data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84svt7i39q82az0qjzxw.jpg)

In the above screenshots I have used a get request to my backend server to get all of the available travel destinations form MongoDB Atlas.


![destination booking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy59iliwgrfegud75thn.jpg)

In the booking destination page a user can book their desired place which is done by a post request in my server to MongoDB Atlas.


In this website there is full control of admin panel.


![admin panel/addDestination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zli6uhqqvslst206ide.jpg)

An admin can add or remove any destination place. He/She can cancel a user's booking. He/She can make another user an admin as well as can remove an admin. All these have been possible by some CRUD operation with MongoDB Atlas.


![Contact form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbziwgooymshbfejojog.jpg)

There is a fully functional contact form by which an user can easily contact with "Tralive" administrators.

[This](https://github.com/ajyounguk/mongodb-crud-client) project is also following my workflow.


## Deployment
- Firebase for front-end hosting.
- Heroku for back-end hostiong.
Uploading bulk data into Salesforce using Salesforce Bulk V2 Data loader connector
Tags: webmethods, integration, cloudstreams, salesforce
Published: 2022-01-13 12:52:48

---
title: Uploading bulk data into Salesforce using Salesforce Bulk V2 Data loader connector
published: true
date: 2022-01-12 11:21:06 UTC
tags: webmethods, integration, cloudstreams, salesforce
canonical_url: https://tech.forums.softwareag.com/t/uploading-bulk-data-into-salesforce-using-salesforce-bulk-v2-data-loader-connector/254427
---

 **SUMMARY**  
This article guides you through the step-by-step process to load data into Salesforce using Salesforce Bulk V2 Data Loader v51 connector in [webMethods.IO](http://webMethods.IO) Integration.

**PREREQUISITES**

1. Salesforce CRM REST account credentials
2. AWS S3 credentials.
3. [webMethods.IO](http://webMethods.IO) Integration tenant credentials

**CONTENTS**

1. Preparing the csv file containing data to be uploaded
2. Creating a flowservice that uploads data in bulk into Salesforce backend.

**STEPS**

Visit the [original article](https://tech.forums.softwareag.com/t/uploading-bulk-data-into-salesforce-using-salesforce-bulk-v2-data-loader-connector/254427) to learn the step-by-step process on how to load bulk data into Salesforce using the Salesforce bulk V2 data loader connector.
Technical Writing Journey Part 1
Published: 2022-01-12 11:14:18

Have you ever wondered what technical writing is all about? Well, at first, it can be difficult to define what it means or entails, especially when you lack proper guidance or a mentor to kick start your journey in this space. I spent months watching video tutorials, conducting google searches, and reaching out to professionals with 'eye-catching' profiles. Yet, none of these efforts seem to click or fit the bucket. However, I realized technical writing is broad. It requires different sets of skills to be proficient in various fields. It is an area that feels like virgin land yet to be fully exploited in most countries, meaning it can be a rewarding career if you have the necessary skills for the market. You would probably think that I have nailed in this field, no. I am starting just like you. Below are the vital areas to focus on when beginning a technical writing journey.

Topics • FAQS. • Knowledge Bases. • User manuals(illustrative manuals). • API integration tutorials & Documentations. • Memos. • Reports. • Training material. • Tutorials. • Medical writing. • Grant writing. • Scientific writing. • Business proposals. • Product descriptions and specifications. • White papers. • Release notes. • Market Requirement Documents.

The above topics are the tip of the ocean because technical writing is ever-growing, with different writing interpretations. However, the topics are to enlighten technical writers enthusiasts about where to start.
Router Hosting Rebranded to Cloudzy
Published: 2022-01-12 10:41:26

A properly-installed organisation determining to rebrand is nothing new, of path. Just currently Facebook introduced its transformation to META, and it become not the first principal tech employer to do so. Sometimes, rebranding can cause customers to worry about the changes about to appear. If you’re already a happy consumer, trade can only be bad, right? Well, no longer necessarily.

 

It seems that former-RouterHosting’s advertising team understands the customers’ anxieties because they've taken some measures to make certain the transition to Cloudzy goes as easily as possible.

 

RouterHosting has decided on a sluggish rebranding strategy, evolving into its new identification step by using cautious step. The first step in that manner is the renaming of RouterHosting for **Cloudzy**, and the redirection in their website to Cloudzy.Com. At this degree, the layout and brand will live the equal, changing most effective at later ranges. Announcing the rebranding on their internet site, they write that their motivation in taking matters sluggish has been to reassure their current customers.
Testing react-device-detect with React Testing Library and Jest
Published: 2022-01-12 10:39:17

I needed to use react-device-detect to change a URL with a `https protocol` to `webcal protocol` in order to be able to save an `ics` file to the calendar app when using Chrome on iOs. The implementation was quite straight forward but I ran with the issue of testing this properly. I needed to mock the user's device and browser detected by react-device-detect. 

I did this by first importing the package:
```
import * as reactDeviceDetect from 'react-device-detect'
```

and then assigning the value I needed for the functions I'm using in my code:

```
Object.defineProperty(<<theModule>>, '<<the function or value needed>>', { get: () => '<<the value returned>>' });
```
This will return the desired value whenever your component calls for the specified function.

In my case, I needed to get `true` when calling isIOS and `'Chrome'` when calling browserName:
```
import * as reactDeviceDetect from 'react-device-detect';

Object.defineProperty(reactDeviceDetect, 'isIOS', { get: () => true });
Object.defineProperty(reactDeviceDetect, 'browserName', { get: () => 'Chrome' });
```

Next, to check if my protocol change was working properly, I could either check the href of the a tag as in:

```
const calendarLink = getByTestId('calendar-link');

expect(calendarLink.closest('a')).toHaveAttribute(
   'href',
   `/my-calendar.ics`
);
```

or I could fire the click and then check the protocol using the window: 

```
const calendarLink = getByTestId('calendar-link');
fireEvent.click(calendarLink);
await waitFor(() => {
  expect(window.location.protocol).toBe(
    'webcal:'
  );
});
```

That's pretty much it, I hope it helps someone ;)
Running two Kubernetes Operators locally
Tags: kubernetes, opensource, go, operatorsdk
Published: 2022-01-12 10:39:00

---
title: Running two Kubernetes Operators locally
published: true
description: How to run two Kubernetes Operators locally
tags: kubernetes, opensource, go, operatorsdk
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvq1ntix4s683l515r7p.png
---
From time to time you may wish to run two or more Kubernetes Operators locally for debugging purposes. If you try and run a second operator locally the second operator will shutdown you will hit an error like
```bash
WATCH_NAMESPACE=$(MY-OPERATOR-NAMESPACE) go run ./main.go
2022-01-07T15:16:11.786Z        INFO    controller-runtime.metrics      metrics server is starting to listen    {"addr": ":8383"}
2022-01-07T15:16:11.787Z        ERROR   controller-runtime.metrics      metrics server failed to listen. You may want to disable the metrics server or use another port if it is due to conflicts       {"error": "error listening on :8383: listen tcp :8383: bind: address already in use"}
```
So the metric port is already used.The [Operator SDK](https://sdk.operatorframework.io/) generates ports for metrics and health automatically. These are set in the main.go
 
```golang
func main() {
	var metricsAddr string
	var enableLeaderElection bool
	var probeAddr string
    //Change the port numbers on the metrics-bind-address and health-probe-bind-address to a free port number
	flag.StringVar(&metricsAddr, "metrics-bind-address", ":8383", "The address the metric endpoint binds to.")
	flag.StringVar(&probeAddr, "health-probe-bind-address", ":8081", "The address the probe endpoint binds to.")
```
As you can see there are two port assignments here `metrics-bind-address` and `health-probe-bind-address`. These ports will be occupied on your machine by the first operator you run. You should change both to a free port numbers if you wish to run a second operator side by side locally, otherwise you will get a port conflict. You should now be able to [debug](https://dev.to/austincunningham/debug-kubernetes-operator-sdk-v1-0-0-locally-using-vscode-4gkn) both operators at once while running locally. Operators built with an older version of the Operator-sdk won't have the health-probe port.  

> **NOTE:** Sometimes the Operator gets stuck shutting down and you have to release the ports manually by killing the stuck process
```bash
# Get the process on the port metric port e.g. 8383
netstat -ltnp | grep -w ':8383'
tcp6       0      0 :::8383   :::*  LISTEN      1480861/main
# kill the stuck process 
sudo kill -9 1480861
```
Polyfill and shim
Tags: javascript, beginners, webdev, programming
Published: 2022-01-12 10:35:14

I will try to give a brief overview of what polyfill and shim is and why are they used.

**[Polyfill ](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)**: It basically is a code that allows browser to support such feature which it is not capable of implementing on its own.
Generally it refers to Javascript Library which implements the HTML5 or CSS web standard.

For example, Math.floor(n) is a function that returns the largest integer less than or equal to a given number, e.g Math.floor(1.23) returns 1.

In some (very outdated) JavaScript engines, there’s no Math.floor, so such code will not work.

So how is this code supposed to work in those outdated JS engines?
Thats Where polyfill comes in.

It is a script that updates/adds new functions.It “fills in” the gap and adds missing implementations.


**[Shim ](https://developer.mozilla.org/en-US/docs/Glossary/Shim)**: A shim is any piece of code that performs interception of an API call and provides a layer of abstraction. It isn't necessarily restricted to a web application or HTML5/CSS3.

The idea here is to make it normal using certain APIs across different environments. So, if two browsers implement the same API differently, you could intercept the API calls in one of those browsers and make its behavior align with the other browser.
Launching: Open-source one-page checkout
Tags: showdev, opensource, javascript, webdev
Published: 2022-01-12 10:33:08

#[Introducing Medusa Express](https://www.producthunt.com/posts/medusa-express)⚡️

##What if you could buy and sell products via a link that sends you directly to check-out?

---

Wanted to share a cool new open-source project that we have been building for our [headless commerce engine](https://www.medusajs.com/). Medusa Express is a one-page checkout flow allowing you to purchase a product directly via a URL-link which can be smart in cases of e.g. retargeting campaigns, outbound sales, special releases, or bloggers that want to sell easily to their followers.

Medusa Express automatically creates pages for the products in your ecommerce backend each of them optimized to make the purchasing experience as frictionless as possible, by bundling the checkout flow alongside the product.

Access it in the top link!


**How it works:**

1. A customer visits a link e.g. https://www.medusa.express/t-shirt

2. The customer selects the variant of the product they wish to buy

3. Customer completes the checkout flow and the order is completedHope you might find it relevant!
I am back with 100 "Dark Mode" CSS loaders
Tags: css, webdev, beginners, showdev
Published: 2022-01-12 10:30:34

It's been a while since the last collection, but here I am with another one. Let's start 2022 with **100** CSS-only loaders. This time, I joined the Dark Side of the force to create "Dark Mode" loaders.

![the dark side](https://media.giphy.com/media/zZfNOVP35Nrkk/giphy.gif)

Always the same rule: **One** div = **One** loader. 

Let's go!

----

<center>Also available online 👇</center>
## <center>[css-loaders.com](https://css-loaders.com/)</center>

----

## Table of content

* [The Moving](#the-moving)
* [The Infinity II](#the-infinity-ii)
* [The Maze](#the-maze)
* [The Square](#the-square)
* [The Circle](#the-circle)
* [The Eyes](#the-eyes)
* [The Factory](#the-factory)
* [The Square vs The Circle](#the-square-vs-the-circle)
* [The Blob II](#the-blob-ii)
* [The 3D](#the-3d)

---

### The Moving

{% codepen https://codepen.io/t_afif/pen/NWaYwMZ %}

### The Infinity II

{% codepen https://codepen.io/t_afif/pen/KKXByeG %}

### The Maze

A dot lost in a maze...

{% codepen https://codepen.io/t_afif/pen/eYGrZPX %}

### The Square

{% codepen https://codepen.io/t_afif/pen/jOGvOje %}

### The Circle

{% codepen https://codepen.io/t_afif/pen/poWOEPm %}

### The Eyes

They are watching you

{% codepen https://codepen.io/t_afif/pen/WNZyPqX %}

### The Factory

{% codepen https://codepen.io/t_afif/pen/ExwezVW %}

### The Square vs The Circle

{% codepen https://codepen.io/t_afif/pen/xxXarQK %}

### The Blob II

{% codepen https://codepen.io/t_afif/pen/PoJavbw %}

### The 3D

You don't need 3D Glasses to watch the below!

{% codepen https://codepen.io/t_afif/pen/rNGKBwr %}


----

### That's it!

See you next collection 👍

![bye bye](https://media.giphy.com/media/L2wzqNa9gT2XWCDqRc/giphy.gif)

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

<center>**OR**</center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)
Backend roadmap 
Tags: webdev, beginners, programming, career
Published: 2022-01-12 10:24:04

If you are a fresh or junior backend engineer, you might find these questions familiar to you.
What should I learn next to take the next step in my career?
Should I learn the database first? Should I learn about cashing, load balancer, or should I learn the advanced topics in the programming language I use?



![Think with me](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9xezghzd9l6e3qcit0c.jpeg)

I found myself asking these questions a lot throughout my career, so I tried to put all the topics I knew about on a road map to help myself and others learn new things.

The road map contains three phases or levels and has the topics I think every level needs to know. 


Level 1 :

	- Problem Solving.
	- Data structures.
	- Algorithms.
	- Database Design.
	- Clean Code.
	- Domain Driven Design.
	- Micro services Structures and distributed systems.
	- Time Scale Database.
	- Git Refresher.
	- CSRF - CORS. 
	- Web Socket. And its best practice.
	- 7 Concurrency Models. (CoRoutine Model, of Go Routines).
	- Unit Testing.
	- Redis and cashing mechanisms.
	- Lexical scope vs dynamic scope. 

Level 2: 


	- Optimizations Your Apps. 
	- Managing memory leakage.
	- Related topics to Micro Services: 
		        - Message Brokers (NATS - KAFKA).
		        - CQRS. 
	- DevOps Related Topics:
			- Docker & Docker Compose.
			- CI/CD Tools Jenkins - Kubernetes.
			- High Availability.
			- Route Proxy.
			- Load Balancing.
	- More of Database:
		        - When to use View.
		        - Transactions.
		        - database indexing. 
		        - SQL injection. 
		        - locking when and why? + types 
                           of locking.
		        - what is dirty read. 
		        - data racing.
		        - database code first.
	- Graph Databases.(Ex:Neo4j)
	- Security Issues for Dev. (CIA triangle model )
	- SAAS development best practice.
	- How to build a 12 factor app.
	- How to Gracefully Close Channels in go . 
	- Mutex in go what that mean .
	- Javascript event loop.
			
			
Level 3:

	- Server-less Development.
	- Handling High Intensive Data Application.
			- Data Race vs race condition.
			- Dirty Read.
	- Infrastructure as a code (IAC) concept.
	- Workflow Programming.
	- Software Architect : 
		        - Enterprise Architect vs. Solution 
                          Architect vs. Technical Architect
		        - Event Sourcing design ( watch martin 
                           fowler talk)



##Conclusion

I hope this road map helps you to excel. I will try to tackle every point in the roadmap in upcoming articles and regularly update it.
Your contribution is highly appreciated.
Thanks for reading ❤️❤️


**_Feel free to reach out on_** [Linkedin](https://www.linkedin.com/in/ahmedwafik/)
Backend Some Questoins answer
Published: 2022-01-12 09:56:33

**Crud Operation**
Crud Operation: croud operation operate  create,update, delete,read 
Create : MongoDB insert document to collection two ways 
**db.collection.insertOne()**
db.collection.insertOne(
   { "item" : "canvas",
     "qty" : 100,
     "tags" : ["cotton"],
     "size" : { "h" : 28, "w" : 35.5, "uom" : "cm" }
   }
)

**db.collection.insertMany()**
db.collection.insertMany(
   [ <document 1> , <document 2>, ... ],
   {
      writeConcern: <document>,
      ordered: <boolean>
   }
)

**Read Operation :**
 find the data from the mongoDb database
**db.collection.find()**
Delete Operation: delete operation remove the document from the collection
**db.collection.deleteOne()
db.collection.deleteMany()**
Update Operation: Update operation modify the existing document in the collection 
**db.collection.updateOne()
db.collection.updateMany()**

**Jwt**
JSON web token short form of jwt. Jwt defines a compact and self contained way for securely transmitting information between the parties as a Json object.The Information can be verified and trusted because it is digitally signed.We use JSON web token Authorization and information exchange.

**Mongoose**
Mongoose is an object data modeling library for mongoDb and node.js. It manages relationship data, provides schema validation and is used to translate between objects in code  and the representation of those objects in mongoDb.
Git Clone a Branch
Tags: git, github
Published: 2022-01-12 09:43:05

Have you ever just wanted to clone a certain branch from your GitHub repository to work on your local machine and don't want the other 300-odd branches that the repository might have?

Well stick around and I'll show you how to do that!

## Does git clone clone all branches?
Yes it will, which can be useful if you are working across all the branches but it can also lead to confusion and commits happening on the wrong branch. 

## Clone a specific branch
I have several branches in one of my GitHub repositories, but I just want a specific branch so I can work on that and don't need the others. 

The first I do is grab the URL for the GitHub repository, in this case it's [https://github.com/weeyin83/WorkingRepo.git](https://github.com/weeyin83/WorkingRepo.git)

The first thing I do is open up my Windows Terminal, you can use a command prompt window or even the terminal inside Visual Studio Code.  Whatever is your preference. 

I now type in the command:
```bash
git clone -b sarahmonday https://github.com/weeyin83/WorkingRepo.git
```

This specifies that I want to clone the branch "sarahmonday" within the WorkingRepo repository. 

## Check which branches you have on your local machine
To double check what branches you have on your machine you can navigate to the new folder you have on your machine and run:

It should just list the branch you've just cloned. 👍