teleren/devto huggingface dataset:
Group Video Watching with Laravel
Tags: laravel, video, php, javascript
Published: 2022-07-26 12:28:00

A group wants to stream videos, with the presenter selecting the movies to watch, controlling the play/pause, and seeking interesting moments. Such a presentation experience is useful for webinars, and education, among others.

We describe how to implement the experience in [Laravel](https://laravel.com) with the TALL stack.

## Presentation Events

These events will be broadcast by the presenter:

1. Choice of video
2. Play 
3. Pause
4. Going to a moment in the video

Events are broadcast using [Laravel Echo Server](https://github.com/tlaverdure/laravel-echo-server), [Laravel Websockets](https://beyondco.de/docs/laravel-websockets/getting-started/introduction), or [Soketi](https://docs.soketi.app). Say on a channel `streaming`.

## Listening to Events

In the participant [Livewire](https://laravel-livewire.com) component, we define the listeners:

	protected $listeners = [
		'echo:steaming,VideoChoice' => 'process_video_choice',
		'echo:steaming,Play' => 'play',
		'echo:streaming,Pause' => 'pause',
		'echo:streaming,GoToMoment' => 'process_goto'
	];

## Processing Events

Each event is dispatched to the front-end [Alpine.js](https://alpinejs.dev) code using `dispatchBrowserEvent`. 

For example, for going to a video moment, on the instruction of the presenter,

	private function process_goto($data) 
	{
		$moment = $data['moment];
		
		$this->dispatchBrowserEvent('goto-moment', ['moment' => $moment]); 
	}

## Controlling the Video in the Browser

In Alpine.js, we listen to events from Livewire and then:

1. Go to the desired video moment
2. Switch the video
3. Play
4. Pause

For example, for going to a moment and for switching videos,

	<video x-ref="video" 
		x-data="{ play: false }" 
		@goto-moment.window="$refs.video.currentTime = event.detail.moment"
		@video-choice.window="$refs.video.src = event.detail.video_file_path; $refs.video.load();"
	>
	   
	</video>

## Presenter Interface

A web page with a list of videos and a video player. 

For simplicity, assume the presenter has on the web page an HTML `video` element.

Play and pause on the video element are sent from Alpine.js  using, 

	Livewire.emit('play');
	Livewire.emit('pause');

and when going to some moment in the video, 

	Livewire.emit('seek', { 'moment': $this.refs.video.currentTime });
	
To be processed in Livewire, in a listener,

	protected $listeners = ['seek' => 'process_seek'];
	
	public function process_seek($data)
	{
	    $moment = $payload['moment'];
	}
Create a react-ts template powered by Vite
Published: 2022-07-26 12:19:24

## **Steps:**

- Create a project with Vite.

With PNPM:
```
pnpm create react-ts-vite-template --template react-ts
```
With NPM:
```
npm create react-ts-vite-template --template react-ts
```
- Change directory to your project, initialize git with:

```
git init
```
- Install packages using:

```
pnpm install

#or

npm install
```

- Run the application by using:

```
pnpm start dev

#or

npm start dev
```

- Once you clean up the initial setup, commit and push to a Repository. 

- Go to the Repository in Github -> Settings -> Check the box for Template Repository
![Settings -> Template Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dggqn4rfzftglpq21crj.png)

- That's it!
![Final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fi8nd6mdfm2re6q4tuz.png)

You can use this template to generate new Repositories with the same configs and folder struture.
bootstrap5 nav menu close on click
Tags: bootstrap, angular, html
Published: 2022-07-26 12:15:00

I am using bootstrap5 nav menu in my angular application, I am not able to close nav menu on click below is my code snippet:
 `` <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon" ></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item about" ><a class="nav-link" href="#about" >About Us</a></li>
            <li class="nav-item services"><a class="nav-link" href="#services">Services</a></li>
            <li class="nav-item career"><a class="nav-link" href="#career">Careers</a></li>
            <li class="nav-item resource"><a class="nav-link" href="#resource">Resources</a></li>
            <li class="nav-item contact"><a class="nav-link" href="#contact">Contact Us</a></li>
        </ul>
      </div>``
login/register pages with Laravel 8's Jetstream not responsive
Published: 2022-07-26 12:04:27

I created a new laravel project and want to use the jetstream auth method. When I installed jetstream using 

```
composer require laravel/jetstream
```
 and 

```
php artisan jetstream:install livewire
```
.

I could see the resulting login/register page on my localhost via browser but the login/register interface isn't responsive at all. What can I be missing?

I attempted to run build and got this error also

```
$ npm run build 
npm ERR! Missing script: "build" 
npm ERR! 
npm ERR! To see a list of scripts, run: 
npm ERR!  npm run  
npm ERR! A complete log of this run can be found in: 
npm ERR!  C:\Users\DELL\AppData\Local\npm-cache\_logs\2022-07-26T11_32_35_913Z-debug-0.log
```
What are the best apps for finding freelance work?
Tags: freelance, apps, freelancerapps, seo
Published: 2022-07-26 11:41:07

_> Written by **[UUKI](https://www.uuki.live/)** Team_

**1. [Upwork](https://www.upwork.com/)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jclgf9tzn7d5nfa2s966.png)

One of the best freelancing sites on the web, Upwork is a great resource for those just starting their freelancing journey. 

Upwork has clients that are looking for everything, from business plans to web design to children's book illustrations.

The Freelancer Basic account gets you 10 free connects per month. Each job that you bid on requires anywhere from 1 to 6 connects to be able to submit your proposal.

**2. [Gigwalk](https://www.gigwalk.com/gigwalkers/)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6aok0pq8ozuglg2hjmwi.png)

No matter if you are looking for a few extra bucks spending money, or if you need to earn an entire paycheck, Gigwalk might be just what you need.

Just download the app, register, and link your PayPal, then check out the gigs in your area. Work as little or as much as needed.

**3. [Rev](https://www.rev.com/)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns6jmrbnghr24tqya15m.png)

Rev is a transcription platform that allows anyone to pick up freelance transcription work anywhere they have a computer and internet access.

You will initially need to pass a competency test, but after that, you will be able to start taking jobs you are comfortable with.

As long as you keep your scores and metrics up, you can advance to the top level of transcriptionists, giving you access to better jobs, higher pay, and the ability to grade other jobs.

**4. [Peopleperhour](https://www.peopleperhour.com/)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvjytcm06fl4o9wh84ha.png)

Peopleperhour is one of the top freelancing sites that connects clients to freelancers that are available for them.

They are a bit more strict than other sites, as they require aspiring freelancers to apply to become certified on their site.

**5. [Fiverr](https://www.fiverr.com/?referral_campaign=RPCampaign1&referral_invitee=social&referral_inviter=53321673&referral_key=eb2ddbb8db23489127ce022a2b0805665330139b&show_join=true&utm_campaign=referral_program_show&utm_content=&utm_medium=shared&utm_source=get_url&utm_term=)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nd5dflkb85ewnm50bhf.png)

If you are brand new to freelancing and want to be able to get your foot in the door and land a quick job, Fiverr is a great place to browse.

There are a ton of random jobs available, from logo designs to resume editing to blog writing.

Fiverr is a place where clients go to find affordable workers, so don't expect to make hundreds of dollars right off the bat, but if you have the patience to browse, you are sure to find a rewarding gig.
Real Time Comment System Using Node.js, Express.js, Socket.io and MongoDB
Tags: node, javascript, websocket, mongodb
Published: 2022-07-26 11:29:38

Hey friends, today I am going to show you, how to create a Real time comment system using Node.js, Express.js, Socket.io and MongoDB. This is really a awesome project to learn basics of Websocket and socket.io. If you want to know more about this project, please read this complete article. In this post I'll also share the code that I have written to develop this project.

In this real time comment system, if you write a comment on a post then instantly that comment will appear to the other connected users that are on that post without refreshing the page. I have also used MongoDB to store the comments of users with their name.

Note: If you are interested in reading poetry, you can [Download Leaves of Grass by Walt Whitman PDF](https://pdfbooks.myeduwaves.com/2022/07/leaves-of-grass-by-walt-whitman-pdf.html)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apflcgaag0r2c2t9xip8.png)
When you visit the live demo of this website which is [Real time comment system](https://comment-now.herokuapp.com/), first of all you have to enter your username in prompt then only you can comment on the blog page. Of course you can do user authentication or login facility by your own which I have not implemented in this project.

I have used Node.js, Express.js for backend and Socket.io package for real time communication and MongoDB to store the data into databases. To create frontend I have used HTML and some basic CSS and JavaScript.

##Real time comment system using Express and Socket.io [Source Codes]##

To create this project in your system you need to download Node.js and MongoDB. If its all ready in your system then you don't have to download any thing. Otherwise make sure you first of all download Node.js and MongoDB. Which you can download from their website.

After that just visit this [Github repo](https://github.com/codersgyan/realtime-comment-system) and clone or download the zip file.

Open the downloaded file in VS code or your favorite code editor. Open terminal and run command `npm i` to download all the packages. After that just run the command `npm run dev` to run the project. That's all, your project will be live on localhost 3000.

So that's all this friend.
Thank You.
How to install ImageMagick to Cloud Functions PHP
Tags: cloudfunctions, php, imagemagick, gcp
Published: 2022-07-26 11:16:42

Put the php.ini file with `extension=imagick.so`.
That's it!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5h40752u0z4eobp95e2.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kupak11h2pna5fx8oo8.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olbcos02wan3v4vxh0cx.png)


And also, you can install Memcached, gRPC, protobuf, MongoDB, OpenCensus and PHPRedis to Cloud Functions PHP in the same way😉
https://cloud.google.com/appengine/docs/standard/php-gen2/runtime#dynamically_loadable_extensions
Hello, world!
Tags: firstpost, webdev
Published: 2022-07-26 11:02:00

Hello, world!
This is my first post on Dev.to and I have a few reasons for being here:

1. Making connections with other developers and using their experiences.
2. Improving my English writing. It' so bad and I have to make it better by over-writing.
3. I still consider myself a beginner, but sometimes I have an idea for writing about and it may help beginners like me! I'm interested in building things by PHP/Javscript and crave learning new stuff.
4. Finding a new challenging job! Who hates better opportunities? 😁
5. Not everyone writes here and the network is more technical.

So... I'm here!
Thinking about a subject for the next post...
Install and run old dependency
Tags: node, npm, react, opensource
Published: 2022-07-26 11:01:57

I am trying to install `packages.json` of the repository [datacamp light](https://github.com/datacamp/datacamp-light) but the dependencies and other things getting old and didn't install. I used force install but not work. Also, I update modules and then install again not work. I also downgrade npm and node versions. Can anybody help me to install and run this repo properly in local machine. I really appreciate any help you can provide.
Slow Ubuntu ? Check the Swap
Tags: linux, ubuntu
Published: 2022-07-26 10:57:00




Ubuntu 20.0 OS that I was using had been stopped working several time lately. Today I checked the "htop" when the computer become so slow.
The culprit is the swap size, I'm using 2GB swap file and it was hitting to the maximum point, red colored. My laptop has 8GB of physical memory. According to the documentations, the optimal swap file size must equal to physical memory. So I execute the following commands.

```
swapon --show
sudo swapoff /swapfile
sudo rm  /swapfile
sudo fallocate -l 8G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
```

Then viola, I'm opening VSCode, running Mongodb, Node.js, ReactJs and 2 windows of Firefox. VSCode is still functioning. A good day for me yeah.
What are you learning right now?
Tags: discuss, webdev, javascript, beginners
Published: 2022-07-26 10:46:40

Hey everyone! I want to know what people are learning now, maybe I missed something.

I'm currently learning NestJS. I needed API for my [Expense Tracking App](https://twitter.com/ExpenseApp) and I was thinking about using Ruby on Rails, but then I realized if I try to write using NestJS Framework, I will also be able to learn Angular in the future, as I see everywhere things like this "NestJS is Angular for Back-end", so I'm going to check if it's true 😄

Now, I'd be happy to hear something from you 🙏
Dictionary is unordered but list is not
Tags: python, dictionary, list
Published: 2022-07-26 10:41:50

Dictionary is unordered . What do I mean by that?
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1y0we58xd62kcbs5gj5g.png)

You can tell that these 2 dictionaries are equal . Although the order of the keys are not same. But the values are same.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u10px7eefzz2n1bkue4.png)


But for lists, the order does matter.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fun23rckmdpwhmof38jt.png)
These 2 lists are not equal as the order of the data or value is not same.


SO, this is ordered & unordered means.

Keep that in mind dear!
<img src="https://c.tenor.com/Tvd3VKwtse0AAAAC/cat-cute.gif">
Prioritizing Tasks - Time Management
Tags: tasks, prioritization, timemanagement, taskmanagement
Published: 2022-07-26 10:38:30

One of the important aspects of time management is to prioritize the tasks in hand. This is more of a daily routine one has to perform at the start of the day's work. However, for some prioritizing might be confusing or difficult. That's where the Priority Quadrant comes to the rescue. 

The Priority Quadrant, also called the Eisenhower Important/Urgent Principle or Eisenhower Matrix, is a simple rule for classifying the tasks in hand. It is based on the Urgency and Criticality or Importance of the task. 

Urgency implies whether the task needs to be addressed at one or the earliest possible

Criticality/Importance means completion of the task is significant to achieving the goal

The Priority Quadrant requires one to classify the tasks based on the following

- Urgent, Important
- Urgent, Not-Important 
- Not-Urgent, Important
- Not-Urgent, Not-Important


![Priority Quadrant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/divz87zou03j08om174q.png)

The classifications themselves should be pretty self-explanatory. The following image illustrates on how to handle each of those category of tasks.

Sometimes, one may find tasks as all urgent and important or have difficulty in categorizing them. In such cases, it would be better to get the help of the superior, who assigned the tasks, to prioritize. 

There are a lot of tools available for free that can be use to prioritize the tasks - Microsoft To-Do, Trello, Asana etc.

Initially, getting hang of the priority quadrant might seem a bit tough but over time, it makes life easier.
How To Add Menu, Filters For Collection And Logo In Shopify Store
Tags: webdev, beginners, tutorial, shopify
Published: 2022-07-26 10:30:24

How To Add Menu, Filters For Collection And Logo In Shopify Store | Shopify Tutorial For Beginners | Part 5

Learn How To Create Shopify Store (Shopify Store Setup Tutorial), Learn in English. Create Shopify Store, and earn money from home. Shopify Store creation and setup process for beginners. If you want to start drop shipping, or if you have brand and want to sell online by having ecommerce website then you can use Shopify to sell products. Watch the complete video and learn How To add menu, filters to Collections and upload logo in Shopify Store.

Shopify is an online Ecommerce platform which allows users to create online store. Using Shopify you can sell digital products, physical products and can also start drop shipping business. Shopify is one of the biggest ecommerce platforms and it is used by biggest companies across the world.

In this video I have shown complete process how to add menu, filters to Collections and upload logo in Shopify Store. This video is helpful for all the beginners and also to users who are already using Shopify but have lesser knowledge about Shopify.


[![How To Add Menu, Filters For Collection And Logo In Shopify Store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0u80y90u8ajxvuo1am6.png)](https://youtu.be/iEzrzuMDHh4)
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-07-26 08:00:07

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b924543.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
A programmer's significant other tells them, "Run to the store and pick up a loaf of bread. If they have eggs, get a dozen."

The programmer comes home with 12 loaves of bread.
 -->
What is an ideal way to find clients in LinkedIn?
Tags: linkedin, digitalmarketibng, seo, marketingstratagy
Published: 2022-07-26 10:29:58

> _Written by **[UUKI](https://www.uuki.live/)** Team

_LinkedIn is a powerful tool for engaging leads and making sales. With its 750+ million users, LinkedIn helps you connect with clients and generate income.

**1. Optimize your LinkedIn profile (above the fold)**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rpmup4sje5eqd3tc6gr.png)

There are 2 factors to consider when you optimize your LinkedIn page.

First, tailor your profile to your ideal client. The point of LinkedIn is to market yourself as a quality employee. Create a "client persona" and answer the following questions.

- What skills are important to my employer? How much experience do they want to see? What keywords will stand out to them?

Secondly, allow your personality to shine on your LinkedIn page. While clients look for certain criteria on your profile, they also want to hire someone who brings something unique to the table.

- Do you have past experience that stands out from other candidates? Does your header express yourself? How can you write a professional profile using your own voice?
Keep these answers handy as you optimize your profile.

Think through these answers as they will help you accurately represent your brand on your page.

**2. Schedule posts**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snsv5xd2oeib3xgjv3w9.png)

Whether you're time-poor or simply prefer to run your business efficiently, scheduling posts is the way to go.

It's important to do because it allows you to post at various days and times. Once you've done this for a while, you'll discover which days and times get the most engagement and can schedule posts mostly in those slots.

There are plenty of free tools out there for scheduling to social media, and almost all have free plans.

We love Feedhive and Hootsuite, but find the one that works best for you.

These platforms will also give you the analytics you need to determine which posts get the most engagement, so you can craft future content accordingly.

**3. Get social on LinkedIn**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qipyfjiismeq3z2qxlt.png)

Once your LinkedIn profile is optimized and daily posts are scheduled, you'll be ready to show off your page and start networking.

There are 2 tactics to keep in mind as you socialize with professionals.

- First, share your knowledge about your niche. Write statuses, share articles, and keep your profile up-to-date.

- Second, expand your professional bubble. If you stick to one type of client, you'll miss out on other opportunities. With that in mind, take initiative and follow well-known influencers, fellow professionals, and other business owners you can work with.

For example, if you're starting a B2B marketing company and want to implement a blog, it would be beneficial to connect with B2B writers.
Create any type of sample data in one line of code
Tags: programming, javascript, webdev, tutorial
Published: 2022-07-26 10:25:00

In today's story, why you should choose next.js over Create React app and Gatsby. 

[Video link](https://youtube.com/shorts/JVHYhEdDr3w)

**Conclusion**
Until next time, have a good day.

Keep developing!!

Our website [iHateReading](www.ihatereading.in) || [Youtube](https://www.youtube.com/channel/UC6I-Tz6QwYbJpoIK7l0NtXA) || [Twitter](https://twitter.com/treyvijay)
Let’s take a look at the new ODBC connection page!
Tags: odbc
Published: 2022-07-26 10:08:17

---
title: Let’s take a look at the new ODBC connection page!
published: true
description: 
tags: odbc
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
https://www.devart.com/odbc-connection/
On this page you’ll learn how to:
- Create ODBC Connection on Windows, Linux and macOS;
- Set Up ODBC Connection String Parameters on Windows;
- Check ODBC Connection on Windows and more.

✅ Download a 30-day absolutely free trial of our ODBC Drivers: https://www.devart.com/products.html#odbc
Why I choose dev.to, to be my blog writing tool
Tags: beginners
Published: 2022-07-26 09:59:49

Hello, today I decided to write my first article on dev.to. Like you already know, to run WordPress it needs a lot of things to run full state VM or you need to run it somewhere on SAS provider.

Because of above reason, I decided to choose dev.to, to be my writing tool. I use dev.to API to query all articles that I've publishes, then using NextJS to query these articles to show on my own.

NOTE: (This one is just a sample article)
I made a second video on my channel /dev
Tags: javascript, tutorial, react, webdev
Published: 2022-07-26 09:45:00


Click Me Pls [YOUTUBE](https://www.youtube.com/watch?v=HmuR9okeI0M
)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9xqtqafczqq5v779aqv.jpeg)