teleren/devto huggingface dataset:
My Unsplash Search Cloud
Tags: javascript, showdev, beginners, unsplash
Published: 2021-09-05 11:18:02

---
title: My Unsplash Search Cloud
published: true
description: My learnings from my tag cloud project.
tags: javascript, showdev, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60rr1ck0iz5866yp3cjd.png
---

First off: The [eye candy](https://elloo.github.io/search-tag-cloud/). And the [technical stuff](https://github.com/elloo/search-tag-cloud). I'm only going to go into the highlights of what I learned while working on this project. This post isn't intended to be a tutorial but hopefully it helps other beginners understand how to learn.

This project truly tested my understanding of `async` and `await`. It relies on `fetch` to interact with the API from [Unsplash](https://unsplash.com/). When I first looked at the [API documentation](https://unsplash.com/documentation), I was confused about how to use the official libraries and SDKs. Only after watching [this](https://www.youtube.com/watch?v=m_KtZDl7J1k) helpful video, did I begin to understand how to use the API for my project. It showed me that I was looking at the wrong section of the documentation. It also showed me how to construct a URL from which I could `fetch` photo data relating to the given search term.

Another thing that I learned from looking at a professional developer's code is how to write and refactor code more elegantly. In particular, I learned to break things down into more readable variables and aim for separation of concerns when writing functions. 

This lesson was further reinforced by [this](https://css-tricks.com/create-a-tag-cloud-with-some-simple-css-and-even-simpler-javascript/) tutorial - which I used to guide my construction of the tag cloud part of my project. From this tutorial, I learned a couple of nifty tricks:

* [Fragments](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment), which are DOM node objects that are used to group elements. When the fragment is appended to the DOM tree, the fragment is replaced by all its children.
* Using a combination of `box-shadow` and `transition` in CSS creates an animated fill effect.
* Using a compare function with [`sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to organise search terms in ascending or descending order.

Although I used a couple of tutorials to help me out, I think the most fun came from the fact that I understood them enough to be able to adapt the code to my needs. I even refactored (and hopefully improved) some of the tutorial code:

* Used the spread operator instead of `map` to create a shallow copy of an array.
* Replaced the `let` keyword with `const` where possible.
* Used a different compare function in `sort` to allow for the `reverse` method to be omitted.

So what tutorials have *you* learned the most from?
What is ABI’s? What was the usecase? 
Published: 2021-09-05 11:12:41

The ABI, Application Binary Interface, is basically how you call functions in a contract and get data back.

An ABI determines such details as how functions are called and in which binary format information should be passed from one program component to the next...
An Ethereum smart contract is bytecode deployed on the Ethereum blockchain. There could be several functions in a contract. An ABI is necessary so that you can specify which function in the contract to invoke, as well as get a guarantee that the function will return data in the format you are expecting.

From Ethereum's ABI specification, an example:

contract Foo {
  function bar(real[2] xy) {}
  function baz(uint32 x, bool y) returns (bool r) { r = x > 32 || y; }
  function sam(bytes name, bool z, uint[] data) {}
}
If we wanted to call baz with the parameters 69 and true, we would pass 68 bytes in total, which can be broken down into:

0xcdcd77c0: the Method ID. This is derived as the first 4 bytes of the Keccak-256 hash of the ASCII form of the signature baz(uint32,bool). 0x0000000000000000000000000000000000000000000000000000000000000045: the first parameter, a uint32 value 69 padded to 32 bytes 0x0000000000000000000000000000000000000000000000000000000000000001: the second parameter - boolean true, padded to 32 bytes
The 68 bytes is what would be specified in the data field of a transaction: a security note on that is here. (To summarise, be careful what you put in the data field, because it can have unintended, possibly malicious side-effects when passing it to the calling contract.)

To avoid a common pitfall when deriving the Method ID, the canonical types must be used, for example uint256 instead of uint.

Here is an example in Solidity of computing a Method ID for sam above:

bytes4(keccak256("sam(bytes,bool,uint256[])")
Using a higher-level library such as web3.js abstracts most of these details, but the ABI in JSON format still needs to be provided to web3.js.

Note: the ABI is an abstraction that is not part of the core Ethereum protocol. Anyone can define their own ABI for their contracts, and any callers of such contracts would have to comply with that ABI to get meaningful results. However, it is simpler for all developers to use current compilers (example Solidity) and libraries (example web3.js, ethers.js) which all comply with the ABI above.
What is the best optimised php ecommerce platform to add on it multi tenancy support ?
Tags: php
Published: 2021-09-05 10:18:59

Am about to develop a multi tenancy ecommerce store (just like Shopify - each user will have its store at a subdomain) and I don't want to start from scratch, instead I want to use a already built platform (like Magento, Prestashop, joomla...) and then add on it multi tenancy.

So I am wondering which platform is the right choice for my case, also if you have experience in such thing, advices and tips are welcome.
Working with Strings in Ruby(Part 1)
Tags: ruby, rails, webdev, programming
Published: 2021-09-05 04:32:45

Understanding Strings in ruby 

The following are used to display a variable in ruby
puts ,p and prints

The main distinction is that "puts" create a new line after showing the variable content while "print" doesn't.

Note: Single cot and double quote can be both used for string, but single quote doesn't not support string interpolation. 


1.String concatenation

```
firstname=  "solomon"
lastname ="ajani"
puts firstname + "" + lastname


```

2.String interpolation

we use #{} to access variable in a string in ruby 

```

 puts "my surname is #{last} and my first name is #{firstname}"

```
3.Method on string

To check the type on a variable you can do the following .In Ruby everything is an object.

```
firstname.class
#output= String

"hello world".class
#output = String


10.class
#output  = Integer

```

To get built in methods in string simple type

```
"hello world".methods

````

Some String methods

to_s: Converts integer to string 

length: Get the length of a string

reverse: reverse an array or string

capitalize: Make the first letter capitalize

sub: To replace a world in a string

```
sentence ="Our President is a good boy"
sentence.sub("good boy","bad boy")

```

Difference between sub and gsub is gsub replaces all occurrence of a specified variable

4.Escape in String 

Take for instance we want this display this 

"Doe'nt" this would keep throwing an error.

to fix use


puts "Doe\'nt" 


\ sign help escape the string 


Thanks for reading.
I built a SaaS product for API management
Tags: showdev, news, saas
Published: 2021-09-05 10:02:25


Hi everyone :)

The idea of building a collaborative tool for API development occurred to me when I was working as a web full-stack developer. I felt we need a tool that serving the frontend and backend to work more closely, so I started building Dapi.

Dapi supply tools like openAPI editor, model visualization, and sequence diagram for the backend team to design API. One-click to deploy an API documentation site, plus a mock API server for the frontend team to do the API integration and review.

And this is a just start, stay tuned and let me know your thoughts, thanks 😁

![Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g41pv1dna8fydakwt1ni.png)
![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avlezzl5lzbbt0eez6bw.png)
![Track](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dp2dz16a81ughrp4z1tx.png)

Website url: https://dapiok.com
Twitter: https://twitter.com/dapi_ok
Rock-Paper-Scissors Game
Tags: python, gamedev, java
Published: 2021-09-05 09:51:29

## Algorithm of this Game is:
1.There are three character: Rock, Paper and Scissors.
2.This game is multiplayer game.
3.The second player is computer and first player is user.
4.If player1-rock and player2-paper player2 is win and get 1point.
5.If player1-rock and player2-scissors player1 is win and get 1point.
6.If player1-rock and player2-rock match will Tie and no point.
7.If player1-paper and player2-rock player1 is win and get 1point.
9.If player1-paper and player2-scissors player2 is win and get 1point.
10.If player1-paper and player2-paper match will Tie and no point.
11.If player1-scissors and player2-rock player2 is win and get 1point.
12.If player1-scissors and player2-paper player1 is win and get 1point.
13.If player1-scissors and player2-scissors match will Tie and no point.
14.If player1 will score 10points first player1 is winner else vise versa.

## Explanation:
1.Open python or any python IDE like Pycharm, Visual studio Code etc.
2.Create a file by .py extension.
3.Then import random module.
4.Initilize three variable count_rock, count_paper and
count_scissors.
5.Define a function update_count(userInput).
6.Define second function Predict().
7.Initilize two variable player_score and computer_score.
8.Define third function update_score(userInput).
9.Initilize one variable valid_entries.
10.Use while loop to iterate the game given condition.

You can see the video on YouTube the link is: https://youtu.be/qFJ4FQafTmQ

Source code of this game is on my GitHub you can check out:
https://github.com/satyam41/YouTube.git
What design & build incrementally means in OO design Principle ?
Tags: java, design, architecture
Published: 2021-09-05 09:50:22

This is one of the Object Oriented Design Principles that helps developers keep the code readable and understandable.


When you try to make the whole design and start implementation that will not work because either you will find your previous assumptions were incorrect or the requirement changed. Therefore, it is better to design in a way that the design can be extended and the same basic design building blocks can be reused in other parts of the code. While designing we also need to adhere to homogeneity, which means similar things should be designed and implemented in a similar way and orientation of similar parts of code should look like the same.  This is how we can design and build incrementally, once small pieces at a time.


Example, when you need to implement an HTTP connection and a JDBC connection to a database. The actual code will be very different but you should design it in a way that the same design patterns can be used in both places, the high level method names and the class hierarchy and relation between objects should be similar in both implementations. Though implementation details and the objects itself will be different but the interaction and responsibilities divided in different classes and methods in high level should look similar. It makes the code easy to understand also, as human nature is such that it recognizes the known patterns easily.

You can refer to my [blog post](https://www.cloudnativemaster.com/post/what-design-build-increment-means-in-oo-design-pattern-how-to-apply-it-in-code) for a concreate example.
Cheat The Chrome Dino Game In Just 2 Minutes
Tags: javascript, gamedev
Published: 2021-09-05 09:45:08

If you are using chrome or chrome based other browsers, you must be familiar with the In-built dinosaur game in the browser. It comes whenever you are offline and trying to browse to the internet. 

![Dino game preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j05vw692iz1ovla4zboq.jpg)

So, have you ever wondered to achieve the ultimate score of 99999 and see what happens. Technically, Its not impossible if you are super patient and have all day to play. But today, we'll do the impossible just by some tweaking and modifying the code.

The game only starts when you are disconnected to the internet or offline. But you don't have to be offline to play the game. Simply search : 

```
chrome://dino
```

And the game will appear ! 


#CHEAT ! 
After some researching the code and the modules. Here's some useful things that I found : 

* The T-rex is defined as `Runner` Object.
* All the game logics are in the `Runner.prototype` object.


![Dino Logic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ooetr2oxlpoipgn3xt48.jpg)
<figcaption>The game overs whenever the dino hits something</figcaption>


###Immortality

Open `inspect` go to the console tab to implement the code below.

So, first of all we have to disable the `gameOver` function whenever the Dino hits something. In order to that, we have to re-define the function into an empty function : 

```javascript
Runner.prototype.gameOver = function(){} // Press Enter after
```
![GameOver Cheat ! ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mby16ennf59g99brsyq.gif)
<figcaption>disabling `gameOver` function</figcaption>


BOOM ! Now the game won't stop and you will get unlimited scores ! 


### Why Wait Hours To Get To 99999 Point?

The "T-rex"'s speed is encoded in the `Runner.instance_` object.

```javascript
Runner.instance_.setSpeed(100) // set the speed to 100
```


![Dino SPEED ! ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cke95320v27u86jleai4.gif)

#### You can also set the jump height : 
 
```javascript
Runner.instance_.tRex.setJumpVelocity(5)
``` 
 
Enjoy and show off with you friends (¬‿¬)

## 🎶🎶 The End 🎶🎶
How About Your 100 daysOfCode?
Tags: programming, webdev, codenewbie, computerscience
Published: 2021-09-05 09:34:34

Hello devs,

Have you ever done 100daysOfCode in your life?
If yes or doing, share your experiences in this comment section for everyone. 

Hope we can discuss and get something from this section.
Comment down here.

Thanks for your time!
Will Golang replace C/C++?
Tags: cpp, go
Published: 2021-09-05 09:33:38

Go was developed by a Google team in 2007 to combine the simplicity of Python syntax and semantics with the efficiency of C ++. Although it is not very functional, it is an advanced compiled multithreaded programming language with all the advantages for building distributed systems.

With the execution speed of Go being comparable with C and C++, will it replace these languages in the distinct future? What's your take on it? Please comment your thoughts.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 41
Tags: php, javascript, webdev, tutorial
Published: 2021-09-05 09:10:19

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be learning about displaying entity data from Database.

{% youtube _DYDkyjt5KI %}


If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
React Hooks: useMemo
Tags: react, reactnative, hooks, webdev
Published: 2021-09-05 08:15:06

## 1. Problem

In the lifecycle of a component, React re-renders the component when an update is made. When React checks for any changes in a component, it may detect an unintended or unexpected change due to how JavaScript handles equality and shallow comparisons. This change in the React application will cause it to re-render unnecessarily.

{% codesandbox jjxypyk86w %}

> **If one part re-renders, it re-renders the entire component tree.**

## 2. Memoization

Memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.


If we have a function compute `1 + 1`, it will return `2`. But if it uses memoization, the next time we run `1`’s through the function, it won’t add them up; it will just remember the answer is `2` without executing the adding function.

## 3. Syntax

From the [official React documentation](https://reactjs.org/docs/hooks-reference.html#usememo), syntax is looking like this;

```jsx
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```

useMemo takes in a function and an array of dependencies.

useMemo hook will run the expensive operation when one of the dependencies has been changed. If no changes has been made it will return stored value.

## 4. Example

Here is an example of useMemo in action. 

```jsx
const memoizedList = useMemo(() => {
  return userList.map(user => {
    return {
      ...user,
      name: someExpensiveOperation(user.name)
    } 
  }) 
}, [userList])
```


## 5. Use right hook
In addition to **useMemo**, there is also **useCallback** and **useEffect** which can be used similar situations

The useCallback hook is similar to useMemo, but it returns a **memoized function** rather than **memoized value**.

If your dependencies array is not provided, there is no possibility of memoization, and it will compute a new value on every render. So in this reason you can go ahead with **useEffect**

```jsx
// useMemo - returns -> memoized value
const memoizedValue = useMemo(() => expensiveFunction(a,b), [a,b])

// useCallback - returns -> memoized function
const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  },
  [a, b]
);
```

## Links
- [Hooks API Reference - React](https://reactjs.org/docs/hooks-reference.html#usememo)
- [Understanding the React useMemo Hook | DigitalOcean](https://www.digitalocean.com/community/tutorials/react-usememo)

## Conclusion
In this article we did take a look useMemo hook that React offers. You can also take a look other React hooks in below. 

I would love to hear your feedbacks.
Using singleton in Wordpress Sage9/10 themes view composers
Tags: wordpress, oop, laravel
Published: 2021-09-05 07:59:52

A small pro tip for devs who are using WordPress Sage9/10 for theme development. I saw many devs doesn't realize that when you are creating **View composer** and doing stuff inside it, like calling internal functions or executing SQL, for example:

```
get_bloginfo('name', 'display')
```

It will be executed as many times as blade files are involved, for example:

```
protected static $views = [
    '*',
];
```

Will execute `get_bloginfo()` for all blade files.

You should make use of **singleton** for this, inside `ThemeServiceProvider.php` **register** method add:

```
$this->app->singleton(App::class);
```

Where App::class is view composer class, from now on, service container will not load this class if it's already loaded.
Efficiently commenting code
Tags: productivity, javascript, css, tutorial
Published: 2021-09-05 07:50:43

Most of you might comment out code like this:

```js
...
main();
// alternateMain();
...
```

But this isn't a really efficient way to comment. If you need to toggle that comment, you need to delete/add at least two characters. And also, sometimes you are trying two different things, and need to comment one and uncomment another. Things get complex really quick

Here, I'll show you some efficient ways to comment out stuff. This is based on JavaScript, but should work for other languages like CSS, C, etc. (And you probably can adapt it to other languages).

## Toggleable comment

For commenting a block of code and making it easier to uncomment, you can do this:

```js
/*/
experimental();
/**/
```

If you want to uncomment, just add a `*` to the first line:

```js
/**/
experimental();
/**/
```

> You can't "nest" comments here, so one trick you can use is to put the comment text in the last comment:
>
>
> **No:**
> ```js
> /*/
> never();
> /* Some explanatory text here blabla */
> experiment2();
> /**/
> ```
>
> **Yes:**
> ```js
> /*/
> gonna();
> experiment2();
> /* Some explanatory text here blabla */
> ```

Nice?

We can pretty easily extend this. Check this out:

```js
/*/
experimental();
/*/
stable();
/**/
```

Now, the first block is commented, but the second isn't. Just add a `*`:

```js
/**/
experimental();
/*/
stable();
/**/
```

Aaand it was toggled and we are running `experimental()`!

You can even put them inline:

```js
use(/**/ stable /*/ experimental /**/);
```

If you want to comment out both, just remove the `*` in the middle:

```js
/*/
experimental1();
//
experimental2();
/**/
```

And if you want to uncomment both, add a `*` in the middle:

```js
/**/
experimental1();
/**/
experimental2();
/**/
```

Awesome right?

Now, this looks like the end of it, but there's more!

Check this out:

```js
/**/
experimental1();
/**/
experimental2();
/**/
give();
/**/
```

If you want to comment out a line, just remove one ending `/` from the top of that line:

```js
/**/
experimental1();
/**
experimental2();
/**/
you();
/**/
```

Also works for multiple lines!

```js
/**/
experimental1();
/**
experimental2();
/**
up();
/**/
```

You can pretty much infinitely extend that. And of course, don't let these comments past the 'just testing stuff' phase...