Sponsored Content
Top Forums Web Development Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series Post 303031863 by Neo on Wednesday 6th of March 2019 10:18:08 PM
Old 03-06-2019
Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series:

Vue JS 2 Tutorial by The Net Ninja

The Net Ninja is a guy named Shaun Pelling who has this great, no-nonsense, straight forward teaching style who breaks up his tutorials into concise, fast (hence the name "ninja") easy to follow videos.

Shaun's Vue.js tutorial consists of 45 videos which range from 4 minutes to 15 minutes and they are easy, fast and fun to watch. No-nonsense. Just the facts.

So, for all you "semi-retired older guys" here on unix.com who like to tell me you don't have the time or interest to learn any new web dev technologies, I recommend you relax and watch this video tutorial series Smilie

For the younger guys like Ravinder who want to learn Vue. js but don't have the time because of their work and family schedule, I am sure if you watch these videos over a few days when you have time, a few minute here and there, you will understand the basics of Vue.js very quickly.

Hat's off to Shaun Pelling, "The Net Ninja" for his great and FREE video tutorial series on Vue.js.
These 3 Users Gave Thanks to Neo For This Post:
 

9 More Discussions You Might Find Interesting

1. Shell Programming and Scripting

Video Tutorial for sed and awk

Could anyone help me with the link/URL where I can find the Complete Video Tutorial for SED and AWK (1 Reply)
Discussion started by: frintocf
1 Replies

2. Red Hat

nautilus audio/video properties missing tutorial

Since it was a royal pain for me to figure out how to show nautilus audio/video properties I would share this with other people. I KNOW this package does the trick. totem-nautilus This package MAY do the trick. I was reading this. gnome-mplayer-nautilus-1.0.3-1.fc15.x86_64.rpm -... (0 Replies)
Discussion started by: cokedude
0 Replies

3. How to Post in the The UNIX and Linux Forums

Forum Video Tutorial: How to Use Code Tags

How to Use Code Tags in The UNIX and Linux Forums Developer: This video tutorial was created by scott for forum users. Everyone should use code tags when posting code and command line logic in the forums. cPF45jjWe7Q A full list of BB codes is available here. (8 Replies)
Discussion started by: Neo
8 Replies

4. Web Development

Some Thoughts on Vue.js at UNIX.com

Recently, have been learning Vue and, as always, learning-by-doing, which means writing code for real-world applications. In this process, I have learned something that is not really mentioned in the majority of online Vue tutorials. Basically, when you create a Vue instance in your browser,... (0 Replies)
Discussion started by: Neo
0 Replies

5. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

6. Web Development

Vue.js Steam Chat

This Vue.js chat component installed easily: npm i --save vue-steam-chat I was able to set it up and change the background color in the component css file to match the forums in seconds: https://www.unix.com/members/1-albums225-picture1162.png <template> <div style="height: 600px;... (17 Replies)
Discussion started by: Neo
17 Replies

7. Web Development

The State of Vue.js

Here is very good video from Evan You, founder of Vue.js, on the state of Vue.js State of Vuenation with Evan You Here is a nice PDF report on Vue.js Update State of Vue.js Report Vue.js is now the second most starred project on GitHub, recently surpassing Bootstrap. These two... (0 Replies)
Discussion started by: Neo
0 Replies

8. What is on Your Mind?

Video Overview of the Vue.js UserCP @UNIX.com

Here is my second live video screencast (in my life, using Camtasia) with voice for the new usercp: Overview of the Vue.js UserCP @UNIX.com Shout outs to Don Cragun, Corona688, Rudi, Wolf, Made in Germany, stomp, Ravinder, Creative Tim, PubNub and others in the video. Thanks. If you are... (1 Reply)
Discussion started by: Neo
1 Replies

9. Programming

Video Tutorial of Linux System Programming with C

Video tutorial of Linux System Programming with C. YouTube - Linux System Programming with C by Indronil Banerjee (1 Reply)
Discussion started by: vectrum
1 Replies
pods::SDL::Tutorial::Animation(3pm)			User Contributed Perl Documentation		       pods::SDL::Tutorial::Animation(3pm)

NAME
SDL::Tutorial::Animation - Creating animations with SDL CATEGORY Tutorials SYNOPSIS
# to read this tutorial $ perldoc SDL::Tutorial::Animation # to create a demo animation program based on this tutorial $ perl -MSDL::Tutorial::Animation=sdl_anim.pl -e 1 ANIMATING A RECTANGLE
Now that you can display a rectangle on the screen, the next step is to animate that rectangle. As with movies, there's no actual motion. Computer animations are just very very fast slideshows. The hard work is creating nearly identical images in every slide (or frame, in graphics terms). Okay, it's not that difficult. There is one small difficulty to address, however. Once you blit one surface onto another, the destination is changed permanently. There's no concept of layers here unless you write it yourself. If you fail to take this into account (and just about everyone does at first), you'll end up with blurry graphics moving around on the screen. There are two approaches to solve this problem, redrawing the screen on every frame and saving and restoring the background for every object drawn. Redrawing the Screen Since you have to draw the screen in the right order once to start with it's pretty easy to make this into a loop and redraw things in the right order for every frame. Given a SDLx::App object $app, a SDL::Rect $rect, and a SDL::Color $color, you only have to create a new SDL::Rect $bg, representing the whole of the background surface and a new mapped color $bg_color, representing the background color. The colors need to be mapped to the format of the current display. This is done by SDL::Video::map_RGB. my $color = SDL::Video::map_RGB ( $app->format, $rect_r, $rect_g, $rect_b, ); my $bg_color = SDL::Video::map_RGB ( $app->format, $bg_r, $bg_g, $bg_b, ); You can write a "draw_frame()" function as follows: sub draw_frame { my ($app, %args) = @_; SDL::Video::fill_rect($app, $args{bg}, $args{bg_color} ); SDL::Video::fill_rect($app, $args{rect}, $args{rect_color} ); SDL::Video::update_rects($app, $args{bg} ); } Since you can change the "x" and "y" coordinates of a rect with the "x()" and "y()" methods, you can move a rectangle across the screen with a loop like this: for my $x (0 .. 640) { $rect->x( $x ); draw_frame( $app, bg => $bg, bg_color => $bg_color, rect => $rect, rect_color => $color, ); } If $rect's starting y position is 190 and its height and width are 100, the rectangle (er, square) will move across the middle of the screen. Provided you can keep track of the proper order in which to redraw rectangles and provided you don't need the optimal speed necessary (since blitting every object takes more work than just blitting the portions you need), this works quite well. Undrawing the Updated Rectangle If you need more speed or want to make a different complexity tradeoff, you can take a snapshot of the destination rectangle before you blit onto it. That way, when you need to redraw, you can blit the old snapshot back before blitting to the new position. Note: I have no idea how this will work in the face of alpha blending, which, admittedly, I haven't even mentioned yet. If you don't know what this means, forget it. If you do know what this means and know why I'm waving my hands here, feel free to explain what should and what does happen and why. :) With this technique, the frame-drawing subroutine has to be a little more complicated. Instead of the background rect, it needs a rect for the previous position. It also needs to do two updates (or must perform some scary math to figure out the rectangle of the correct size to "update()". No thanks!). sub undraw_redraw_rect { my ($app, %args) = @_; SDL::Video::fill_rect($app, $args{old_rect}, $args{bg_color} ); SDL::Video::fill_rect($app, $args{rect}, $args{rect_color} ); SDL::Video::update_rects($app, $args{old_rect} ); SDL::Video::update_rects($app, $args{rect} ); } We'll need to create a new SDL::Rect, $old_rect, that is a duplicate of $rect, at the same position at first. You should already know how to do this. As before, the loop to call "undraw_redraw_rect()" would look something like: for my $x (0 .. 640) { $rect->x( $x ); undraw_redraw_rect( $app, rect => $rect, old_rect => $old_rect, rect_color => $color, bg_color => $bgcolor, ); $old_rect->x( $x ); } If you run this code, you'll probably notice that it's tremendously faster than the previous version. It may be too fast, where the alternate technique was just fast enough. There are a couple of good ways to set a fixed animation speed regardless of the speed of the processor and graphics hardware (provided they're good enough, which is increasingly often the case), and we'll get to them soon. SEE ALSO
SDL::Tutorial::Drawing basic drawing with SDL Perl SDL::Tutorial::Images animating images AUTHOR
chromatic, <chromatic@wgz.org> Written for and maintained by the Perl SDL project, <http://sdl.perl.org/>. See "AUTHORS" in SDL. BUGS
No known bugs. COPYRIGHT
Copyright (c) 2003 - 2004, chromatic. All rights reserved. This module is distributed under the same terms as Perl itself, in the hope that it is useful but certainly under no guarantee. perl v5.14.2 2012-05-28 pods::SDL::Tutorial::Animation(3pm)
All times are GMT -4. The time now is 06:41 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy