teleren/devto huggingface dataset:
Hacker101 CTF-Micro-CMS v1
Tags: ctf, capturetheflag, hacker101
Published: 2021-06-26 10:31:34

<ul>
<li>Difficulty: Easy</li>
<li>Skills: Web</li>
</ul>

### Flag0
I created a new page and realized the indexing was weird. The 'test' and 'markdown' page already created is indexed as page 1 and 2 respectively. However, when a new page is created, it is indexed as 10.<br> This means that page 3 and 9 are missing or hidden. So by editing the page number on the website address, I tried opening pages 3 to 9. All the pages showed 404 except page 6 which displayed a forbidden message. <br>
Looking at how other pages are edited, I noticed a pattern in using their index. So applying a similar concept and opened page 6 in editing mode, getting the flag.
  
### Flag1
The hint in the flag suggested trying out the normal culprits; XSS, SQL injection, path injection. So I went with XSS, adding a script tag in all inputs. I was using <code>< script>intruder()< /script ></code> and pasting it in all the inputs. <br> 
I tried creating a new page and for the page title, I input this script tag. When I saved the page, the flag popped up in an alert box. 

### Flag2
For this flag, I injected an alert code in the button on Markdown test page. On clicking the button, I got the flag from the inspect page. 


### Flag3
For this flag, I considered SQl injection to examine it. The hint indicates that one needs to try other options lest script tags. In the pages, I added an apostrophe (') at the end of the url and finally got the flag from the edit page.
Socket.io in Nodejs using Nginx
Tags: node, socket, nginx
Published: 2021-06-26 10:16:23

[Socket.IO](http://socket.IO) helps in real-time, bi-directional and event-based communication between the browser and the server. [socket.io](http://socket.io) is available on npm and it can be installed using the command 

```jsx
npm install socket.io
```

We create a http.server using the http createServer() method.

```jsx
const http = require('http');
const server = http.createServer();
```

To start this server we need to use the listen method.

```jsx
server.listen(port);
```

Now initialize the [socket.io](http://socket.io) so that we can start listening the emitted events and also can emit the events. We can use the http.listen.createServer().

```jsx
const io = require('socket.io')(server);
// create a socket conection 
io.sockets.on('connection', function (socket) {
// receive the event 'event name' 
  socket.on('event name', function (name) {
    //do action once socket event received
  });
});
```

There is no need of https.createServer(), http createServer() will work here.

Let's setup the nginx to support the socket.io. If their is only single instance of Nodejs runnig then it won't required any additional configuration but if their is multiple instance running then we need to make changes so that nginx forward the request from client to same port on which it was registered initially else server will send error session id unknown.

```jsx
 upstream backend {
    ip_hash; // it is required so that socket.io request forward to the same port on which it was registered
    server ip_address;
}

server {
    server_name www.example.com;

    location / {
       proxy_pass http://backend;
    }
}
```
Setup CI/CD pipeline in bitbucket
Tags: bitbucket
Published: 2021-06-26 10:14:44

Nowadays we all use the cloud to deploy the frontend or backend code and Bitbucket for code hosting and collaborate with others. If we manually deploy our frontend or backend code on the cloud then it would take lots of our time and there is a chance of error. To save our time, effort and reduce the chance of error we automate this process and setup CI/CD. There are many tools to setup CI/CD process. Bitbucket also has the option to set up a pipeline to automate the deployment process. We used it to set up our CI/CD pipeline for our website, which is created using react, deployed on google app engine.

Bitbucket create bitbucket-pipelines.yml and we add code in this file to manage our CI/CD. We can add different deployment code depending on the different branch so that we can manage different build flavour like dev, prod, staging etc.

Steps to setup CI/CD pipeline:

Select the deployment option from left sidebar.

It opens an editable file bitbucket-pipelines.yml, we can edit the file there and commit or we can create that file locally, if not already created, edit it in editor and push on bitbucket.

Now comes the script part:

Indentation is essential in this script. We add different branch inside the branches block and then deployment code for that branch

pipelines:

branches:

master:

There are two step in deployment for each branch build and then deploy

master:

- step:

script: # Modify the commands below to build your repository.

- npm install

- npm run build

artifacts:

- build/**

It installs all the required library, runs the build step and creates the build folder. We can add different build command in our package.json for different build flavour and use in place of npm run build. Artifacts pass file from one step to others by compressing them from one step to others.

Second step

-step:

name: Deploy

deployment: production

script:

- pipe: atlassian/google-app-engine-deploy:0.2.1 [//click](//click) on explore more pipes there is an option for google app engine, click on it and you will get the latest pipe.

variables:

KEY_FILE: 'we save the key in a variable and use the file name here'

PROJECT: "project id of the google cloud project"

This step uses to deploy code. The step to create key file added in variables are

go to your GCP dashboard →IAM admin → service account → app engine service account → click on 3 dot option and click on create a key and generate JSON file. There you will get the private key. In the deployment, you get the option to add a variable in the right side. Give some name and add the private in value and then use the name in KEY_FILE.

In my next blog post, I will write about how to add environment variable for different build flavour and build command in package.json file.
Google MicroSoft Facebook Interview Question
Published: 2021-06-26 10:08:54

The syllabus for the interviews is very clear and simple:
1) Dynamic Programming
2) Super recursion (permutation, combination,...2^n, m^n, n!...etc. type of program. (NP hard, NP programs)
3) Probability related programs
4) Graphs: BFS/DFS are usually enough
5) All basic data structures from Arrays/Lists to circular queues, BSTs, Hash tables, B-Trees, and Red-Black trees, and all basic algorithms like sorting, binary search, median,...
6) Problem solving ability at a level similar to TopCoder Division 1, 250 points. If you can consistently solve these, then you are almost sure to get in with 2-weeks brush up.
7) Review all old interview questions in Glassdoor to get a feel. If you can solve 95% of them at home (including coding them up quickly and testing them out in a debugger + editor setup), you are in good shape.
 Practice coding--write often and write a lot. If you can think of a solution, you should be able to code it easily...without much thought.
9) Very good to have for design interview: distributed systems knowledge and practical experience.
10) Good understanding of basic discrete math, computer architecture, basic math.
11) Coursera courses and assignments give a lot of what you need to know.
12) Note that all the above except the first 2 are useful in "real life" programming too!
Interview 1:
Graph related question and super recursion
Interview 2:
Design discussion involving a distributed system with writes/reads going on at different sites in parallel.
Interview 3:
Array and Tree related questions
Interview 4:
Designing a simple class to do something. Not hard, but not easy either. You need to know basic data structures very well to consider different designs and trade-offs.
Interview 5:
Dynamic programming,
Computer architecture and low level perf. enhancement question which requires knowledge of Trees, binary search, etc.
Conclusion: "It's not the best who win the race; it's the best prepared who win it."
Hacker101 CTF- A little something to get you started
Tags: ctf, capturetheflag, hacker101
Published: 2021-06-26 10:08:41

I recently got interested in CTF's and figured Hacker101 is the best place to start. In this series, I will be documenting my progress with flag 'hunting'. The series is more of a journal on my part, but I would be happy if it helped someone. Don't worry, I won't post the flags themselves, just the method I used to find them. 

<ul>
<li>Difficulty: Trivial</li>
<li>Skills: Web</li>
</ul>
### flag0
Inspecting the page source, I noticed that there is a background image in the body. Weirdly, this image is called directly from the local directory. For this reason, I added background.png to the website address and got the flag.
Vue Basics - Simplifying Vue Docs
Tags: vue
Published: 2021-06-26 07:38:17

###What is Vue?
Vue is a progressive framework for building user interfaces. Progressive means that it can be implemented incrementally instead of having to implement it from start to finish.

###What is Declarative Rendering?
Understanding imperative rendering will make it easier to understand declarative rendering because declarative rendering was devised as an improvement to imperative rendering.

Imperative rendering is about how while declarative rendering is about what. This means that in imperative rendering you have to write down each step while in declarative rendering you just have to focus on what you want to do. An example of imperative vs declarative rendering achieving the same result is provided below. We can easily tell that declarative rendering requires less code. 

Imperative
```js
function createList(items) {
  let list = $("<section><h1>My List</h1></section>");
  let bullets = $("<ul></ul>");
  list.append(bullets);
  for (const item of items) {
    list.append(`<li>${item}</li>`);
  }
  return list;
}
```

Declarative
```vue
<h1>My List</h1>
<ul>
  <li v-for="item in list">{{item}}</li>
</ul>
```

Another way to look at the difference between imperative and declarative rendering is that in imperative rendering many different functions *push* down info to an element. Declarative rendering, on the other hand, *pulls* info down from state and props.

######How does Vue render data declaratively?
Vue does this by using HTML-based template syntax. This HTML-based syntax is familiar to a lot of people who have experience in HTML/CSS and significantly reduces the learning curve for many people. Vue connects the DOM to the data and makes everything reactive. Reactive meaning that the data rendered on the HTML is updated automatically by Vue.

###How Does Vue Handle User Input?
Vue handles user input by using the v-on or the v-model directives to attach event listeners that invoke methods on instances.

######What are directives?
Directives are special HTML attributes that allow the manipulation of the DOM.

###What Are Components in Vue?
######What are components?
Components are small building blocks that make up an application.
######Why are they useful?
They are useful because they can be reused by inserting data(**props**) into them.
Is Google considered to be artificial intelligence (AI)
Tags: algorithms, machinelearning, programming, database
Published: 2021-06-26 09:51:54

No, Google can't be considered to be an AI (Artificial Intelligence). It's anything but a very huge MNC which offers various innovation services to everyday citizens and organizations. Google utilizes AI or Artificial Intelligence innovations to broaden their already great offerings and services that will empower our lives and will help make all the information organized and effectively available. Furthermore, that is actually what Google's main goal is; "to make the world's information organized and effectively available" This organization has been profound into AI, for over several years now, and has gained most extreme traction and carried out these fruitful ventures to further fuel the growth of their services. 

Google is determined to bring General AI to life and to assemble Google Brain. Starting today, everyone is utilizing Task-explicit AI, which is programmed to learn and apply the information it gained to do a job effectively with no form of human intervention. However, General AI will actually want to learn without anyone else, take choices without help from anyone else, and develop itself, which will totally mirror the individual's brain. Google executes subsets of AI, similar to Machine Learning (ML), Deep Learning, NLP into its services, similar to Google Search, YouTube, Google Assistant, and so on

If you are excited about AI and wish to make a career in this domain, I recommend enrolling in a good [Masters In Artificial Intelligence in India](https://intellipaat.com/masters-in-artificial-intelligence-india/) from Intellipaat
React Native Camera Take Picture Example
Tags: reactnative
Published: 2021-06-26 09:45:12

Hi Guys,

In this blog,I will learn you how to use camera take photo in react native. We will show example of camera capcher picture in react native. You can easliy create react native camera take picture. First i will import Camera namespace from expo-camera, after I will make camera capcher image using in react native.

More..
https://www.mywebtuts.com/blog/react-native-camera-take-picture-example
My javascript / tech / web development newsletter for 2021-06-26 is out!
Tags: javascript, tech, webdev, discuss
Published: 2021-06-26 09:23:30

---
title: My javascript / tech / web development newsletter for 2021-06-26 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

Unicorns in the UK, Crypto all the entertainments, Windows 11, Cookie blocking delayed, Amazon gets into podcast hosting, Funding open source projects in the modern world

https://markjgsmith.substack.com/p/mark-smiths-newsletter-26-06-2021

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Site using nextjs and firebase that is inspired by dev.to 
Tags: nextjs, javascript, react, firebase
Published: 2021-06-26 09:19:06

I made a site using nextjs and firebase that is inspired by dev.to

Here is the preview --> https://social-blog.vercel.app/

Sign up for an 👨‍🎤 account, ✍️ write posts, then 💞 heart content created by other users. All public content is server-rendered and search-engine optimized.
Things you should master before you jump on React.js !!
Tags: react, javascript, webdev
Published: 2021-06-26 08:45:30

<h1> What is React.js ?? </h1>
<h3> React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple.</h3>


<strong><h1>Prerequisites</h1></strong>

1. <u>Basic knowledge of HTML, CSS, and JavaScript</u>, this is a must. Even if you have basic understanding about that its enough to get started in React.js

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce5bg48x8dnb9rujf01y.png)
 

2. <u>Basic understanding of ES6/ES7 features of Javascript.<u>

To get started you should at least know the following features:
    a. Let
    b. Const
    c. Classes
    d. Arrow functions
    e. Imports and Exports

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68hx6dp5xfl2wjagiuqz.png)
 

3. Basic understanding of how to use npm/yarn.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zopt91ioe6qhvtcsbnfu.png)
 
These 3 things are the most important things you should know to get stared with <strong>React.js</strong>

If you have a good understanding about these things you are pretty good to get started in the React.js world, 

<u>*I would like to give you one more tip that is that never doubt you self by looking at someone's success, believe in you self and learn and try to beat yourself everyday! with time you will get better in it.*</u>

Happy Coding 🚀
I have designed React interview questions fantasy flashcards
Tags: react, reactnative, beginners
Published: 2021-06-26 08:42:20

Lately I was not posting too much, because I was focused on preparing a new fantasy flashcards deck.

It moved to the stage 2, so I have started to work on some Blender renders of a new deck, especially the box artwork:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k623mkpdfrnwn3xay0ku.jpg)

I must say, Blender is an awesome tool to design 3D stuff. There are also tons of video tutorials on YouTube. After the initial design, my computer worked all night to render an animation. But when I woke up and combined images into a video, it didn't satisfy my expectations. I had to change the video. Eventually it looked like it was it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4z6v1zn3b0zs3nov710o.jpg)

Again, I had to leave my computer processing the rendering during the night. And finally this morning I woke up to a good animation. I am excited to share it with you. It is how React Interview Questions Summon The JSON deck will look like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbwpqt0mazk4frwpsebu.gif)

Currently, the deck is in the pre-order state, and soon will start to be shipped. So if you like to save some money, it is the best time to do so: https://summonthejson.com/products/summon-the-json-react-interview-questions-deck
How is JS Code Executed?
Tags: javascript
Published: 2021-06-26 08:41:16

####What happens when you run JS code?
Phase 1: Memory Creation Phase
First, a global execution context is created. Second, JS allocates memory to all variables and functions. Variables are initially assigned *undefined* values while functions are copied wholly instead of assigning values of *undefined* like variables which is also why hoisting is possible but we will get to that later.
Phase 2: Code Execution Phase (code is executed from top to bottom)
The actual values of the variables are assigned and functions are invoked.
Phase 3: All the execution contexts including the global execution context are popped off once the code is done executing.

####What happens when a function is invoked?
When a function is invoked a new execution context is created with a memory and code execution component. It goes through the same two phases mentioned previously. It first allocates memory to variables and functions then it executes the code. 

####What happens while executing a return statement?
It returns the function to the place that it was invoked. 

Let's go over the whole process with following code.

```js
var a = 3;
function aMultiply (num) {
  var result = num * num;
  return result
}
var aMultiply1 = aMultiply(a);
var aMultiply2 = aMultiply(4);
```

First, the global execution context is created assigning variables a, aMultiply1, & aMultiply2 with *undefined* values. Functions are copied to the memory component. Let's see how this actually works in the browser. I put a debugger in line 2 in the following image. As you can see in the scope section, the variables have values of undefined while functions have the entire function copied to the memory.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haqnl5xendw9jbgjrxku.png)
 
Second, the code is executed one by one. If there is a variable, the actual value is assigned which would be *3* in this case for *var a*. Functions do not need to be assigned a value because it is already copied in the memory component.
If a function is invoked like in *var aMultiply1*, another execution context is created. The same process of allocating memory and executing code is repeated until the function is returned. Once the function is returned it goes back(or returns) to the place that it was invoked which would be to *var multiply1* in this case. Then it would proceed to invoke *aMultiply2*.

As you can see in the snapshot below, when *aMultiply1* is invoked another execution context is created in the call stack.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy7hwuqtg7gvg54dooov.png)
 

####What is the call stack?
JS manages this whole process mentioned above using a call stack. First the global execution is pushed into the stack before code is even executed. Then when a function is invoked a new execution context is pushed into the stack. When the function is returned it is popped off the stack. JS continues to run until the global execution context is popped off and the call stack is empty.
What is the JS Execution Context?
Tags: javascript, beginners
Published: 2021-06-26 07:59:33

####What is the execution context in JS?
Everything in JS happens within an execution context. Imagine a big box with two sides or look at the diagram below. The left side is the memory component(variable environment) while the right side is the code component(thread of execution).

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2wm8u7b4hmhesbluuqt.png)
 

######What does the memory component of the execution context do?
The memory component(variable environment) is where all the variables and functions are stored in key value pairs even before code is executed.

######What does the code component of the execution context do?
The code component(thread of execution) is where all JS code is executed one line at a time.

####Is JS a synchronous single-threaded language?
Yes.

######What does single-threaded mean?
Single-threaded means that JS can only execute one thing at a time.

######What does synchronous mean? 
Synchronous signifies the order in which JS executes code. JS can execute the next line of code only if the current line of code has been executed.
How to Use useDebounce Hook in React Native
Tags: react
Published: 2021-06-26 07:51:50

useDebounce hooks - it’s name represents - used for debouncing. It is used to postpone execution to a later time like setTimeout in React Native.useDebounce hooks - it’s name represents - used for debouncing. It is used to postpone execution to a later time like setTimeout in React Native.

useDebounce hooks - it’s name represents - used for debouncing. It is used to postpone execution to a later time like setTimeout in React Native.useDebounce hooks - it’s name represents - used for debouncing. It is used to postpone execution to a later time like setTimeout in React Native.

useDebounce hooks - it’s name represents - used for debouncing. It is used to postpone execution to a later time like setTimeout in React Native.useDebounce hooks - it’s name represents - used for debouncing. It is used to postpone execution to a later time like setTimeout in React Native.

[How to Use useDebounce Hook in React Native](https://www.codecheef.org/article/how-to-use-usedebounce-hook-in-react-native)
How to Use Custom Trait in Laravel Controller
Tags: laravel, trait
Published: 2021-06-26 07:29:01

Today is an auspicious day because we are going to learn about Laravel 8 Traits, how to create Trait in Laravel, and how to use Trait in the Laravel 8 application. Traits allow us to develop a reusable piece of code and inject it in controller and modal in a Laravel application.


Laravel 8 Traits Example: Create & Use Trait in Laravel
Last updated on: May 13, 2021 by Editorial Team
Today is an auspicious day because we are going to learn about Laravel 8 Traits, how to create Trait in Laravel, and how to use Trait in the Laravel 8 application. Traits allow us to develop a reusable piece of code and inject it in controller and modal in a Laravel application.
I would like you to comprehend the entire process, respectively, with a basic app example. In this app, we will render student records from the database and display them on the frontend. I will take the holistic approach that helps you understand the Laravel Traits topic with persistence and help you comprehend the correct usage of Traits in Laravel.
[How to Use Custom Trait in Laravel Controller](https://www.codecheef.org/article/how-to-use-custom-trait-in-laravel-controller)