teleren/devto huggingface dataset:
Building a Blockchain Social Media Platform: Three Different Approaches to Know
Tags: blockchain, socialmedia
Published: 2021-06-17 09:39:18

Over the past few years, Blockchain has gained both value and reputation. Today, experts in various fields consider this an emerging solution to overcome the challenges of a centralized system. Technology has already disrupted many industries, with several on the way. The qualities like transparency, ultimate privacy, and top-notch security have led to the massive adoption of this revolutionized technology. 

Social media marketing is one such field that leverages Blockchain website SEO services to reach out to target audiences and generate more profits. As a result, businesses are readily investing in Blockchain social media marketing. 

Besides this, content creators rely on Blockchain solutions to earn rewards using Crypto-based social media platforms. If you are interested in building a Blockchain social media blogging platform, here are three different approaches to consider. 

●	Three different approaches to creating a social media app on Blockchain

1.	Using the Sola platform and its APIs - If you use the Sola platform and its APIs for building your Blockchain social media platform, you have to design UI/UX from scratch. Firstly, you have to obtain SOL tokens while setting up users' credentials in the Sola platform. Your potential developer will start the process in the Sola developer portal. 

2.	Using Steem.io apps - As compared to the first approach, it seems a bit complicated because some Steem.io APIs are still under development. In this, your developer will help you build a decentralized social media platform on Steem Blockchain. 

3.	Using Loom network SDK - Loom network is a Blockchain startup that has created Software Development Kits for various uses. These include building Ethereum DApps on sidechains and developing a Blockchain-based game with their Unit SDK. 

If you are looking for a reliable company to build your Blockchain social media platform, get in touch with Steem Experts. We are also known as a leading Blockchain social media ads agency. 

Visit us online https://steemexperts.com/blockchain-social-media-marketing/
O que você ensinou pro seu senior hoje?
Published: 2021-06-17 09:38:31

As vezes a gente foca energia na solução dos problemas, sem entender na real quais são os problemas.

Eu passei algum tempo pedindo ajuda, muitas vezes tive, outras vezes não.

Foi então que ao invés de pedir ajuda eu passei a ensinar. Como?

Na firma temos canais no slack pra tudo.

Quando temos um problema vamos num canal e pedimos ajuda, onde também compartilhamos dores e sucessos.

O dia a dia de todo mundo é cheio de afazeres e reuniões que tomam conta  da nossas agendas.

Um dia, estava ajudando uma pessoa nova em desenvolvimento web, enquanto eu também aprendia, num dado problema sentimos a necessidade de levantar a mão e pedir ajuda.

Foi ai que pensei, e se invés de pedir ajuda a gente ensinasse algo novo?

Fomos no canal apropriado do slack da firma e postamos o seguinte:

"Olá lindezas, temos algo que gostaríamos de compartilhar com vocês. Às 14h na sala1. Gostaríamos da presença de quem estiver disposto a aprender algo novo."

E depois disso, nos debruçamos no problema e anotamos dores e o que não compreendiamos. 

Junto da novata assistente, eu, novato pleno(rsrs), pensamos o que não entendiamos e como poderiamos ajudar nossos seniores a aprender como nos ensinar a chegar numa conclusão.

Que tal das próximas vezes que precisar pedir ajuda, voce ter algo novo a ensinar?

Ensine a como ajudarem voce a seguir na caminhada.

O que você ensinou para seu senior hoje?
T-SQL: How To Write A Left Join and Why
Tags: sql, tutorial, database
Published: 2021-06-17 09:16:26

Previously, we looked at INNER JOINs and where we may consider using them in development — a quick example might be if we have a set of data that shares a relationship with another data set and we want to return all the data from both data sets where we have matching data. There may be situations where we want to return data that also don’t match, or we may want to use the fact that the data don’t match between data sets as a filter of sorts. There are a variety of techniques to solve this and LEFT JOINs provide us with one way to accomplish this. In the video, [SQL Basics: How To Use A LEFT JOIN and Why](https://www.youtube.com/watch?v=r8v2_mCU-ko&list=PLHHm85xMQAYNScEs-nu9gzi2uoQ9JCCYA&index=2), we look at several examples of using a LEFT JOIN and why we might consider using this, as opposed to what we learned in an early week with an INNER JOIN.

Some questions that are answered in the video:
- Note the tables that we’re using and what values are identical based on the column names and what values differ based on the column names. We’ll be using these tables throughout these videos. As a note on aliasing tables — the first table always gets a “t1” while the second table always gets a “t2” and so on and so forth (the 5th table would get a “t5”). Finally, consider that some SQL languages may not support the JOINs that we discuss.
- In first our example, what do we LEFT JOIN on? Suppose that we use a different column — how might the result set that’s returned in the first example differ?
- In our second example, we flip the tables that are being joined — how does this affect the result set (if applicable)?
- Based on the results from the first two examples, how are these examples showing the LEFT in the LEFT JOIN — consider what’s happening with the results from both tables being used.
- If records match, do we get these results with a LEFT JOIN? Considering this question, how does LEFT JOIN differ from INNER JOIN?

When it comes to applying LEFT JOINs to a problem (real world use), we can see that LEFT JOINs make it easy to determine based on linking a column or set of columns what data match between two tables and what data don’t match. Suppose that we were comparing genetics of two population groups and we wanted to see the genetic overlap between these populations, but also the differences between these groups. We could accomplish this with LEFT JOINs (not the only way to accomplish this in SQL, but one way). In the world of databases, this comes up regularly — we have a source data set and we want to compare with a destination data set. Often this will involve inserting data that doesn’t exist in the destination from the source or updating information in the destination that already exists in the source.

For more SQL lessons, you can continue to watch the [SQL Basics](https://www.youtube.com/watch?v=Ied5YaCu_-0&list=PLHHm85xMQAYNScEs-nu9gzi2uoQ9JCCYA&index=1) series.
The laws of UX
Tags: ux, webdev, design
Published: 2021-06-17 09:15:56

Hi friends!

I have recently made a Twitter thread and felt I had to share it with our community here :)

{% twitter 1405115002403622917 %}


# The Laws of UX


## Fitts's Law:

The time to acquire a target is a function of the distance to and size of the target.

Meaning: make the most important objects more accessible

![0*3OKM6ZhDrJMqLDWV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rarjxp53il7xp5ykdftk.png)

## Hick’s Law:

The time it takes to make a decision increases with the number and complexity of choices.

Meaning: Simplify

## Jakob's Law:

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Meaning: don't reinvent the weel

## Miller’s Law:

The average person can only keep 7 (plus or minus 2) items in their working memory.

Meaning: Don't bombard users with information!

![Example from the Samsung's page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mdzrbqg3elgcdn3wkxm.png)
Example from the Samsung's page

## Occam’s Razor:

A problem-solving principle that the simplest solution tends to be the right one. When presented with competing hypotheses to solve a problem, one should select the solution with the fewest assumptions.

Meaning: when in dilemma, choose the simplest choice

## Tesler’s Law:

Also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced.

Meaning: Do not over-engineer or over-refactor

## Von Restorff Effect:

Also known as The Isolation Effect, this effect predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Meaning: contrast is useful!

## Zeigarnik Effect:

People remember uncompleted or interrupted tasks better than completed tasks.

Meaning: don't be intrusive

## Doherty Threshold:

Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.

Meaning: performance matters!

## Pareto Principle:

The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.

Meaning: Deal with the most important parts first!

## Serial Position Effect:

Users have a propensity to best remember the first and last items in a series.

Meaning: Positioning matters! Position the most important objects first

![Serial_Effect_5-728x372](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xu0zp64es48r1u3xu8q.jpg)
Example from the Amazon web page.

Hope you found that useful!
How to create a simple Floating Button with Xamarin.Forms/MAUI
Published: 2021-06-17 08:57:46

For a while, I have been trying to search how to create a simple Floating Button and this is my final code:

```xml
<AbsoluteLayout>
     <!--Other components-->
     <ImageButton Source="plus.png" 
            BackgroundColor="Green"
	    CornerRadius="80"
            AbsoluteLayout.LayoutFlags="PositionProportional"  
            AbsoluteLayout.LayoutBounds=".95,.95,80,80" />
</AbsoluteLayout>
```

- The `Source` is the picture you want to use.
- The `BackgroundColor` is the color you want to use in HEX.
- The `CornerRadius` is to create the form.
- The `AbsoluteLayout.LayoutBounds` is the location.

This will be the result:

[![example][1]][1]

You can get the icon from:

https://materialdesignicons.com

And I got some inspiration from here:

https://stackoverflow.com/a/54519048/1928691

  [1]: https://i.stack.imgur.com/FMDkR.png
Как я ставил win10 64bit uefi, используя usb
Tags: win10, usb, fat32, ru
Published: 2021-06-17 08:39:24

---
title: Как я ставил win10 64bit uefi, используя usb
published: true
description: 
tags: 
  - win10
  - usb
  - fat32
  - ru
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ri2motyjr247hdvhm1z.jpg
---

[tl;dr](https://gist.github.com/kaineer/e74055194e3591f1df07c676e5ff1da5)

Захотелось сапгрейдить ноут с обычного hdd 512gb на ssd 1t.

Нет вопросов, нашёлся специалист по железу, открыл ноуту крышечку, засунул железки внутрь, закрыл крышку обратно. Операционку, как я и просил, ставить не стал. Все довольны, все танцуют, винда, разумеется, не грузится.

Я засучил несуществующие рукава, загрузил образ винды с сайта майкрософт и попытался залить его на флешку. Под линуксом. После пары неудавшихся попыток вспомнил, что файлы на флешку надо тупо копировать в чистый раздел формата fat32. Нет вопросов, gparted, файловый менеджер, копируем…

Не копируем. В образе обнаруживается файл размера >4G.

Снова гуглим, находим инструкцию, которая предлагает использовать `dsim` чтобы разрезать длинный файл на пару частей. Разумеется, `dsim` доступен исключительно из-под винды. И, ура-ура, для него существует аналог под ubuntu. Эта штука называется [wimlib](http://www.webupd8.org/2013/06/wimlib-imagex-dism-alternative-to.html). Ставим её, в отдельном каталоге делим install.wim на пару частей, заливаем на флешку.

После этого я спокойно установил винду.

Ну, почти :)
You need to build a collaborative text editor RIGHT NOW!!
Tags: react, javascript, showdev, node
Published: 2021-06-17 08:27:48

![Code Editor Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s89r4l772hf6jzw1ftf.png)

## TL;DR
By building a collaborative text editor you will get to learn
* Send data from server to client - Polling/Sockets
* Algo/DS to use for efficient data transfer - Text Compare
* Update editor in such way, user's cursor doesn't move.
 There are way too many things it will teach you, read the below post to learn more or Try out the live project here -> [Live URL](https://sotly.co/bro-ide)

## Intro
Recently, I started working on this cool project, a Web Based Code Editor. So, in this post I will talk about how I implemented this project and what will be the further features I will be adding. 😃

## Preface
As we all know there are thousands of AWESOMEEE code editors out there like repl.it, codepen, codesandbox, etc. So most you must be wondering why I decided to write my own code editors.

![Am I Stupid?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y1hsf5883j433uj0hkb.png) 

What I think is, if you build a system then you will get to know how that thing really works, so my curiosity made me do it. 🙂

## Features
Lets talk about the features this web app currently has,
* Separate tabs for HTML/CSS/JS for better coding style.
* Code Output Display, shows the output by merging all codes and creating a Virtual DOM.
* Fully Mobile Responsive.
* Download merged code as text file.
* Night Mode
* Code auto save in browser
* Code Sharing Link (Planned)
* Code Collaboration (Planned)

## Tech Used
In this project, I have used,
* React - For UI
* Material UI - Design/Animation
* Redux - For State Management
* Redux Saga - For Side Effects
* Redux Persist - For Auto Save
* Socket IO (Planned) - For socket connection
* JsDiff - For Calculating Difference

## Contribution
![Contribute](https://www.drupal.org/files/contribute.png)
This project is open for contributions, even contribution to docs, readme, managing people will help others learn and we can grow together.
This is the repo url -> [Github](https://github.com/abhishekraj272/Bro-Code-Web-IDE)

Try out the live project here -> [Live URL](https://sotly.co/bro-ide)

Connect Me @ [Linkedin](https://www.linkedin.com/in/abhishekraj272/) [Github](https://github.com/abhishekraj272) [Twitter](https://twitter.com/abhishekraj272) [Youtube](https://www.youtube.com/channel/UCvHn2T8DSJzEWzYDdK3Dt8A)
[Instagram](https://www.instagram.com/abhishek.r.a.j) 😇

Ping Me Anytime with doubts related to Full Stack / Pen Testing
Angular interviews in 2021
Tags: technology, programming, angular, frontend
Published: 2021-06-29 06:27:19

---
title: Angular interviews in 2021
published: true
date: 2021-06-17 07:56:38 UTC
tags: technology,programming,angular,frontend
canonical_url: https://kevinkreuzer.medium.com/angular-interviews-in-2021-61eea28ae563
---

[![](https://cdn-images-1.medium.com/max/1950/1*TugVjDs707ITPdzxeJs54Q.png)](https://kevinkreuzer.medium.com/angular-interviews-in-2021-61eea28ae563?source=rss-6cd4fff6b841------2)

Here’s what you should know going into an interview

[Continue reading on Medium »](https://kevinkreuzer.medium.com/angular-interviews-in-2021-61eea28ae563?source=rss-6cd4fff6b841------2)
What is Babel?
Tags: babel, javascript, reactnative, react
Published: 2021-06-17 07:52:01

## According to [babeljs.io](https://babeljs.io)
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards-compatible version of JavaScript in current and older browsers or environments.
### 
* It is a great tool for backwards compatibility of modern javascript code.
* With babel, we can write modern javascript that are not implemented in web browsers yet.
* It compiles down the new modern javascript syntax into older javascript code that the browser can understand 
* It also converts React JSX syntax into browser understandable javascript code.

> In other words Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines

#### What is a transcompiler?
* A transcompiler, or transpiler is a type of translator that takes the source code of a program written in a programming language as its input and produces an equivalent source code in the same or a different programming language
* It is also known as source-to-source translator, source-to-source compiler.
* Babel is a popular transcompiler.
How to Build a TODO List App with React + Node.js | MERN Stack
Tags: react, node, javascript, webdev
Published: 2021-06-17 07:48:54

Hello guys in this video, you learn how to build todo application with react, node.js, express and mongodb (MERN stack). We gonna cover all crud(create, read, update, delete) operations in this video. even if you are beginner feel free watch and build project. I hope you will learn something new from this video.

{% youtube NqsispG1Bv4 %}

[Source Code](https://github.com/sk-Jahangeer/todo-mern-app)

**Please subscribe and support my channel.**

**Thank You**
How to access Shopify Blog object in different pages?
Tags: shopify
Published: 2021-06-17 07:48:50

Since <a href="https://www.shopify.com/?ref=muhammad-shoaib">Shopify</a> lets your store have multiple blogs, you have to target the specific handle of your blog in the liquid code.

Change the code from:


<strong>`{% for article in blog.articles %}`</strong>

to include the handle of your blog:

<strong>`{% for article in blogs.news.articles %}`</strong>

If you want to fetch blogs by categories, just repalce `news` handle by your category name example below

<strong>`{% for article in blogs.fashion.articles %}`</strong>

In above example `fashion` is your category name.

<script src="https://gist.github.com/imuhammadshoaib/3749cb8635db168672cd30f38217cbfb.js"></script>

{% gist https://gist.github.com/imuhammadshoaib/3749cb8635db168672cd30f38217cbfb.js %}
4 JavaScript Code Snippets to Solve Your Everyday Problems 👻
Tags: react, javascript, coding
Published: 2021-06-17 07:48:43

---
title: 4 JavaScript Code Snippets to Solve Your Everyday Problems 👻
published: true
description: Tips for Javascripters 
tags: #react, #javascript, #coding 
 
---


Let's start 😎

1) How To Get A Random Number In A Range of Values

```
const getRandomIntInRange = (min, max) =>
Math.floor(Math.random() * (max - min + 1)) + min;

getRandomIntInRange(2, 20) // 8
```



2) How To Create A Random String

```
const generateRandomString = (length) =>
Math.random().toString(20).substr(2,length);

generateRandomString(5) // 9d8c2
```


3) How To Set A Value If The Variable is null or Undefined

```

const foo = null ?? 'default string';
const baz = ?? 42;

foo; // default string
baz; // 0

```

4) How To Implement A Sleep Function

```

const sleep = (ms) => new Promise( (resolve) => setTimeout(resolve, ms));

(async() > {

console.log(new Date()) // ? Mon Jun 14 2021 01:35:25 GMT+0300

await sleep(3000);

console.log(new Date()) // ? Mon Jun 14 2021 01:35:28 GMT+0300
})()

```

.
.
.
.

> Add comments if you get stuck or find any issue implementing it
Functions
Tags: beginners, javascript
Published: 2021-06-01 17:34:03

##Functions##
Functions are the main “building blocks” of the program. They allow the code to be called many times without repetition.
**Function Declaration**
To create a function we can use a function declaration.It looks like this:

function showText() {
  alert( 'Hello everyone!' );
}

function goes first,then name of function then list of parameters between curly braces(separated by coma)and then main body of the function.
Our new function can be called by its name: showText().   
e.g.
function showText() {
  alert( 'Hello everyone!' );
}

showText();

**Local variables**
A variable declared inside a function can  only be accesd inside that function.we can't acces it from outside .
e.g.
function showMessage() {
 let message = "Hello, I'm JavaScript!"; // local variable
alert( message );
}
showMessage(); // Hello, I'm JavaScript!
alert( message ); // <-- Error! The variable is local to the function

**Outer variables**
A function can access an outer variable as well.
e.g.
userName = 'Talha';
function showName() {
  let message = 'Hello, ' + userName;
  alert(message);
}
showName(); // Hello, Talha

The function has full access to the outer variable. It can edit modify it as well.
e.g.
let userName = 'Talha';
function showName() {
let userName = 'cagebreaker';
  let message = 'Hello, ' + userName;
  alert(message);
}
showName(); // Hello, cagebreaker

note:The outer variable is only used if there’s no local one.

If a same-named variable is declared inside the function then it ignore the outer one and use local variable. 
e.g.
let userName = 'Talha';
function showName() {
let userName = 'cagebreaker';
  let message = 'Hello, ' + userName;
  alert(message);
}
showName(); // Hello, cagebreaker
alert( userName ); // Talha, unchanged, the function did not access the outer variable.

**Global variables**
Variables declared outside of any function, such as the outer userName in the code above, are called global.
Global variables are visible from any function (unless shadowed by locals).
*Note*:It’s a good practice to minimize the use of global variables. Modern code has few or no globals. Most variables reside in their functions. Sometimes though, they can be useful to store project-level data.

**Parameters**
It's also called function argument.
We can pass arbitrary(any) data to functions using parameters.
e.g. look at the example below the function has two parameters: fullName and LastName:

function showMessage(fullname, lastName) { // arguments: fullName, LastName
alert(fullName + ': ' + LastName);
}
showMessage('Talha', 'Khan'); // Talha: Khan! (*)
showMessage('Hasnian', "Afridi:)>"); // Hasnain:Afridi (**)
When the function is called in lines (*) and (**), the given values are copied to local variables from and text. Then the function uses them.
this is all for now I will share more in my upcomming posts
How to call a external API from Angular Application while executing ng serve
Tags: angular, node
Published: 2021-06-17 07:40:15



How to call a external API from Angular Application after executing ng serve ? (not with browser loading)

I have to register my Angular Application in one service registry (Eureka) by calling a external POST API before the application loads. I have tried with APP_INITIALIZER but it is calling the API once we are loading the application in browser. I want to execute the API before loading the app in browser (browser will not be open while the api call).

Something like when I start the app with "ng serve" I want to execute API. Is there any way?