« Prev 1 2 3 4 5 6 7 8 9 10 Next »

Progressive Web Apps 🚀 With Angular

Create Date: April 03, 2019 at 06:02 PM         Tag: ANGULAR         Author Name: Sun, Charles

Brian Love @ Google Developer Group (GDG) Denver

Let your Angular app take off into the world of progressive web apps (PWA). We'll learn the basics of building progressive web apps, using an app shell, working with service workers, and how Angular makes it easy to build performant progressive web applications that your users can install on their mobile devices. We'll also look at browser support and capabilities for app-like behaviors including notifications, background requests and sync, and more. If you have any interest in the future of apps and the web, then this meetup is for you! No prior knowledge of PWAs is required, but a little bit of knowledge of Angular would be helpful.

Brian Love is a software engineer and Google Developer Expert in Angular with a passion for learning, writing, speaking, teaching and mentoring. Brian has been building web applications for over 20 years and has long been a fanboy of JavaScript. When not in front of his MacBook Pro, Brian is in the Rocky Mountains skiing or hiking.

prgressive web apps use modern web apis along with traditional progressive enahncement strategy to create cross-platform web applications.

1. reialble: minimal time to intractive when on s low 3g

2. engaging: same suer experience you would expect form a "native" app

3. paper: escaping the tab: progressive, not hybrid  --lex Russell and Frances Beriman

how to accomplish it

1. app shell

2. service workers

3. web manifest

4. progressive

service workers enalbe:

lifecyle:

some things to note:

CacheStorage:

Cache:

Sorage mechanism for Request and Response object pairs

some theods include:

Register Service Worker:

const name = 'angular-pwa'
self.addEventListenner('fetch', funcgiton(e) {
  e.responseWith(...)
}

1. check if resource exists in cache

web manifest

manifes.json:

{
"short_name":
"name":
"icons":
"start_url":
"backgraound_color":
"dispaly":
"scope": "/",
"theme_color":
}

index.html:

<!doctype html>
<html lang="en">
<ead>
  <link rel="manifest" href="manifest.json">
</head>
<body>
<app-root></app-root>
<noscript>Please enable javascript to continue using this application.
</noscript>
</body>
</html>

angualr pwa:

add service worker module 

ng add @angular/pwa
ng build --prod
http-server -p 8080 -c-l dist/<project_name>

what is cached?

app installation modes:

angualr has two installation mods:

1. prefectch - nesoures resources are available offline

2. lazy -resources are cacheed when requested

app versions:

1. serve app from cache

2. check for ner version

3. fetch new version resources in the background

4. launch new version nwhne app is loaded next, or immediatedly install and relaod app programmatically

app update modes: two modes

SwUpdae

class SwUpdate {
available: Oberservable

Date Reqquests:

do not cache the verice worker

chache-Conrole: max-age = 0

workbox:

lighthouse:

PWA rocke: https://pwa.rocks/

angular docs: https://angular.io/guide/service-worker-intro

google develpers: https://developers.google.com/web/progressive-web-apps/

MDN web docs: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

New Comment

Limit words in a textarea

Create Date: April 03, 2019 at 11:00 AM         Tag: JAVASCRIPT         Author Name: Sun, Charles

Limit words in a textarea

I would probably use this:

var maxWords = 10;
function limitLengthInWords(field) {
    var value = field.value,
        wordCount = value.split(/\S+/).length - 1,
        re = new RegExp("^\\s*\\S+(?:\\s+\\S+){0,"+(maxWords-1)+"}");
    if (wordCount >= maxWords) {
        field.value = value.match(re);
    }
    document.getElementById('description_count').innerHTML = maxWords - wordCount;
}

This will preserve the whitespace at the begin and between the words.

New Comment

Create searchable select using javascript

Create Date: March 22, 2019 at 02:05 PM         Tag: JAVASCRIPT         Author Name: Sun, Charles

How search into options of select tag html without plugin

Yes you can, first, see it in action in this demo, if you like what you see, here's how to do it:

HTML

<input type="search" id="searchBox">
<select id="countries">
    <option value="arg">Argentina</option>
    <option value="usa">United States of America</option>
    <option value="som">Somalia</option>
</select>

It's pretty straight forward, a search input and a select with a few options.

JavaScript

searchBox = document.querySelector("#searchBox");
countries = document.querySelector("#countries");
var when = "keyup"; //You can change this to keydown, keypress or change

searchBox.addEventListener("keyup", function (e) {
    var text = e.target.value; 
    var options = countries.options; 
    for (var i = 0; i < options.length; i++) {
        var option = options[i]; 
        var optionText = option.text; 
        var lowerOptionText = optionText.toLowerCase();
        var lowerText = text.toLowerCase(); 
        var regex = new RegExp("^" + text, "i");
        var match = optionText.match(regex); 
        var contains = lowerOptionText.indexOf(lowerText) != -1;
        if (match || contains) {
            option.selected = true;
            return;
        }
        searchBox.selectedIndex = 0;
    }
});

Explanation

First, the variables:

Few, that was a lot, so, why do we need 2 tests? Because there are two possibilities for selection with searchBox, one is that when you start typing "Unit.." it should match "United States of America"(regexp), and the other one is that you just type "america" and it should also match "United States of America"(contains)

So, it checks for both tests, and if either one is true it will select that option. (It will also return so that it doesn't continue executing code)

By default, if no test is true, it will select the first element of the select.

How to create a Searchable Dropdown list in Asp.net and Jquery

Here I would like to code how to create the searchable Dropdown list using Asp.net and JQuery .I have used a Plugin to operate this functionality you can download plugin from this LINK  or else you can copy paste the code to your javascript file(.js)
 
<html>
<head>
    <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="Scripts/jquery.searchabledropdown-1.0.8.min.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(document).ready(function () {
   $("select").searchable({
      maxListSize: 200, // if list size are less than maxListSize, show them all
      maxMultiMatch: 300, // how many matching entries should be displayed
      exactMatch: false, // Exact matching on search
      wildcards: true, // Support for wildcard characters (*, ?)
      ignoreCase: true, // Ignore case sensitivity
      latency: 200, // how many millis to wait until starting search
      warnMultiMatch: 'top {0} matches ...',
      warnNoMatch: 'no matches ...',
      zIndex: 'auto'
          });
       });
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList ID="myselect" runat="server">
            <asp:ListItem>Select</asp:ListItem>
            <asp:ListItem>venki</asp:ListItem>
            <asp:ListItem>venu</asp:ListItem>
            <asp:ListItem>charles ven</asp:ListItem>
            <asp:ListItem>venuzila</asp:ListItem>
            <asp:ListItem>veron philender</asp:ListItem>
            <asp:ListItem>india</asp:ListItem>
            <asp:ListItem>indianven</asp:ListItem>
            <asp:ListItem>vesta</asp:ListItem>
        </asp:DropDownList>
    </form>
</body>
</html>
New Comment
« Prev 1 2 3 4 5 6 7 8 9 10 Next »