Detect Supported Audio Formats with JavaScript

As streaming becomes our main entertainment source and vendors fight to create the best video format, it’s going to be more and more important that we detect device and browser video support before posting videos on our websites.  We think less about audio but the same principle applies:  detect whether or not a given audio format […]
The post Detect Supported Audio Formats with JavaScript appeared first on David Walsh Blog.

Link: https://davidwalsh.name/detect-supported-audio-formats-javascript

Detect Supported Video Formats with JavaScript

Over the past few years we’ve been seeing new audio, video, and image formats take shape to challenge the legacy formats that we’ve used since the web’s inception.  This is a great development as we have more processing power and better compression algorithms have been developed, leading to faster load times and rendering.  Hooray for […]
The post Detect Supported Video Formats with JavaScript appeared first on David Walsh Blog.

Link: https://davidwalsh.name/detect-supported-video-formats-javascript

Flash, In Memoriam

Part I of a two-part reflection on digital multimedia, yesterday and today: Macromedia launched Flash 1.0 in 1996 with the grand vision of a single multimedia platform that would work flawlessly in any browser or any computer. In its day, Flash triggered a wave of creativity and inspired millions of people around the world to create digital media for the web. At one time, 75% of all video content on the web was delivered via the Flash player.

Link: https://hacks.mozilla.org/2017/08/flash-in-memoriam/

Single Page Application with AngularJS

Advertise here with BSAAngularJS is a dynamically developing framework for building dynamic web applications. As framework, it provides many functions out of the box. To start with, in our tutorial we will show you how to build a basic single page application. It will help you understand main concepts of working with the AngularJS, and next time you will be able to create more complex projects. Single page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page. Pros No page refresh When you are using SPA, you don’t need to refresh the whole page, just load the part of the page which needs to be changed. Angular allows you to pre-load and cache all your pages, so you don’t need extra requests to download them. Better user experience SPA feels like a native application: fast and responsive. Ability to work offline Even if user loses internet connection, SPA can still work because all the pages are already loaded. Cons More complex to build You need to write pretty much javascript, handle shared state between pages, manage permissions, etc. SEO To index your SPA app, search engine crawlers should be able to execute javascript. Only recently Google and Bing started indexing Ajax-based pages by executing JavaScript during crawling. You need to create static HTML snapshots specially for search engines. Initial load is slow SPA needs to download more resources when you open it. Client should have javascript enabled Of course, SPA requires javascript. But fortunately, almost everyone has javascript enabled. Angular Application Every angular application starts from creating a module. Module is a container for the different parts of your application: controllers, service, etc. var app = angular.module(‘myApp’, []); Lets define a simple controller: app.controller(‘HomeController’, function($scope) { $scope.message = ‘Hello from HomeController’; }); After we created module and controller, we need to use them in our HTML. First of all, we need to include angular script and app.js that we built. Then need to specify our module in ng-app attribute and controller in ng-controller attribute <html ng-app=”myApp"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> </head> <body ng-controller="HomeController"> <h1></h1> <script src="app.js"></script> </body> </html> If you done this correctly, you should see: Since we have our module and controller set up and we know that Angular is working properly, we will start working on adding single page application support. ngRoute Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities. We will use ngRoute module for that. The ngRoute module provides routing, deeplinking services and directives for angular apps. We need to include angular-route script after the main angular script. <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script> Then we need to specify that our module depends on ngRoute module to be able to use it. var app = angular.module(‘myApp’, [‘ngRoute’]); The next thing is to distinguish common HTML for every page. This HTML will be layout of the website. Then we need to specify the place where HTML of each page will be placed in our layout. There is a ng-view directive for that. ng-view is an Angular directive that will include the template of the current route (for example, /blog or /about) in the main layout file. In plain words, it takes the file we specified for current route and injects it into the layout in the place of ng-view directive. <!doctype html> <html ng-app="myApp"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script> </head> <body> <div ng-view></div> <script src="app.js"></script> </body> </html> When HTML is ready, we need to configure our routes. We will use $routeProvider service from the ngRoute module. For each route, we need to specify templateUrl and controller. If user will try to go to the route that does not exist, we can handle this by using otherwise function. In our case, we will redirect user to the “/” route: var app = angular.module(‘myApp’, [‘ngRoute’]); app.config(function($routeProvider) { $routeProvider .when(‘/’, { templateUrl : ‘pages/home.html’, controller : ‘HomeController’ }) .when(‘/blog’, { templateUrl : ‘pages/blog.html’, controller : ‘BlogController’ }) .when(‘/about’, { templateUrl : ‘pages/about.html’, controller : ‘AboutController’ }) .otherwise({redirectTo: ‘/’}); }); Then we need to build controllers for every route (we already specified their names in routeProvider): app.controller(‘HomeController’, function($scope) { $scope.message = ‘Hello from HomeController’; }); app.controller(‘BlogController’, function($scope) { $scope.message = ‘Hello from BlogController’; }); app.controller(‘AboutController’, function($scope) { $scope.message = ‘Hello from AboutController’; }); Our pages will be simple: home.html <h1>Home</h1> <h3></h3> blog.html <h1>Blog</h1> <h3></h3> about.html <h1>About</h1> <h3></h3> Note that we don’t need to use html, head, body tags in our page. This pages will always be used inside layout as partial HTML. Lets add links that will switch our pages. The final HTML looks like this: <!doctype html> <html ng-app="myApp"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script> </head> <body> <a href="#/">Home</a> <a href="#/blog">Blog</a> <a href="#/about">About</a> <div ng-view></div> <script src="app.js"></script> </body> </html> Browsers don’t support loading resources from disk using ajax, so you can use any HTTP server to serve static HTMLs. python -m SimpleHTTPServer If you don’t want to do this, you can include your partial HTMLs to index.html using script tag with type text/ng-template. When angular see this templates, it will load its content to the template cache and will not perform ajax request to get their content. <!doctype html> <html ng-app="myApp"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script> </head> <body> <script type="text/ng-template" id="pages/home.html"> <h1>Home</h1> <h3></h3> </script> <script type="text/ng-template" id="pages/blog.html"> <h1>Blog</h1> <h3></h3> </script> <script type="text/ng-template" id="pages/about.html"> <h1>About</h1> <h3></h3> </script> <a href="#/">Home</a> <a href="#/blog">Blog</a> <a href="#/about">About</a> <div ng-view></div> <script src="app.js"></script> </body> </html> Live Demo Conclusion In this tutorial, you learned how to build a single page application using Angular. Now you can go ahead and create more complex single page apps. This article was published with permission of Tests4Geeks – original.

Link: https://www.script-tutorials.com/single-page-application-with-angularjs/

Czuję się jak 10 lat temu, a to tylko interaktywna książka…

Jestem na urlopie, w założeniu bez komputera, ale mam dziś „dzień wolny” i nie mogę się powstrzymać, by siedzieć cicho, bo znowu, dzięki Bogu, wraz z niezwykle utalentowanymi ludźmi mam przyjemność wypuścić bardzo oryginalny i nowatorski projekt o kodowej nazwie interaktywna książka. Skala jego innowacyjności jest dla mnie podobna do Drawtera, dlatego czuję podobną, co 10 lat […]

Link: http://ferrante.pl/frontend/javascript/czuje-sie-jak-10-lat-temu-a-to-tylko-interaktywna-ksiazka/

The Beginner’s Guide to Web Storage API and Related Tools

Web storage is a software method and protocol used for storing data in a web browser. It is similar to HTTP session cookies, for storing name-value pairs on the client side, but with a greatly enhanced capacity. Web storage offers a storage capacity between 2MB and 10 MB depending on the browser. Check the detailed list of all the storage capacities for various browsers here.
In this article, I will give you a brief overview of web storage API and we will go through some of the libraries or tools related to web storage.

Link: https://dzone.com/articles/the-beginners-guide-to-web-storage-api-and-related?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev