teleren/devto huggingface dataset:
Matlab matrix-basics cheatsheet
Tags: matlab, computerscience, cheatsheet
Published: 2021-11-20 09:26:22


###Matlab basics###

MATLAB is an abbreviation for "matrix laboratory." While other programming languages mostly work with numbers one at a time, MATLAB is designed to operate primarily on whole matrices and arrays.

All MATLAB variables are *multidimensional arrays*, no matter what type of data. A matrix is a *two-dimensional array* often used for linear algebra.

To create an array with four elements in a single row, separate the elements with either a comma (,) or a space.
```
a = [1 2 3 4]
result:
a = 1×4

     1     2     3     4
```

To create a matrix that has multiple rows, separate the rows with semicolons.

```
a = [1 3 5; 2 4 6; 7 8 10]
a = 3×3

     1     3     5
     2     4     6
     7     8    10
```
Another way to create a matrix is to use a function, such as ones, zeros, or rand. For example, create a 5-by-1 column vector of zeros.

```
z = zeros(5,1)

z = 5×1

     0
     0
     0
     0
     0
```

The matrix operators for multiplication, division, and power each have a corresponding array operator that operates element-wise. For example, raise each element of a to the third power:

```
a.^3
ans = 3×3

           1          27         125
           8          64         216
         343         512        1000
```
Dot (.) is used to access each individual element of the matrix.

ex: a.^3 -> take each element of a matrix and raise it to the third power.

---

###Accessing elements in the array###


```
A = [1 2 3 4; 5 6 7 8; 9 10 11 12; 13 14 15 16]
A = 4×4

     1     2     3     4
     5     6     7     8
     9    10    11    12
    13    14    15    16
```
There are two ways to refer to a particular element in an array. The most common way is to specify row and column subscripts, such as:
```
A(4,2)= 14
```
Less common, but sometimes useful, is to use a single subscript that traverses down each column in order:
```
A(8) = 14
```


To refer to multiple elements of an array, use the *colon operator*, which allows you to specify a range of the form start:end. For example, list the elements in the first three rows and the second column of A:
```
A(1:3,2)
ans = 3×1

     2
     6
    10
```

The colon alone, without start or end values, specifies all of the elements in that dimension. For example, select all the columns in the third row of A:
```
A(3,:)
ans = 1×5

     9    10    11    12     0
```


---
###Clearing environment###
- **clc** = clears command window
- **clear** = Remove items from workspace, freeing up system memory


###For reproducibility###
- **rng default** 

`
When Matlab generates random numbers, they're not truly random; they are based on a pseudo-random number generating algorithm. The rng command controls the seed, or starting point, for this value. The "default" values resets it to the original value that MATLAB starts with; this evolves over time.
You can see this behaviour if you do something like called rand(10,1), then calling rng('default') then repeating the rand command. It will generate exactly the same "random" numbers.
`
Google Login in React
Tags: webdev, javascript, react, beginners
Published: 2021-11-20 09:25:05

Hello developers,
in this blog I am going tell you that how can you implement google signin/login in your app/website. I am using `react-google-login` library for this blog. Else you can do it with firebase too but it has a different process.

### First Steps.
• You must need a google account.
• You have to generate a client id with google api.
• While generating a client id, you need to permit the url in which the login system will work. example: mysite.com.

#### Following me on twitter will help us both [so consider following](https://twitter.com/vikstack)

### Using the library
`npm install react-google-login` or `yarn add react-google-login`

```js
import { GoogleLogin } from 'react-google-login';

function App() {
  const responseGoogle = (response) => {
    console.log(response);
  }

  return (
    <GoogleLogin
      clientId="your-client-id"
      buttonText="Login"
      onSuccess={responseGoogle}
      onFailure={responseGoogle}
      cookiePolicy={'single_host_origin'}
    />
  )
}
```

### How to keep you logged in
To keep your user logged in you need you use `isSignedIn` props.

```js
<GoogleLogin
  clientId="your-client-id"
  onSuccess={responseGoogle}
  isSignedIn={true}
/>
```

### Get user info to display
It is pretty simple to get user info, in case you want to display it.

```js
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [picture, setPicture] = useState("")

const responseGoogle = (response) => {
  console.log(response);
  // getting user info
  setName(response.profileObj.name)
  setEmail(response.profileObj.email)
  setPicture(response.profileObj.imageUrl)
}
```

### +Bonus
you can use a `loginStatus, setLoginStatus` useState system to redirect you once someone is logged in.

Thanks for reading this blog till now, if you get any errors, or questions. You can ask me those in the comments below.
Developing Developers
Tags: devrel, learningtocode, softwaredeveloper, changingcareers
Published: 2021-11-19 22:23:45

---
title: Developing Developers
published: true
date: 2021-11-19 22:23:04 UTC
tags: developerrelations,learningtocode,softwaredeveloper,changingcareers
canonical_url: https://medium.com/@bass41992ben/developing-developers-9d07f79741d8
---

![](https://cdn-images-1.medium.com/max/1024/0*sLcTzFbGx62Ea-1f)
_Photo by Geeky Shots on Unsplash_

I had very inspiring call today.

Over the past month and a half I have been helping do some community management for hyper.io. One of the things that I naturally fall into is that I want to do things right. I don’t mean this in the simple way of I want to ‘do the right thing’. I mean this in that I want to do what the person wants me to do so that I know I am doing the right thing by them.

In my experience, it is very rare that someone can actually help me get through that desire because often times people revert to giving me tasks. I don’t really care about task management. I care about providing value through possibility and enabling others to succeed. Some people provide value by being task oriented and that is great. Nothing would get done if they did not exist.

But today in my call I was given mission.

> At hyper we are ultimately concerned with building better developers. hyper is a secondary thought.

Why do I like this so much? For many reasons but primarily I see the heart of an educator. I see the heart of a helper. I see the heart of a guide. When promotion of a product is paramount, the product is more important than the community. But when there is a vision that drives the product, the product and team are humble enough to say that we care more about developing the people (in this case, developing developers) that the product, while we would like for it to be used, is not as important as the mission of building better developers.

That is so freaking inspiring to me. Because I want to help other get to where they are going. I have said that before. But when ‘getting them to where they are going’ has to look a certain way, that does not indicate guiding to me. That says, to me and in my opinion, that for you to truly be great you have to use this thing.

And we know that is not the case. So we are developing developers. We hope you use hyper. But we hope and long more than that for you to level up and truly be a great developer.

Here’s too leveling up. It is a journey we are all on together. If you are interested in joining the hyper community, you can go [here](https://t.co/kVRxFWnRet?amp=1).
retry method in laravel
Tags: programming, php, laravel, beginners
Published: 2021-11-20 09:23:43

The retry function attempts to execute the given callback until the given maximum attempt threshold is met. If the callback does not throw an exception, its return value will be returned. If the callback throws an exception, it will automatically be retried. If the maximum attempt count is exceeded, the exception will be thrown
```php
function retry($times, callable $callback, $sleep = 0, $when = null);
```
```php
return retry(3, function ($attempts) {
            // Attempt 3 times while resting 1000ms in between attempts...
            echo "Try: {$attempts} " . now()->toTimeString() . PHP_EOL;

            Throw new \Exception("Failed");
}, 1000);
/* 
Try: 1 10:57:48 Try: 2 10:57:49 Try: 3 10:57:50
Exception Failed
*/
```
with callback function true
```php
return retry(3, function ($attempts) {
             // Attempt 3 times while resting 1000ms in between attempts...
             echo "Try: {$attempts} " . now()->toTimeString() . PHP_EOL;

             Throw new \Exception("Failed");
}, 1000, function(){
       return true;
});
/* 
Try: 1 10:57:48 Try: 2 10:57:49 Try: 3 10:57:50
Exception Failed
*/
```
with callback function false
```php
return retry(3, function ($attempts) {
             // Attempt 3 times while resting 1000ms in between attempts...
             echo "Try: {$attempts} " . now()->toTimeString() . PHP_EOL;

             Throw new \Exception("Failed");
}, 1000, function(){
      return false;
});
/*
Try: 1 11:08:15
Exception Failed
*/
```
It can be used in real life with Http client
```php
$response = retry(3, function () {
    return Http::get('http://example.com/users/1');
}, 200)
```
Retry in the Http client
```php
$response = Http::retries(3, 200)->get('http://example.com/users/1');
```
I hope you enjoy the code.
Vizhub: VSC Without Hubbub
Tags: react, d3, javascript, graphs
Published: 2021-11-20 09:18:52

If you're learning Javascript, React and have an interest in visualising data using the excellent D3 libraries, then check out [Vizhub](https://vizhub.com/) by Curran Kelleher from [Datavis.tech](https://datavis.tech/vizhub/).

It's an extremely intuitive, compact online platform that supports collaboration and a forum for those seeking a road into analysis and visualisation. Curran has produced a super informative 17 hour [free course](https://www.youtube.com/watch?v=2LhoCfjm8R4) on YouTube, via freecodeCamp that takes you on a thorough journey through the functionality of D3 with React.

The course is given in two parts, and I'm tempted to say start with [Part II](https://www.youtube.com/watch?v=H2qPeJx1RDI&t=0s), at least for the first few hours, as Curran explores visualising COVID-19 data. There is some crossover of subject matter between Parts I and II (that's no bad thing), but I found the second part to be gentler for beginners. 

Even if graphs aren't your thing, the application of React in context of data visualisation makes the use of hooks very intuitive. In general, I'm not a fan of 'type-n-teach' tutorials, but Curran has a very engaging and methodical way of instructing that by and large avoids the "*and then I do this, and then I do that...*" pitfalls of this style. Regardless of the visualisation focus, I believe this to be one of the best courses for appreciating React itself, its strength and gotchas. 

Vizhub is free, open source, and it supports forking of existing visualisations for practice and analysis. Furthermore, all your projects can be shared publicly as links for free ($5/month for private collaboration).  

Vizhub is not a replacement for VSC, but it provides a compact platform for learning JS with less fuss, and completely online.

IMPORTANT: In Part II, the final section on graphs cuts off, so watch the full video [here](https://www.youtube.com/watch?v=y7DxbW9nwmo&list=PL9yYRbwpkykuK6LSMLH3bAaPpXaDUXcLV&index=58).
Returning JSX from hooks

Tags: react
Published: 2021-11-20 09:14:02

I want to know if there is any performance issue if I do this:
```
const useCounter = () => {
  const [counter, setCounter] = useState(0)

  const increment = () => setCounter(p => p + 1)

  return {
  jsx: {
    count: <div>{counter}</div>,
    incrementBtn: <button onClick={increment}>Add</button>
  },
  }
}
// parent:
const Parent = () => {
  const { jsx: { count, incrementBtn } } = useCounter()
  return (
    <div>
      {count}
      {incrementBtn}
    </div>
  )
}
```
WHY I am doing this ?
The above is a very simple, meaningless, example I have created to just show what I want to do. However, I will list the motivation here.

## Separation of concerns. I want to keep my app in three layers. 

UI Layer- Any code the defines the core design -- for example, buttons, or maybe big components like a Map, Table. 

Integration Layer- Any code the connects my UI with the API layer. Here we can think of using useQuery hooks to fetch data and then transform it into the UI layer. 

Layout Layer - Any code the handles the final logic of keeping the above code in specified places in a view.


So, doing above, I came across cases where two components are tightly coupled and need to share state but I do want to give the final positioning power to the Layout layer, so in the case, I define those components in a hook with all the logic needed and then return them as JSX and then the layout layer places them where it wants.

## Abstracting the inner state to components. 
The second reason is to make the things more faster to develop for specific cases. For example, a component that provides a ui and also the state that changes upon interaction with that UI.


In summary, just want to know if there is any perf concern here in the above code. And if yes, please state how ? Thanks. ❤️
Why your startup or student club needs to use Figma to make ads
Published: 2021-11-20 08:25:29

Figma is popular for wireframing. But it’s also the perfect platform to design flyers and ads, especially if you are on a budget or don’t want to use an application with a high learning curve.

I have been working on a startup called [Splitify](joinsplitify.co), where I have really been able to make use of Figma not only for my mockups but also for my flyers. It prompted me to share some insights on how to take advantage of the platform.

Although we are focusing on features that are free to everyone, did you know that [Figma is completely free for students](https://www.figma.com/education/)?

##Here are some reasons to use Figma for your next flyer or ad design:

###Figma Community has thousands of free templates
Figma has an extensive library of free templates. This is thanks to the many users on Figma’s community that have created high quality templates to integrate with your designs.

![Figma community](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhcxgphqb5itvliv03j1.png)

### You can download high resolution image files for free
Here is an example flyer I have been working on for [Splitify](joinsplitify.co):

![how to export any design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v823pvv06mi40kyz8skk.gif)

It’s super easy to export your Figma design into another file like a PNG. Best part is that your able to pick a scale factor which allows you to optimize on the graphic resolution you save.

###It's easy to collaborate
Figma supports real-time collaboration without compromising speed or reliability. Additionally it’s easy to share files and even create “teams” which are shared workspaces where you can collaborate on files and projects.

![selecting a pre-made frame size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhbmmhnnx10gnkfdn0hj.gif)

###It's easy to find the frame size you need
There are built in frame sizes for phones, tablets, desktops and social media platforms. These are extremely useful in order to get the dimensions of your design right.

###Final thoughts
Figma is a really great multi-purpose tool for all your design needs. Although there are other popular platforms like Canva and Adobe Illustrator when it comes to creating posters, flyers, and ads, with Figma you can use the application, gain access to thousands of quality templates, and download/save high resolution files of your designs.
Creating a CI pipeline for yassgy
Tags: osd600
Published: 2021-11-20 08:20:52

For this week, I set up a CI pipeline for [`yassgy`](https://github.com/JerryHue/yassgy) with GitHub Actions. I also contributed to [`glazed-donut`](https://github.com/dbelokon/glazed-donut), by creating a few test cases.

## Setting up the CI pipeline

Setting the CI pipeline for my repository was very easy to do. When setting it up, GitHub recommended one of the workflows for Rust, since `yassgy` use Rust. The recommended workflow can be found [here](https://github.com/actions/starter-workflows/blob/da223f8a03b845b8624b144879658659a0b97d76/ci/rust.yml).

Funnily enough, I didn't have to change anything from the original file, since I am not running extra jobs, or setting up any extra configuration.

## Contributing to `glazed-donut`

Contributing to `glazed-donut` was like contributing to any other project I have contributed to in the past. I forked the project and set up a local copy of the code, and then I started to write the code.

After running the tests I wrote, I noticed that some of them were failing. Since the tests were short, I could verify that the problem was not related to the test itself, but that the code was not working as expected.

Either way, I pushed my code to her repo with no much issue. I noticed that, because I am a first-time contributor to her codebase, my PR did not trigger the workflow pipeline she had set up.

This reminded me the time that Diana ([`dbelokon`](https://github.com/dbelokon) in GitHub) contributed to `yassgy` for the first time. Her PR did not trigger my workflow and I had to give permissions to active the run. I can conclude that this is the same situation happening.

Although her repo is using C#, I did not find much complications contributing to a test case in her project, especially because it was fairly easy to read the previous test cases and copy from them so I could write mine.

## Opinion

Before, I used to think that CI were this mysterious tool that is very useful for development, but incredibly confusing to set up and maintain.

It turns out that I was half-wrong! CI's were proven to be useful to me, since I can easily tell when the default branch (master or main) is having breaking changes. Of course, CI's are not a panacea, they are only useful when I diligently write tests that thoroughly test the expected behaviour of my code, and this, of course, has its limits.

The part that I was wrong about CI's was related to the difficulty on setting up. At least in GitHub, setting up CI pipelines were proven to be extremely easy, and it is something that I am glad for.
Returning JSX from hooks
Published: 2021-11-20 07:56:51

I want to know if there is any performance issue if I do this:
```
hook: useCounter 
const useCounter = () => {
  const [counter, setCounter] = useState(0)

  const increment = () => setCounter(p => p + 1)

  return {
  jsx: {
    count: <div>{counter}</div>,
    incrementBtn: <button onClick={increment}>Add</button>
  },
  }
}
```
parent: 
```
const Parent = () => {
  const { jsx: { count, incrementBtn } } = useCounter()
  return (
    <div>
      {count}
      {incrementBtn}
    </div>
  )
}
```

WHY I am doing this ?
The above is a very simple, meaningless, example I have created to just show what I want to do. However, I will list the motivation here.
1. Separation of concerns.
I want to keep my app in three layers. 
UI Layer- Any code the defines the core design -- for example, buttons, or maybe big components like a Map, Table.
Integration Layer- Any code the connects my UI with the API layer. Here we can think of using useQuery hooks to fetch data and then transform it into the UI layer.
Layout Layer - Any code the handles the final logic of keeping the above code in specified places in a view.

So, doing above, I came across cases where two components are tightly coupled and need to share state but I do want to give the final positioning power to the Layout layer, so in the case, I define those components in a hook with all the logic needed and then return them as JSX and then the layout layer places them where it wants.

2. Abstracting the inner state to components. 
The second reason is to make the things more faster to develop for specific cases. For example, a component that provides a ui and also the state that changes upon interaction with that UI. 

In summary, just want to know if there is any perf concern here in the above code. And if yes, please state how ? Thanks. ❤️
Developing My Own Node CLI Tool! And YOU can Contribute
Tags: javascript, npm, node, cli
Published: 2021-11-20 07:51:41

## I made a CLI Tool and You Can contribute!
Basically I'm really excited about writing packages. I just created this small tool called bring-me! This basic cli tool just brings you libraries to your current working directory directly from its cdn! You can also add libraries to the repertoir of libraries you have saved for downloading later!
Examples: 

`bring-me lib jquery -d /public/js` you will have jquery already integrated in your project!

 {% github devasolutions/bring-me %}

I need people to help with creating more basic commands, fefactoring, and improving documentation. So anybody is welcome to participate!

- Regards
- The unfactoring guru
Indefinite Arguments
Tags: java, csharp, oop
Published: 2021-11-20 07:44:03

When your program needs indefinite number of arguments, and let's say,

i.  You are not allowed to pass a collection or an array. 
ii. You are not allowed to overload methods.


Using varargs is the best option to use in this case.


Before varargs was introduced in Java 5, the problem was solved by  allowing to use any of the mentioned two ways above.

A varargs method can pass indefinite number of arguments with the following method definition. (In here the data type is String and args is the name of the argument)

```
void someMethod (String... args)
```

Below is an use-case that used varargs to solve a problem which involved printing the sum of numbers. 
Not allowing to use overloading or passing a collection or an array. 
So we use varargs.

```
class Add {
    public void add(int... nums) {
        int sum = 0;
        String label = " ";
        for (Integer n: nums) {
            label += n + " ";
            sum += n;
        }
        label = label.trim().replace(" ", "+");
        label += String.format("=%d", sum);
        System.out.println(label);
    }
}
```

In the context of C# language we change the syntax a little bit.
We add the keyword 'params' to define it is a varargs method.

It looks like this.

```
void add(params int[] nums)
```

And the same code for above problem in C# language is as below.

```
class Add {
    public void add(params int[] nums) {
        int sum = 0;
        String label = " ";
        foreach (int n in nums) {
            label += n + " ";
            sum += n;
        }
        label = label.Trim().Replace(" ", "+");
        label += String.Format("={0}", sum);
        Console.WriteLine(label);
    }
}
```

Call to your method like below in your main method.
And again -> use any number of arguments.

```
public static void main(String[] args) {
    new Add().add(1, 2, 3);
    new Add().add(1, 2, 3, 4, 5);
}
```

Learn more about varargs using the following links.

https://www.baeldung.com/java-varargs