teleren/devto huggingface dataset:
MDX Embed - Hacktober Midway Check In!
Tags: hacktoberfest, opensource, contributorswanted
Published: 2020-10-18 07:44:13

---
title: MDX Embed - Hacktober Midway Check In!
published: true
tags: hacktoberfest, opensource, contributorswanted  
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/e9edgt6bj6rnus3u25i7.png
---

## My Hacktoberfest Experience

I've participated in Hacktober for the last four years, this time as a maintainer/contributor of a GitHub project that's part of a much larger ecosystem. MDX Embed can be used anywhere you're using [MDX], I use it extensively in my [digital garden].

## What I Learned From Hacktoberfest

Hacktoberfest is a great way to meet other contributors in the same space as you. I've gained meaningful relationships with people I otherwise would not have met outside of this project.

I learned that a little extra effort with documentation goes a long way. We're all super welcoming on the repo but there are contributors that would prefer to know how to contribute before asking questions, so the documentation really helped out here.

Personally when I first contributed I was a bit overwhelmed by the sheer size of the repo so once I was walked through what was needed by [Paul] I made a note of the process which later turned into the [contributing guidelines].

## MDX Embed Overview 

MDX Embed allows you to easily embed popular 3rd party media content such as YouTube videos, Tweets, Instagram posts and many more straight into your .mdx - no import required!

<img src="https://www.mdx-embed.com/mdx-embed-logo.svg" alt="mdx embed logo" />

{% github PaulieScanlon/mdx-embed no-readme %}

We're nearly at 50 ⭐'s drop the repo a star if you find it useful 👍

The aim is to have all the components with a unit and integration test added to them before the v1 release.

There is a beautifully crafted [Umbrella Issue] by [Paul] listing all the available tests still outstanding.

Out of ~80 issues 16 are still open, check them out [here].

The [contributing guidelines] covers adding the integration and unit tests

This is a great way to get comfortable with adding tests to a production project:

- Unit test (Testing Library / React)
- Integration test (Cypress)

Check the video for more details:

{% youtube TzWm_tullLo %}

[mdx]: https://mdxjs.com/
[contributing guidelines]: https://github.com/PaulieScanlon/mdx-embed/graphs/contributors
[paul]: https://twitter.com/PaulieScanlon
[digital garden]: https://scottspence.com/garden
[umbrella issue]: https://github.com/PaulieScanlon/mdx-embed/issues/71
[here]: https://github.com/PaulieScanlon/mdx-embed/issues?q=is%3Aopen+label%3Ahacktoberfest+sort%3Aupdated-desc
Completed my first Hacktoberfest challenge.
Tags: hacktoberfest
Published: 2020-10-18 07:26:56

## What I Learned From Hacktoberfest
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qsytwz8ocgoi4royfde8.png)
I learnt how to contribute to opensource, and how it feels to be part of a community, who are inspiring and helping each other. I loved what I did and will continue my contributions to the opensource community. I would like to thank digital ocean, GitHub and dev.to for making it possible for us to participate in this amazing challenge and make meaningful contributions.
<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
Howto Guide: Get FREE backup service for your database and storage files 
Tags: docker, rclone, googlecloud, devops
Published: 2020-10-18 06:55:38

Like many, I don't always have the budget on side projects to add a separate machine just for backup.
Turns out I don't need one! 

Using RCLONE (Free), 
Google Cloud (Free),
Google Drive (Free),
and Docker (Also Free and optional)
I was able to setup a database and storage backup strategy for free! 


Here's the code to run the backup: 
https://github.com/negati-ve/docker-rclone-google-drive-cron-backup

and 

Here's a Howto guide on how to setup google cloud, google drive service account and everything else: 
https://github.com/negati-ve/docker-rclone-google-drive-cron-backup/tree/master/guide

I've included images of google cloud as it can get a little confusing at times

Hope this helps some one :D
Hacktoberfest 2020
Tags: hacktoberfest, github, opensource
Published: 2020-10-18 06:44:50

## What I Learned From Hacktoberfest
This year I participated for the first time in Hacktoberfest and it was amazing experience. I completed the challenge by making at least 4 PR and the best part was that all my PRs were merged. 

It's a kick start to open source contribution and now looking forward to explore some more repos for contributions.

Overall it's a great learning experience.
What defines a senior software engineer?
Tags: discuss, career
Published: 2020-10-18 06:43:15

What defines a senior software engineer? What are their responsibilities?  I get this question a lot from friends, family, colleagues, and even from myself.

There is no one clear definition; every company, website, and person have their definition.
As a team leader in the past and a senior software engineer today, this is my definition:

* Holistic view - understanding the bigger picture, where the product is going, and how to engineer it.
* Communicating with all the involved parties - Being able to bridge between PO, PM, UX, SRE, and engineering, so everyone is up to speed.
* Involved in the full software development life cycle - contributing to every step of the development cycle.
* Being a mentor and a guide - teach your knowledge to others, identify weak and strong points, help grow, and empower others.
* Improving your team - Senior will help develop and empower the people around them.
* Spot pitfalls and solve them ahead of time - recognize patterns and have the "future sight" to understand possible pitfalls and their solutions.
* Not a function of years of experience, but knowledge - as put by Darknight at softwareengineering: "Some achieve the above in 2 years or less, others take 10 years".

So, what is your definition?
Revisiting old ideas with #Hacktoberfest
Published: 2020-10-18 06:36:15

Before knowing about hacktoberfest, I thought open source contributions are lot of time consuming, because of that I hesitated to know more about it.
But with hacktoberfest guidelines and explanation, it was more clear how we can contribute(in good quality and quantity).

I checked for git repos where I can contribute, and found some exciting projects.

## Short brief of repos and contributions ✍️

 - 2 yrs ago, I wrote a script that will change my desktop background (scheduled it to run daily). Found similar project on github  ([python-backgroundchanger](https://github.com/rugglcon/python-backgroundchanger)) which currently supports linux, macOS and windows support in pipeline. Contributed for adding unit tests there. It was fun learning about how an idea was converted into a python package.    
 - This is simple project to manage your notes -> [vue-simple-notes](https://github.com/1VinceP/vue-simple-notes). Contributed to setup unit tests, add server-less APIs(netlify functions) and secure hosting.
 - Another repo ([GeneticDrawer](https://github.com/KonradLinkowski/GeneticDrawer)) is about drawing using genetic algorithm. I worked on genetic algorithm in college, but after that didnt get a chance to revisite it again. But saw this repo and it was cool use case of it. Issue there was the processing was limited when browser tab become inactive. Fixed it by patching setTimeout and using web-worker.

## My PR's 🎯

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x77kqui2ve2fmkq76d1v.JPG)

## Conclusion 🤔

It was real nice experience participating in this event. I  got some good amount of learning, In terms of creating and publishing package, secure hosting of full-stack projects, and a lot of other things (used github cli for first time).

Someone has said it correct 
> Challenges are what makes life interesting
HACTOBER FEST 2020
Tags: opensource, github, hacktoberfest
Published: 2020-10-18 06:27:49

Well these is my first post here. In my opinion every one must start whether it is early or late and that's why i started from today as i want to do the contribution in opensource project Then i came to know about Hacktober Fest 2020 so from here i started my open source contribution journey.Thanks to Hacktober Fest 2020 for such opportunity.
My Contributions to the Hacktoberfest 2020 Challenge.
Tags: hacktoberfest
Published: 2020-10-18 06:27:21



## Basically, this was the first time I participated in such an event, and I'm really happy that I was able to finish it successfully. I've begun my journey in Python programming a few months back & I'm loving it. I would love to contribute to the open-source further as well...this was just the beginning. ##
Angular 10 adding custom pipes
Tags: angular, pipes
Published: 2020-10-18 06:19:38

One powerful aspect of Angular is the ability to add custom pipes.
Pipes are used for transforming data, mainly strings, into specific date formats, currencies, or something else.

They are simple functions that you can use in your templates by using a pipe symbol.

```js
{{ myString | customPipe }}
```

Angular itself comes with several build-in pipes.

- DatePipe
- UpperCasePipe
- LowerCasePipe
- CurrencyPipe

And many more, find the full list on the [Angular documentation](https://angular.io/api/common#pipes).

Today we'll be making a pipe that will accept a text and input on the max characters.
We will then return the string + ellipsis on the max.

## Creating our pipe

We can make use of the Angular generator to create our pipe.

Open your terminal and navigate to the folder to run the following command.

```bash
ng generate pipe maxLength
```

This will create our pipe and add it to the `app.module.ts` as well.

```js
@NgModule({
  declarations: [
    // All declarations
    MaxLengthPipe
  ],
  imports: [
		// All imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
```

Now let's open up the `max-length.pipe.ts`. You will see the pipe has an `export` function. This is the default function called.

Let's create the arguments and return type.

```js
transform(value: string, length: number): string {
	return value;
}
```

We set the value to be a string, the length to be a number, and the output to be a string.

Now we need to check if the value is longer then our length and cap it.

```js
if(length < value.length) {
  return value.substring(0, length) + '...';
} 
return value;
```

Here we check if our length is bigger than our value.lenght. 
If yes, we return a substring.

Else we will just return the value as-is.

## Putting our pipe to action

Let's open up the `second.component.ts` and declare a text to render in our `HTML` to use our new custom pipe.

```js
export class SecondComponent implements OnInit {

  short: string = 'This is not so long.';
  long: string = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis sollicitudin turpis, ac lobortis libero.';

  constructor() { }

  ngOnInit(): void {
  }

}
```

Now we can open up our `second.component.html` and make it look as such.

```html
<p>second works!</p>

<p>{{ short | maxLength:50 }}
<p>{{ long | maxLength:50 }}
<p>{{ long | maxLength:10 }}
```

Now let's run our app and see how this looks.

![Custom angular pipe](https://cdn.hashnode.com/res/hashnode/image/upload/v1602481228953/1eT7RyV8e.png)

There we go, perfect, we now created our own custom pipe that accepts a dynamic argument.

You can find this code project on [GitHub](https://github.com/rebelchris/angular-starter-demo/tree/feature/pipe).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
What languages do you need to learn to create a simple webpage?
Tags: html, css, java
Published: 2020-10-18 06:14:13

Usually, you have to learn three languages
1. HTML
2. CSS
3.JAVA
If you know HTML and CSS, you can create a simple webpage.
E.g. - https://results.kolkataff.xyz/
JAVA education is very important for creating a webpage at a standard level.
Code Review Guidelines for better code quality
Tags: codequality, php, laravel, productivity
Published: 2020-10-18 06:11:18

As all of us know that there is no certain rules when it comes to code review. From my experience I have derived the below mentioned points for enhancing the code quality before the PR submission.

* Please follow the PSR standards for nomenclature. (https://www.php-fig.org/psr/)
* Please use clean code practices for writing a piece of logic (https://github.com/jupeter/clean-code-php)
* Though you will find this rule in PSR but still please use space before and after any operator.
* Don't break indentation.
* Rules for declaring a function
* Small (not more than 20 lines).
* Do specifically one thing.
* Use descriptive names as per PSR.
* Prefer fewer arguments.
* Don't use flag arguments. Split method into several independent methods that can be called from the client without the flag.
* Rules for Commenting
    *  Always try to explain yourself in code.
    * Don't be redundant.
    * Don't add obvious noise.
    * Don't comment out code. Just remove. If it is a working piece of code, please write a proper comment that this is working.
    * Use as explanation of intent.
    * Use as clarification of code.
    * Use as warning of consequences.
* Declare variables close to their usage.
* Dependent functions should be close.
* Similar functions should be close.
* Place functions in the downward direction but if it’s a relation please make it on the top of the model file.
* Keep lines short.
* Return on Negative conditions. Instead of writing the entire section of code in a if condition, return on “!if” condition.
* In case of a merge conflict please put a message in the group asking the individuals worked on the same files.
* Try to optimize code before creating a PR
* Reduce no. of lines of code
* Reduce unnecessary variable declaration
* If possible break in reusable functions
* Below are mentioned the parameters for the code review.
    * Make sure that there are no conflicts
    * There must not be any debug function open in the updated code.
    * No (non-usable) commented code
    * Check for non-significant variable name declaration
    * Check for unused parameters in the function declarations.
    * Check for unused parameters in a function call.
    * Check for unwanted functions declarations
    * Check for PSR rule violations
* Always try and search for existing functions before creating a new one.
* All the changes are to be made via Git. Under no circumstances FTP is to be used for making required changes.
Learning Memoization
Tags: computerscience, beginners, javascript, algorithms
Published: 2020-10-18 06:08:56

In this post I'll be discussing what memoization is as well as when to use it.

##**What is Memoization?**

Memoization at its core is the process of greatly decreasing the run time of expensive recursive or iterative function. More specifically, memoization stores and reuses precomputed values while passing them through recursive calls to improve the speed of your algorithms.

##**Why Use Memoization?**

A great example of how and why to use memoization can be seen when creating a function to create the [Fibonacci sequence](https://en.wikipedia.org/wiki/Fibonacci_number). 

If you're not familiar, the Fibonacci sequence starts with 0 and 1, all further values are calculated by adding the previous two values. 0 + 1 = 1, 1 + 1 = 2, 1 + 2 = 3, 2 + 3 = 5, etc. 

This function is often made recursively like so.

![Fibonacci Function](https://dev-to-uploads.s3.amazonaws.com/i/bxl3csj76mk9lqh93yx3.png)

When calling this function on small numbers it is relatively quick, but when we call it on large numbers the runtime will drastically increase. This is due to each call of fibonacci() doing the same amount of work, regardless of it was already run or not. The function is repeatedly doing the same calculations over and over again!

##**How to use Memoization?**

Instead of doing wasting time by doing the same work over and over again let's instead store the result of the work in case we need to use it again. In this case we can use a simple hash map to track what numbers have been computed and what results we got from the computations.

![Memoized Fibonacci Function](https://dev-to-uploads.s3.amazonaws.com/i/jdfst3ioj7qgb5ex8yqo.png)

Our main function contains our map that stores computed values as well as another function. This inner function checks if our hash contains the result of the called number, otherwise it does the fibonacci function from the original example. By doing this method we avoid any unnecessary work.

##**Conclusion**

Hopefully you now understand the basics of memoization. However, in this example we only really scratched the surface. Memoization gets much more complicated when the function needs to handle multiple arguments or store objects passed as arguments. In my next post I'll go over some more complicated scenarios and how to deal with them.

Thanks for reading! The code used in this post can be found [here](https://github.com/123JackCole/Memoization).
Hacktoberfest 2020.
Tags: github, opensource, hacktoberfest, git
Published: 2020-10-18 06:00:33

My hacktoberfest challenge🔬 is done.🥇
My all PR's pass out the in-review period also.🏆
Indeed an interesting month due to hacktoberfest.🎃🪔🎊
Thanx💌.
5 Most Popular Coding Challenge Website
Tags: beginners, javascript, codenewbie, productivity
Published: 2020-10-18 05:56:13

# Introduction


> Practice makes a man perfect


I contradict the statement as it not only makes the man but also everyone perfect. So we come with 5 most popular website where you can practice language and skills through the different real-life problem that you might run in future. So let's begin the list.

## [Coderbyte](https://coderbyte.com/)

![Coderbyte](https://dev-to-uploads.s3.amazonaws.com/i/hocxy2jhk8dj37c2pqeh.png)

Coderbyte provides more than 300 coding challenges to solve. You can solve those challenge in their online editor. You can really test your knowledge and skill in a particular domain. You can prepare for the interview too.

## [HackerRank](https://www.hackerrank.com/)

![HackerRank](https://dev-to-uploads.s3.amazonaws.com/i/5hzaikld3f95umr0dn9u.png)

You can practice more than 40 languages in HackerRank. They come with great challenges from basic level to more advance level to test your skill. They also provide challenges for several different domains such as Algorithms, Mathematics, SQL, functional programming, AI and more. 

{% post https://dev.to/surajondev/css-tips-to-start-thinking-responsive-website-1ohh %}

## [Topcoder](https://www.topcoder.com/)

![Topcoder](https://dev-to-uploads.s3.amazonaws.com/i/shsecbaozun5coevke70.png)

Topcoder provides challenges as well as competitive programming competition where you can participate. They have challenges for UI/UX designers too along with developers challenges. It also provides a list of algorithmic challenges that you can complete. They also have their own online editor.

## [CodeChef](https://www.codechef.com/)

![CodeChef](https://dev-to-uploads.s3.amazonaws.com/i/1zd7y035stmerut92xnc.png)

In CodeChef, you can practice different programming language through different challenge and also you can compete in their competition to earn the reward. It is an India-based competitive programming website.

{% post https://dev.to/surajondev/5-netflix-documentaries-for-every-designer-3a4g %}

## [Leetcode](https://leetcode.com/)

![Leetcode](https://dev-to-uploads.s3.amazonaws.com/i/cptgbma3hp096klatq46.png)

Leetcode is a popular online platform that provides a list of 190+ challenge that helps you to prepare for the technical job interview. It guides you by providing structure to your progress. They support 14 popular languages.

# Last Note

*You can add more website in the comment section if you like. Thank you for reading the blog post.*
Hacktoberfest, It was a great start to as Newbie in Open Source Community
Tags: hacktoberfest
Published: 2020-10-18 05:46:53

## What I Learned From Hacktoberfest

As a beginner in Open Source Community, Hacktoberfest is a great event for kickstarting, when I make every PR, I feel like a sequential hackathon. Communicate with Repo Maintainers was a great experience. as the effect of Hacktoberfest, I would like to contribute more to the Open Source Community.
My First Open Source Contribution
Tags: hacktoberfest
Published: 2020-10-18 05:44:34

## What I Learned From Hacktoberfest

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->

_This is my first time Open Source Contribution. I'm having fun and learning a lot of new things by contributing to open source. Now I know how to write effective READMEs and cleaner code with comments that anyone can understand._
What to do when tackling a new project.
Tags: beginners, codenewbie
Published: 2020-10-18 03:00:36

### Step 1
Whenever you're tackling a new project, it can be tempting to dive right into writing code. But more often than not, It's best to take a step and consider the bigger picture. I recommend first drawing up a high-level plan for what your program needs to do. Don't think about the actual code yet - you can worry about that later. Right now, stick to broad strokes.

For example, your phone and email address extractor project will need to do the following:
 * Get the text off the clipboard.
 * Find all phone numbers and email addresses in the text.
 * Paste them onto the clipboard.

## Step 2
 Now you can start thinking about how think might work in code. the code will need to do the following:
 * Use the pyperclip module to copy and paste strings.
 * Create two regexes, one for matching phone numbers and the other for matching email addresses.
 * Neatly format the matched strings into a single string to paste.
 * Display some kind of message if no matches were found in the text.
Hacktoberfest is my hero...
Tags: hacktoberfest
Published: 2020-10-18 05:20:45

## What I Learned From Hacktoberfest

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->

What i personally learn from this event ,seriously cant be express in words.It was just amazing. I am now eagerly waiting for hactoberfest 2021 . For beginners i personally recommended you to please try to participate in this event , not only to get some reward but more than this . Your confidence in coding ,in participating will surely increase by time. These types of events is the core part of your confidence.
bookSearch progress
Tags: webdev, beginners, javascript, html
Published: 2020-10-18 05:00:11

Right now I'm in the progress of a beginner frontend project.
Im building a demo website where the user presses a button located in the center of the page. This will then cause a menu of different book genres drop down from the button. The user then can choose any genre to see a list of books slide in from the left side of the screen.

I am not very sure what I want to do with this list of books, though I am thinking on rather creating a subdirectory for each book with a list of details and images, or creating a list of details and images that slide in from the right side of the page when the user chooses the book they'd like to see.

If anyone has any suggestions, please let me know. I'd really appreciate that! Thank You!!💖

ALSO!! you can view the progress of the site at https://jacobreidwd.github.io/bookSearch