teleren/devto huggingface dataset:
Vue.js Beginner Course - Session 2
Tags: vue, courses, javascript, frontend
Published: 2020-09-26 13:20:21

---
title: Vue.js Beginner Course - Session 2
published: true
description: We'll cover all the basics and work on a small project so you can learn by doing.
tags: vuejs, courses, javascript, frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/z9vgyp0trfee2dsb3jqs.jpg
---

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

Hello everybody,

with [CodeJourneys](https://codejourneys.org) we are going to hold online the second session of our “*Vue.js 3 Beginner Course*”.

The session is streamed on Zoom and everybody can participate for free.

We go through the official documentation and build together one or more basic app in order to work on real and practical examples.

If you are *learning Vue.js* and would like to attend this live coding session, feel free to [join the community’s slack channel](https://codejourneys.org/join-us/).

We use [this repo in GitHub](https://github.com/codejourneys-org/vuejs-beginner-course) to share the exercise and the outcome of the course.

When? [Pick a date on Doodle](https://doodle.com/poll/ieauw7epg57iuq9e)! :)
## Topics
In the next session we are going to learn the following topics:

* Conditional rendering
	* v-if
	* v-show
* For loop
	* v-for 
* Event Handling
	* listening to events
* Style Binding
	* bind single property
	* bind an object
* Class Binding 
* Computed property 
* Components and props
	* create nested components
	* pass info through props
	* use the props
	* Props
		* prop casing
		* prop types
		* passing static and dynamic props
		* required
		* default
		* validator
* Custom events
	* $emit 
  
### The community
You can find us here: [codejourneys.org](https://codejourneys.org)  or on [Twitter](@codejourneys).

Will you join us? 🙂
7 YouTubers that you should follow
Tags: beginners, webdev, javascript, startup
Published: 2020-09-26 13:15:23

#Hi guys

YouTube gets a lot of time in my day and I believe in you too.
It is an amazing tool that if we use correctly can benefit us in work, productivity, relax...

I'm really interesting which YouTubers you follow?

I'm mentioning a few of my YT subscribe to list:

1. Traversy Media
2. The Net Ninja
3. Dev Ed (Front-end development)
4. Caler Edwards (UI/UX Design)
5. CodeBeauty (C++)
6. Avelx (Programming, Front-end development, PHP)
7. Fireship 

+Edit
8. Tech with Tim *Python, Flutter)

Edit:
Guys we just rach 600 views. AMAZING.
Thank you so much, this is my 5th post and I'm really thankful

I will publish Part 2 of this list on the first of October 2020.

Thanks for reading, and if you can feel free to follow me here and on instagram.com/truederva/ (Instagram profile is still under constructing)

Thanks, @derva
【Bash】Creating a secure and versatile temp directory
Tags: linux, bash, mktemp, shell
Published: 2020-09-26 12:55:28

## Introduction
- The code for making tmp directory, which is usually used in shell, has the following points to be improved.
    - Because of the direct specification such as `mkdir /tmp/path`, the names will be duplicated in some cases.
    - Because of the direct designation, it is not secure in terms of security.
    - The names need to be unique and also add relevance so that they are easy to use and generic within the process.

## Result.
- First, we describe the following contents in the shell file we have prepared as a result.

```bash
#!/bin/bash

basepath=$(basename $0)
timestamp=$(date +%Y%m%d%H%M%S)
tmpd=$(mktemp -dt "$basepath.$timestamp.$$")/
echo $tmpd

# Outputs
# $TMPDIR/index.sh.20200919152709.XXXX.XXXXX/
```

- After describing it, run it multiple times to check for creation and non-overlapping of names in the output path, and you're done.

### Using the mktemp command
- You can use the **mktemp** command to create a directory, it creates files and directories of size 0 automatically.
    - For more information on how to use mktemp, please refer to [Reference](https://linux.die.net/man/1/mktemp)

### Use of Template Options
- When creating with mktemp, use the t(template) option, which is specific to this command.
- By doing so, the directory will be created in the path set in the `$TMPDIR` automatically without specifying the directory name.
    - **※To find the configured tmp directory, use `echo $TMPDIR`.**
    - **※If it is not set, it is specified directly by `-p` or stored in `/tmp`.**

### Add related items to the name
- Add anything relevant to the name to make it easier to use when processing it in the program.
- At a minimum, we have added the following.
    - Execution path name
    - Timestamp (time)

### 参考
- [Reference](https://linux.die.net/man/1/mktemp)
Dart x Flutter MokuMoku Live Coding 26/09/2020 
Tags: dart, flutter, mokumoku, livecoding
Published: 2020-09-26 12:26:36

I 'm makeing something with Dart and Flutter while doing live coding on 19/09/2020 now

- not performance coding , not speed coding

# Live Coding Address

https://youtu.be/AROnmhqagew


[delete]
folloinw link is deleted
https://youtu.be/nSNKBmNWBVs


# Code
https://github.com/kyorohiro/mokumoku03



# What is mokumoku

For the time being, people who are interested in a certain theme gather and do their own work. Just that.


＃ What is making

Image uploader at dart x flutter x firebase

# Event Page For JP

https://8beat-mokumoku-2020.connpass.com/event/188590/


# History

- Dart x Flutter MokuMoku Live Stream 05/09/2020
  
https://dev.to/kyorohiro/dart-x-flutter-mokumoku-live-stream-2020-09-05-30oa


- Dart x Flutter MokuMoku Live Stream 12/09/2020

https://dev.to/kyorohiro/todo-dart-x-flutter-mokumoku-live-coding-12-09-2020-bbm

- Dart x Flutter MokuMoku Live Stream 19/09/2020

https://dev.to/kyorohiro/dart-x-flutter-mokumoku-live-coding-19-09-2020-iec

- Dart x Flutter MokuMoku Live Stream 26/09/2020

now!!



# Result

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

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

# TODO

- Recreate Dynamic Grid View
- Upload Image then display this
- Upload things other than images
- Something Animation

# Reflection

Hmmm, it's an image uploader, so it should be light
Because it doesn't end

Carry over to next time ..
Hmm

However, I wonder if the feeling of developing with Flutter and Dart will gradually return.

I want to continue until I can write code at 3x speed

# know-how
Google Dork List
Tags: google, search, boxpiper
Published: 2020-09-26 12:32:00

Google Search Engine is designed to crawl anything over the internet and this helps us to find images, text, videos, news and plethora of information sources. With its tremendous capability to crawl, it indexes data along the way, which also includes sensitive information like email addresses, login credentials, sensitive files, website vulnerabilities, and even financial information. In many cases, `We` as a user won’t be even aware of it.

> **Google Dork** is a search query that we give to Google to look for more granular information and retrieve relevant information quickly. For example, try to search for your name and verify results with a search query [inurl:your-name]. Analyse the difference. You just have told google to go for a deeper search and it did that beautifully.
> 
> <footer>
> <cite></cite>
> </footer>

Now, Intruders narrow down the search to a specific website and check for specific text/keywords with the aim to access sensitive information. And that’s unethical hacking. Search string which could be used for general purposes is now exploited as well.

Google search service is never intended to gain unauthorised access of data but nothing can be done if we ourselves kept data in the open and do not follow proper security mechanisms.

Essentially emails, username, passwords, financial data and etc. shouldn’t be available in public until and unless it’s meant to be. 

To continue reading, head over to [Box Piper](https://www.boxpiper.com/posts/google-dork-list/) source.

To read more such interesting topics, follow and read <a href="https://boxpiper.com/">BoxPiper blog</a>.

Support my work and [buy me a Coffee](https://ko-fi.com/E1E72C2MM). It'll mean the world to me. 😇

<a href="https://ko-fi.com/E1E72C2MM"><img src="https://cdn.ko-fi.com/cdn/kofi1.png?v=2"/></a>
Daily Developer Jokes - Saturday, Sep 26, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-09-26 12:00:20

---
title: "Daily Developer Jokes - Saturday, Sep 26, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Sep%2026%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125947cfb29.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*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:
___Q:___ An Agent died unexpectedly. How was the crime solved?

___A:___ By looking at the Stack Trace.
 -->
Monitoring and Performance Wrap Up - September 2020
Tags: performance, monitoring, bestofdev
Published: 2020-09-26 11:15:54

Hi! I'm Helen, one of your friendly mods looking after the #monitoring and #performance tags. 

At the end of each month, I'll be showcasing some of the great posts, projects, and insights from the Dev community. 

-------------------------

To get us started Tim from the Angular team shows us how to improve performance with prefetching. This can be used to make your application feel faster. As long as you have a cache to persist the data, you can use this technique to improve the user experience.


--------------------------

{% link https://dev.to/angular/making-your-application-feel-faster-by-prefetching-data-with-ngrx-19f2 %}

---------------------------

Next, Mark from the Bearer.sh team lists the most common and valuable metrics to monitor when relying on third-party API integrations and web services. Accurate monitoring and alerting can provide you with the data to decide where to focus your engineering efforts

--------------------------

{% link https://dev.to/bearer/api-monitoring-what-should-you-measure-2pjn %}

---------------------------

Rajan then gives us some tips on optimising the performance of Lambdas. Although Lambda is a managed service and it automatically scales, it's the client's responsibility to correctly use the service. By using these optimisations you can lower your Lambda bill.

-------------------

{% link https://dev.to/rajanpanchal/aws-lambda-performance-optimizations-4hn6 %}

---------------------------

Next, we have a post from Vinicius from PHP Brazil all about asynchronous programming in PHP. Check it out for great tips to improve performance and manage costly I/O operations.


-----------------------------

{% link https://dev.to/phpbrasil/php-assincrono-de-forma-nativa-1db1 %}

---------------------------

Py returns to the wrap up for another month with a post on Android objects and the tools we can use to analyse memory. Reading the Android sources is fun! Even when you have no idea how C++ works.


--------------------------


{% link https://dev.to/pyricau/the-real-size-of-android-objects-1i2e %}

---------------------------

Next, we have Kunal and a post on Prometheus. An open-source monitoring and alerting tool. It was originally built by SoundCloud and now it is 100% open-source as a Cloud Native Computing Foundation graduated project. It has become highly popular in monitoring container and microservice environments.

---------------------

{% link https://dev.to/kunal/prometheus-101-oj5 %}

---------------------------

To end this month's wrap up we have a post on currying in JavaScript from Anders who also returns to the wrap up for a second month. Check it out for use cases and if it's a good choice for your next project.

--------------------------

{% link https://dev.to/anders/the-price-of-currying-4m95 %}


----------------------------



--------------------------


That's all for this month! For more, check out the #monitoring and #performance tags.
Imba - Another reactive technology for the web
Tags: javascript, imba, python
Published: 2020-09-26 11:10:58

Hi there,
Have you ever heard of **Imba**?
Imba is "*another*" tecnology for writing reactive components for the web, this time with a new **python** like language.

Here the official [Imba.io](https://www.imba.io/) page

Let me know in the comments what you think!
Ctrl-v I # cannot comment out multiple lines
Tags: vim, troubleshooting
Published: 2020-09-26 11:07:48

I find out that when I try to comment multiple lines with

    Ctrl-v I #

it only change the first line by insert a `#`, but if I use other character instead of `#`, it works as normal, I used to using `Ctrl-v I #` to comment multiple lines, I don't know why it does not work today
Angular NgModel : Model, ViewModel and Pipes
Tags: angular, typescript
Published: 2020-09-26 11:07:04

Today's focus is on the [ngModelChange](https://angular.io/api/forms/NgModel#properties) event. This event is an @Output event on the [ngModel directive](https://angular.io/api/forms/NgModel#ngmodel).

The code below is using a select element for picking a City. The options presented to the user are a list of all Cities in any given State. 

The bindings for the select element are shown below. 

```html
  // the ngModel traid for 2 way data binding
  #city="ngModel"
  [(ngModel)]="address.city"
  (ngModelChange)=
    "address.city = onPropertyChange(city)"
```
```typescript
  onPropertyChange(city) {
      return city.viweModel;    
   }
```
The triad of #city,[(ngModel)] and (ngModelChange) allow for two-way binding. When onProperyChange fires the ngModel named city is seen.

When our input control first loads, the ngModel is bound to the address.city property. The default value for address.city is "undefined". After the user makes a selection, this is what is shown for the NgModel.

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

**viewModel**

The 'viewModel' exposes the current change. It's the same value as is found in the control's value property and always tracks that value. 

- The "control" being an automatic instance of the Angular FormControl. 
- The 'viewModel' property is easier to use than to go into the control.value property.  

**model**

In the image above we see a value of "undefined" for the "model" property. The model property is always the "last" known value for the binding. A nice way to revert changes should something go wrong. 

**Using Pipes**

ngModelChange will always fire before the pipe does. Here we add a pipe named 'cityPipe' 

```html
  #city ="ngModel"
  [ngModel]="address.city | cityPipe"
  (ngModelChange)=
    "address.city=
       onPropertyChange(city)"  

```
- #city is the name of the control which has a value of the ngModel instance.
- The onPropertyChange function allows us to do other things before returning a value for the address.city assignment. 
- The address.city value becomes the value returned from the onPropertyChange function. 
- After onPropertyChange returns; the Pipe named 
cityPipe is called.

>Note: Don't set address.city in the onChange function as it will cause an endless loop of onChange events. Rather set address.city as shown above.

Changes made via the pipe will not re-fire the NgModel Change event! This allows the actual value of address.city to be different than the displayed post-pipe action. This is especially useful for hiding values in the view.

Next up: Using Validation Patterns with ngModel.

JWP2020 model viewmodel ngModel binding
🌏 A new competitor came to SERP tools
Tags: showdev, discuss, offers, startup
Published: 2020-09-26 11:06:51

![serp tool screpy](https://screpy.com/wp-content/uploads/2020/09/Group-533.png)

[Screpy SERP](https://screpy.com/keywords). Cheaper, more flexible, more understandable. You can now full access.

### How can I do with Screpy SERP?

- Monitor your keywords free
- The most understandable SERP tracking table **ever made**.
- Check your **related keywords** for each keyword.
- You can check 2000 keywords monthly*
- See trends by country, subregion, metro or city.
- Top 100 Google results.
- Keyword interest by time - past 12 months.

Get full access to our SERP and other powerful tools. You need just an account.

SERP, SEO Audit, Pagespeed Analysis, Uptime Monitoring, Syntax Checker and more...

One time offer: 
Coupon code for 50% discount: **ihdiscount50** 

See our plans on [Screpy](https://screpy.com/pricing)
[Laravel 8 PDF] Laravel 8 Generate PDF File using DomPDF- Step by Step
Tags: laravel, pdf, dompdf, codeigniter
Published: 2020-09-26 10:39:31

PDF is one of the basic requirements when you are working on the eCommerce website. we need to create a pdf file for the invoice etc. So, here I will show you a very simple example to create a pdf file with laravel 8.

In this example, we will install barryvdh/laravel-dompdf composer package, and then we will add a new route with a new controller file. Then we will create one example blade file. Then after you have to just run the project and see the pdf file for download. You need to just follow a few steps and get a basic example of a pdf file.
config/app.php
```
'providers' => [
    ....
    Barryvdh\DomPDF\ServiceProvider::class,
],
  
'aliases' => [
    ....
    'PDF' => Barryvdh\DomPDF\Facade::class,
]
```
Read More: [[Laravel 8 PDF] Laravel 8 Generate PDF File using DomPDF- Step by Step](https://www.phpcodingstuff.com/blog/laravel-8-generate-pdf-file-using-dompdf.html)
CSS Grid Crash Course
Tags: css, html, codenewbie, webdev
Published: 2020-09-26 10:34:52

In the following video tutorial, I will teach you everything you need to know about CSS Grid. By the end of the tutorial, you should be able to create more awesome and complex web UI layouts using just CSS grid.

Please subscribe to my channel here: https://www.youtube.com/channel/UCe8uN9zoKksCb1hfw61myRw?sub_confirmation=1
Follow me on twitter: https://twitter.com/ChaooCharles

{% youtube 0KvxHglNWi0 %}
Merge Conflict Resolution
Published: 2020-09-26 10:33:10

**Committed while in Master Branch?**
<sub> We've worked all day to get a push done by day's end. Multiple commits and other pull requests/builds going on throughout the day. We didn't merge master with local branch before pushing. 

<sub>We see the pull request and attach a task to begin the dev build from VSTS. It immediately fails with merge conflicts. 

**The Good News**
Because we were on a branch and committed prior to the push; we are able to know our changes won't be lost.

**How to fix**
- Ensure there are no more changes in local branch. Either stash or push until no changes remain.
- Switch over to master branch and do a "git pull"
- Switch back to the "other" local branch.
- Type in "git merge master"
- We should see files show up in Visual Studio Code as changes with a "C" status indicating conflict. 
- Browse through each file one at a time and note that the "Current" changes are the changes that were pushed prior but failed. The 'incoming' are from the master branch. 

The current changes are most likely the ones desired. Ensure this is true by examining all "Current" changes compared to the "Incoming" changes.  If the "Current" changes are the ones needed, close the file then right click on that file name in the "Changes" view and select "Accept all Current".
- The file changes will then open in edit MODE. Inspect and close file when all is good.
- No right click again on this file and select "STAGE Changes"
- Repeat for each file showing a "C" (Conflict) 
- When done, push all the changes and the pull request should restart automatically!

**A Better Way**
Just do the master merge bit before the first push.


To complete the merge just stage all the changes.


JWP2020 Merge Conflicts
How to work with inline SVG in Blitz.js(Next.js)
Tags: blitzjs, react, nextjs, javascript
Published: 2020-09-26 10:23:18

---
title: How to work with inline SVG in Blitz.js(Next.js)
published: true
description: In Blitz.js, it was taken up by issue that the inline SVG does not work when set up as documented in Blitz.js.
tags: Blitzjs,react,Nextjs,javascript
//cover_image: https://direct_url_to_image.jpg
canonical_url: 
---

![hero](https://cdn-images-1.medium.com/max/1600/0*XKKn0y0mGb00zwYl)

In Blitz.js, it was taken up by issue that the inline SVG does not work when set up as documented in Blitz.js.

This is an issue with Next.js and is covered in issue [here](https://github.com/vercel/next.js/issues/14892).
Blitz.js is built on top of Next.js and the front end is equivalent to Next.js.
It can be solved with the same response as Next.js

## First - Install packages
```bash
$ yarn add babel-plugin-inline-react-svg
$ yarn add babel-plugin-module-resolver
```

## Second - Edit babel.config.js
```js
module.exports = {
  presets: ["next/babel"],
  plugins: [
    ["module-resolver", { "root": ["."] }],
    "inline-react-svg",
  ],
}
```

Now you should be able to view your SVGs!

If you don't know how to do it, I've uploaded the source to Github and you can take a look at it.

https://github.com/nitaking/sample-blitz-svg-setting

Click [here](https://github.com/nitaking/sample-blitz-svg-setting/commit/58649f378bbce466fa43e29418c1a03260bfbb92) for specific commitments.

It shows up like this 🙌

![result](https://miro.medium.com/max/1400/0*ZNFb0E2JHczatLZQ.png)

Have a good Blitz.js life!
Xbox Console Streaming (Preview) | Xbox
Published: 2020-09-26 10:12:25

<p>The Xbox Console Streaming (Preview) lets users stream <strong>Xbox One games on Android Phone</strong>.</p>
<p>Any <strong>Xbox One games</strong> which are downloaded in your console can be streamed and played on your android device using a gaming controller.</p>
<h2>You can play games whenever and anywhere you want to.</h2>
<p>It's completely free; you need to log in to your Microsoft's Xbox account and access all the <strong>Xbox One games</strong> library on your smartphone device.</p>
<p>Initially, this feature can be accessed by anyone who joins Xbox Insiders but on Monday, the Xbox Game Streaming app was released for everyone on Play Store.</p>
<p>If you want to stream and play <a title="Stream Xbox One Games on Your Android Phone" href="https://www.teqhow.com/stream-xbox-one-games-on-your-phone/" target="_blank"><strong>Xbox One games on Android</strong></a>, you must have an Xbox One Console, an Xbox controller and strong internet connection.</p>
<p>After that, you need to go to the Play Store and download <strong>&ldquo;</strong>Xbox Game Streaming App (Preview).</p>
<p>With the help of the new Xbox app, you can configure your Xbox console's settings, install games directly to console, manage the game library and free up space.</p>
<p>It has been heard that you can even remote control your Xbox One console using the app.</p>
<p>Currently, the app is a Beta program, and you might face bugs or issues. Xbox welcomes all your feedback on it to improve it.</p>
<p>It is only available to download on Android phones and tablets.</p>
<p>Due to the App Store&rsquo;s policies, Microsoft is unlikely to release it for iOS.</p>
<h3>For the Next Blog -</h3>
<p><strong><a title="xCloud and Stream Xbox Games on Your Phone" href="https://www.teqhow.com/get-microsofts-xcloud-and-stream-xbox-games-on-your-phone-now/" target="_blank">Get Microsoft&rsquo;s xCloud and Stream Xbox Games on Your Phone</a></strong></p>