teleren/devto huggingface dataset:
React Project: YouTube Channel Viewer
Tags: react, javascript
Published: 2020-10-15 10:00:36

---
title: React Project: YouTube Channel Viewer
published: true
description: In this React Project tutorial, we'll build a really simple React app that displays a list of YouTube videos for any particular channel on YouTube.
tags: react, javascript
---

Originally published [here on YouTube](https://youtu.be/X6GpRxu4q_s).
(Please give me a thumbs up and subscribe if you found this useful 🙏).

Source code is here: https://github.com/codebubb/react-youtube-viewer-tutorial

React Project: YouTube Channel Viewer 
-----------------------------------------------------------
00:00 Introduction
00:35 App overview
01:52 Project setup
03:14 Initialising the React app
06:40 Getting the YouTube Data
12:15 Templating the video data
17:45 Creating the search/lookup form
22:07 Getting channel title and error state
25:19 Styling the app
33:22 Breaking the app into components
40:11 Wrap up

— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —

So in this tutorial we'll be creating a really simple React Project that shows you how some of the fundamentals of React work including React hooks, React state, React props, JSX and building React components.

Although are app is pretty simple in what it does there's quite a bit to go through with this tutorial and think of it more of as an overview of these topics rather than a deep dive into the basics of React.

We'll start off the tutorial by setting up our React project and i'll give you a quick overview of the tooling including the setup of the dependencies and the React Webpack configuration.

Once we're setup, we'll take a look at writing a bit of JSX to display some info to the user on the page and then we'll go about setting up our application state and the function that will run when the user enters a new channel ID.  We'll do this using the useState React hook and the useEffect React hook.

Once we've got a bit of data being returned from our API endpoint with React, we'll loop through the data that is returned and update our template to show the video thumbnail and the video description in our front-end UI.

The next step will be to add the search capability and we'll work closely with the React state that we defined with the useState hook to update values inside our app.  The result will be that the user can lookup other channel IDs other than the default one we provide.

When our app is setup and working we'll add some style with some SCSS to make our template look good before finally moving on to breaking down our overall template in to React components.  This will be a good opportunity to look at React props and React state and how they can be passed to components to allow data to communicated between React components.
My Entry To Hacktoberfest 2K20
Tags: hacktoberfest
Published: 2020-10-15 09:59:39

## What I Learned From Hacktoberfest
I learnt a lot of things in this hacktoberfest such as 
#### Resolving Conflicts while merging PR
#### Better Understanding of how open Source works
#### Getting assigned for an issue before working on it
#### Using GitHub search efficiently

<!-- 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?! -->

I learnt that even if someone is new to open source he/she will find a lot of repo's where he/she can easily fix the issues some issues are as simple as updating readme file.

Any user can search for repositories with open issues which suits as per his/her interest

I just started Open source last year and I have contributed towards a lot of open source repo's. It's really easy to get into open source and once you get into it, You will enjoy it.
9 Proven Strategies to get Entry Level Data Science Job
Tags: datascience, machinelearning
Published: 2020-10-15 09:59:30

Hi Folks,

For a fresher getting a job as a Data Scientist is sometimes difficult but not impossible. All you need to do is put in some extra effort. And these efforts should be smart and strategic.

That's why I have listed 9 Proven Strategies to get Entry Level Data Science Job. If you follow these Strategies, then definitely you will get your first job as a "Data Scientist".
Read this article, and follow these strategies- https://www.mltut.com/proven-strategies-to-get-entry-level-data-science-job/

All the Best!

Happy Learning!
8 Best Laptops for Data Science
Tags: datascience, machinelearning, computerscience
Published: 2020-10-15 09:56:00

Hi Everyone,

In order to perform data science tasks, we should have a laptop that helps us to perform complex operations easily. But selecting the best laptop for data science requires lots of aspects in mind. 

So if you are a data science professional or learner and looking for a Laptop that will make your work easy, read this article- https://www.mltut.com/best-laptops-for-data-science-students/

I tried to list laptops for Data Science Professionals as well as Data Science Students. I hope your search will end after reading this article.

All the Best!

Happy Learning!
[Lifetime Session] How to Increase Session Timeout Limit in Laravel 8?
Tags: laravel
Published: 2020-10-15 09:51:19

This instructional exercise broadly expounds on How to Increase Session Timeout in Laravel 8. you will figure out how to set the meeting lifetime in laravel. We are the way to set meeting break in laravel 8. we will assist you with giving instances of laravel increment meeting break in this instructional exercise. 

You can without much of a stretch increment meeting lifetime in laravel 8 form. 

laravel meeting lifetime perpetually then you can without much of a stretch do it from the design record in laravel 8. laravel gives a session.php there is a 'lifetime' key alternative for setting time in minutes. In the meeting design record, there are additionally a few alternatives for a set driver, break. At that point update meeting an incentive in laravel.

Read More: **[[Lifetime Session] How to Increase Session Timeout Limit in Laravel 8?](https://www.phpcodingstuff.com/blog/how-to-increase-session-timeout-limit-in-laravel-8.html)**

below 2 Example:

config/session.php
```
<?php
  
use Illuminate\Support\Str;
  
return [
  
    .....
  
    'lifetime' => env('SESSION_LIFETIME', 120),
  
    .....
  

```

and 
config/session.php
```
<?php
  
use Illuminate\Support\Str;
  
return [
  
    .....
  
    'lifetime' => 1 * (60 * 24 * 365),
  
    .....
  

```
My Hacktoberfest 2020 experience (short article)
Tags: hacktoberfest
Published: 2020-10-15 09:49:25

## What I Learned From Hacktoberfest
After I found out that Hacktoberfest exists and there is an amazing shirt included too, it really motivated me to create and contribute to projects.

I contribute often or try to help at development to projects, which I think are interesting. Now, with Hacktoberfest I started to actively hunt for bugs in those projects, so I can fix issues with a PR.

So what I learned from Hacktoberfest is, motivation is literally everything and you have to set yourself goals to keep grinding.
Let's chat & talk about Vue Design System
Tags: vue, design, frontend, ux
Published: 2020-10-15 09:47:18

*(check out [my blog](https://raffaelepizzari.com/))*

Hello, everyone!

##tl;dr
A new "round table" has been scheduled: "**Vue Design System**".

**21.October.2020 18:00 CET** on Zoom.

**Agenda**: https://codejourneys.org/agenda/
**Book free slots**: https://eventbrite.com/e/125592164545
**Slack**: https://join.slack.com/t/codejourneys

Everyone is welcome to join.

## Vue Design System 

A **Design System** is a comprehensive guideline for wep/app UI and UX design: components libraries, UI rules, UX principles, best practices and more.

Nowadays is a "must" for **front-end developers** and **UX designers**.

**Vue Design System** is an **OS tool for building UI Design Systems with Vue.js**.
 
Everybody are welcome and no specific skill is needed.


## Important links:
**Agenda**: https://codejourneys.org/agenda/
**Book free slots**: https://eventbrite.com/e/125592164545
**Slack**: https://join.slack.com/t/codejourneys
**Vue Design System**: https://vueds.com/


Cheers :)
I completed the Hacktober 2020
Tags: hacktoberfest
Published: 2020-10-15 09:39:19

What I Learned From Hacktoberfest?

The October is going in full swing, and the hacktoberfest season is here. I recently completed the challenge and thankfully all my contributions were merged. This was fun and while I am a beginner only but I think the most useful skill that you gain while contributing to open source is that even if you are not familiar with what's going on in the project , you somehow do research, learn couple of new things and you get the task done.
Looking forward to learn more and contribute further in open source.
My GitHub profile:https://github.com/saikatdgp2001
Hactober Story
Tags: hacktoberfest
Published: 2020-10-15 09:37:10

## What I Learned From Hacktoberfest
I developed my skills in open source coding by making my first pull request. 1 was typo and other were first contributions to various organizations.

<!-- 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?! -->
Hacktober Fest is the best way to get used to open source coding. You will get know various sources where you can learn the best ways of contributing on github in intial phase.
USEFUL TIPS FOR BEGINNERS / DEVELOPERS
Tags: html, css, career, tutorial
Published: 2020-10-15 09:34:10


`Learning path for all developers:`

- Tutorials to build your knowledge 
- Build project & apply your knowledge 
- Build more advanced projects if you can
- Build your portfolio 
- Create Github account & push on Github
- Practice interview questions 
- Apply for jobs
- Repeat

-----
`Path for Web-Developers`

- Learn HTML, CSS and JavaScript.
- Learn a framework or library( react, vue, angular are the trending at the moment ) 
- Learn webpack.
- Learn git.
- Open a GitHub account.
- Create a project and push it to GitHub.
- Apply for a job.

----

`Checklist for #CodeNewbies looking for jobs & internships -` 

-  A portfolio website & blog
-  knowledge of your fav. Tech Stack
-  1 page Résumé (pdf)
-  Realtime Projects
-  GitHub profile
-  Stack Overflow profile
-  Professional Email ID

-----
`How to become a better Programmer:`

> Get better at Googling
> Find a mentor
> Help others
> Build side projects
> Improve your soft skills
> Keep learning
> Master the skills you already have 
> Ask for help
> Take regular breaks
> Don't give up
Motivated to open source
Tags: hacktoberfest
Published: 2020-10-15 09:31:32

## 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?! -->
I love open source project and event like Hactoberfest motivates a lot for this. I loved this event. More and more people should contribute to open source.
MY first Hacktoberfest!!!
Tags: hacktoberfest
Published: 2020-10-15 09:31:31

## What I Learned From Hacktoberfest
   I am new to coding world. First of all by successfully completing the hacktoberfest I am feeling really amazing and getting more confidence to do more in this field. This fest taught me many new things and to explore more. Everyone should participate in it.
Completed Hacktoberfest 2020 challenge !!
Tags: hacktoberfest
Published: 2020-10-15 09:25:58

## What I Learned From Hacktoberfest
The October is going in full swing, and the hacktoberfest season is here. I recently completed the challenge and thankfully all my contributions were merged. This was fun and while I am a beginner only but I think the most useful skill that you gain while contributing to open source is that even if you are not familiar with what's going on in the project , you somehow do research, learn couple of new things and you get the task done.
Looking forward to learn more and contribute further in open source.
My profile https://github.com/chetas411
[javascript] Array Partitioning by Length 
Tags: javascript, webdev, ux, 100daysofcode
Published: 2020-10-15 09:21:12

Post #8

i am starting a new initiative today as "Building Custom Algorithm in Javascript without using inbuilt method" 

i hope you guy will find this interesting. i will be writing a Polyfill/Vanilla of one javascript method everyday. starting today with a custom one

Algorithm : Partitioning array elements by range!
Workaround: [1, 2, 3, 4, 5, 6] should produce ["12", "34", "56"] or ["123", "456"] without using map() reduce() filter()

this is my implementation: 
Note: always use arrow method. its not just a trend but it protects you from getting into severe undetectable bugs sometime.

Method 1 : using splice()
```
 let groupInString = (array, length)=>
    {   
        let newArr = []; init = 0;
        for(let i=0; i <= parseInt(array.length/length); i++){
            newArr.push(
                array.splice(init, length, null).join("")              
            );
            init++;
        }
        return newArr;
    }

// Testing:
groupInString([1, 2, 3, 4, 5, 6], 2); //["12", "34", "56"]
groupInString([1, 2, 3, 4, 5, 6], 3); //["123","456"]

```

you can also try it on code pen here: [Link](https://codepen.io/itsmukulmishra/pen/OJXMvJN)

Method 2: Replicating same using slice()
```
let groupInString = (array, length)=>
    {   
        let newArr = []; init = 0;
		let lth = length;
        for(let i=0; i < parseInt(array.length/length); i++){
            newArr.push(
                array.slice(init, lth).join("")              
            );
            init = lth; lth += length;
        }
        return newArr;
    }
```
thanks for catching the point @avalander

i will keep posting new scripts everyday and in case you have some algo you want it scripted(vanilla) then you can just comment it and i will post!

thanks for reading!
My Hactoberfest experience
Tags: hacktoberfest
Published: 2020-10-15 09:00:51

 I learned a lot about how to contribute the open source community , how to create pull requests , how to fork a repo & how to merge any pull requests.


<!-- 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?! -->

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

I'm looking forward for more such events & now I can head start contributing to the open source community.
Finishing Up Pure React and Musings on What's Next
Tags: devjournal, react, computerscience
Published: 2020-10-15 09:14:43

_This post was originally published on October 15, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Thursday - gray and rainy, yay! Just some random thoughts of the day.

Since I'll be finishing up Pure React today (just the last project of the ebook), it's time to start thinking about the next online course I'll be wanting to take.

And I think I'd like to start working on CS50 on edX. Similar to Pure React, I've had a few false starts with CS50 - always starting it but never making it past the second week because of impatience or Shiny Object Syndrome, etc.

Now, fortunately, I've found my project and course rhythm and know I can truly stick to it and focus on its full completion (I've been working on this habit for a while now, and I'm happy to say it's now well-ingrained).

The other thing pulling me toward CS50 is that it has a component/introduction to Python, which I'm quite interested in learning soon.

So, again, today I'll be finishing up Pure React and also reviewing the useReducer function, since it could help me consolidate some of the code in my So You Think You Can France side project.

I also want to look into the React Router documentation to also implement that into the So You Think You Can France static blog portion of the app.

Is today the day I finally add So You Think You Can France to my portfolio? The world may soon find out.



----------


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

![The Ladies Code Collective Podcast cover art](https://dev-to-uploads.s3.amazonaws.com/i/e9bnxljvfrdjeti7fvbr.png)
New to Opensource(:
Tags: hacktoberfest
Published: 2020-10-15 08:55:39

This is  the story of my first opensource project. well that was my friend's project he wanted to get my help so, I forked it and contributed to it. that was before hacktoberfest. then i got busy and started working on other things. in october i came to know about hacktoberfest well who would want to miss that opportunity, for me the sickers (; was more important than the t-sirt so i forked some repo mostly the web development related and yes i won the t-sirt(: with sickers(;

so this is my first post on dev!
My First Time Participating in Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-15 08:55:10

## What I Learned From Hacktoberfest 2020
![Photo of my participation](https://dev-to-uploads.s3.amazonaws.com/i/q6zhmesarh2zbe1a5vmx.jpg)
This year's Hacktoberfest, i decide to take a part in the biggest annual hacking fest and im getting so many exciting experience and do my first pull request :D
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-15 08:44:21

## What I Learned From Hacktoberfest

Hi,

This is my first time completing this challenge. So, I'm very excited 😊

Contributing to open source projects is a great way to improve our coding skills. 

Looking forward to get hacktoberfest badge in GitHub: https://github.com/ThanoshanMV
Triggering Jenkins Jobs From Slack
Tags: devops, development, ci, slack
Published: 2020-10-15 05:19:15

**What about triggering your builds once you get an update from the Development Team on Slack and from their itself you triggered the job, so that all the needful can be done and reports added in your job configuration can be mailed back to developers!!!**

So here we go : 

1.  In Jenkins go to configure page and create API token, which helps you to configure your Job to Trigger Build remotely where you mention your token name.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d9a1w3do44u94nhvzgdj.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jpshnbz0o1og2s1zylkj.PNG)

2. Coming to slack, in apps search for Slash Commands where you can configure and add to trigger build of your job from slack
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xqx3mi9hf3gch6k7g1ts.PNG)

3. In configuration, choose a command name of your choice and then click on add slash command integration.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nay046to0iomf2j3wag9.PNG)

4. Here you will make the entry in the URL mentioning your **https://jenkins-user:token_no@jenkins_url/job/job_name/build?token=token_name**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zo9y2brttcttkf65iqr8.jpg)

5. And at last, you can add an Autocomplete help task which helps you to find your added command easily while triggering, Click save. Go back to Slack and try run your command with the given name and your build will be triggered.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uj7fkhj72kalg7bp0rn3.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q58fvgkodyjznsheiwwb.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xd7f0djsa32nitepqomb.PNG)

Hope You gonna try and make your builds easy to trigger. Keep Building
Automatic Code Reloading in IPython: How to Enable Autoreload at Startup
Tags: ipython, autoreload, cheatsheet
Published: 2020-10-15 08:40:10

---
title: Automatic Code Reloading in IPython: How to Enable Autoreload at Startup
published: true
description: Learn how to enable automatic code reloading in IPython using the autoreload extension. This cheatsheet provides step-by-step instructions without detailed explanations.
tags: IPython, autoreload, cheatsheet 
---

## Automatic Code Reloading in IPython: How to Enable Autoreload at Startup

The `autoreload` extension in IPython provides a convenient way to automatically reload modules before executing code. This feature is especially useful during development when code changes need to be reflected in the IPython session without the need for manual reloading. In this cheatsheet, we'll walk through the steps to enable `autoreload` at startup in both Windows 10 and Ubuntu.

## Setting Autoreload at Startup

To enable `autoreload` at startup, follow the instructions below for both Windows 10 and Ubuntu.

### For Windows 10:

1. Press `Win+R` keys to open the run dialog.
2. Type `%USERPROFILE%` and press Enter.
3. Navigate to the `.ipython` folder. If the folder doesn't exist, these steps won't be applicable.
4. Inside the `.ipython` folder, go to `profile_default/startup`.
5. Create a file named `001.py`.
6. Open the `001.py` file and copy-paste the following code:

```python
import IPython

ipython = IPython.get_ipython()
if ipython is not None:
    ipython_version = IPython.__version__
    major_version = int(ipython_version.split('.')[0])
    minor_version = int(ipython_version.split('.')[1])

    if major_version < 8 or (major_version == 8 and minor_version < 1):
        ipython.magic("load_ext autoreload")
        ipython.magic("autoreload 2")
    else:
        ipython.run_line_magic(magic_name="load_ext", line="autoreload")
        ipython.run_line_magic(magic_name="autoreload", line="2")

    print("Autoreload enabled.")
else:
    print("Autoreload not enabled.")
```

7. Save the file and open IPython. The autoreload feature should now be enabled.

### For Ubuntu:

1. Open a terminal and navigate to `~/.ipython/profile_default/startup`.
2. Create a file named `001.py`.
3. Open the `001.py` file and copy-paste the code mentioned in the Windows 10 instructions (Step 6).
4. Save the file and open IPython. The autoreload feature should now be enabled.

By following these steps, you can automatically enable the `autoreload` extension in IPython, allowing code changes to be automatically reflected in your IPython session without the need for manual reloading.
I'm moderating at Dataweekender conference
Tags: conference, dataweekender, inclusion
Published: 2020-10-15 08:40:04

The Dataweekender conference is coming up again this Saturday Oct 17! After the very successful first Dataweekender conference on May 2nd 2020 with more than 1000 sign-ups and with an excellent speaker lineup, the 6 founders of Dataweekender decided to setup another one this year.  
Just like the first time, I will be moderating again this October 17. The conference will be held from 9:00 - 19:00 Central European Summer Time. 

Dataweekender is a free to watch and free of sponsorships virtual conference and anyone can join. If you're interested in the [schedule](https://www.dataweekender.com/schedule) and if you're hooked up for watching one or more sessions, [sign up here](https://www.meetup.com/de-DE/DataWeekender/). I'll be on track number 4.

The [core organizers](https://www.dataweekender.com/about-us) of Dataweekender, [Kevin Chant](https://twitter.com/kevchant), [Gethyn Ellis](https://twitter.com/gethyn_ellis), [Ásgeir Gunnarsson](https://twitter.com/bidgeir), [Mark Hayes](https://twitter.com/markdataguy), [Damir Matešić](https://twitter.com/matesic_damir) and [Magnus Ahlkvist](https://twitter.com/Transmokopter) are just like I am, strong supporters of [inclusion](https://www.meetup.com/de-DE/DataWeekender/pages/30310995/CodeOfConduct/?name=CodeOfConduct&id=30310995). No matter gender, race or disability, everyone should be equally able to participate this very nice conference with 6 tracks and 60 talks. 

Join us at the conference and have a good time!