Archiwum

Archive for Listopad 2013

Startup Sprint w tematyce Smart Things w Gdańsku

Listopad 16, 2013 Dodaj komentarz

W gdańsku znowu coś się dzieje! Tym razem spotkanie Startup Sprint Smart Things.

STARTUP SPRINT Smart Things to według organizatorów 3 dni niezwykłej przygody z biznesem. Utworzone podczas tego eventu zespoły, składające z pomysłodawców, programistów, designer’ów i marketingowców będą pracować nad rozwojem swoich pomysłów.

image

Uczestników wspierać będą m.in.: Jakub Pawelczak (IVONA Soft.), Bartosz Burek (Jakdojade.pl) czy Adam Tychmanowicz (Yanosik).

Kiedy? 22-24 listopada 2013

Gdzie? Gdańsk, Inkubator Starter

Za ile? Event bezpłatny

Więcej na: www.smartthings.startupsprint.org

Zapraszam gorąco!

Wielkimi krokami zbliża się Microsoft Innovation Summit w Lublinie–to już w środę!

Listopad 11, 2013 Dodaj komentarz

Ostatni raz już zapraszam wszystkich na swój wykład w środę, który odbędzie się w Lublinie podczas konferencji Microsoft Innovation Summit.

Logo

Będę miał przyjemność opowiedzieć o technologii ASP.NET / C# / Visual Studio / CSS i HTML podczas sesji “Zaprogramuj Internet – fascynująca droga po możliwościach”

Całe wydarzenie to doborowe towarzystwo znakomitych prelegentów:

image

Jednym z głównych sponsorów wydarzenia jest moja firma CloudExpert.pl

 

Strona wydarzenia: http://www.innovationsummit.pl/

IE 11 DEV-mały przybornik dla schludnego programisty

Listopad 6, 2013 Dodaj komentarz

Każdy programista wie, że jego kod świadczy o nim, jego wiedzy, doświadczeniu, zdeterminowaniu i otwartości na nowości. W poprzednim odcinku pokazywałem narzędzie, które analizuję stronę w momencie kiedy chcemy – jasno musimy oznaczyć początek-koniec, a efekt końcowy to dużo wykresów, literek I zestawień.

Czasem nie potrzebujemy aż tyle, po prostu potrzebujemy wiedzieć jak Nasza strona radzi sobie z obciążeniem. Do tego powstał miły, prosty, mały pasek narzędziowy, który możemy uruchomić skrótem klawiaturowym CTRL+SHIFT+U

image

Teraz popatrzmy na złośliwy kod:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<script>

function lekkiStres() {

for (var i = 0; i < 100000; i++) {
var liczymy = Math.sqrt(i) + Math.log(i);
}

}


</script>

<button onclick="lekkiStres()">Lekki stres</button>

</body>
</html>

Kod jest przygotowany specjalnie w ten sposób, by dużo liczyć przez chwilę. To co chcemy wykazać to to czy strona jest responsywna dla użytkownika – to oznacza czy renderuje 60 klatek na sekundę, czy jest dostępna dla “dotyku” i myszki.

Jak zaczniemy klikać nagle okaże sie, że ilość klatek leci w dół, aż do liczby 2, 3, a nawet 0!!! to jest niedopuszczalna sytuacja.

image

dodatkowo możemy przyglądać się tylko jednej z metryk, ale bardziej szczegółowo. W tym celu należy kliknać poszczególny kwadrat z statystyką.

Czas rysowania nowych elementów na stronie w sekundach

image

Ilość klatek, jakie są renderowane – na bieżąco – bardzo dobrze widać przeszkadzający skrypty w tle

image

Zużycie pamięci

image

Poziomzużycia procesora

image

Poniżej prezentuję ekstremalna sytuację, w której przeglądarka zgłasza… że skrypt JavaScript zamroził ją (zawiesił)… tego własnie chcemy się wystrzegać im prędzej się da – dlatego obserwujmy cyferki na wczesnym etapie prac programistycznych.

image

IE 11 DEV-badanie responsywności aplikacji

Listopad 6, 2013 Dodaj komentarz

Internet Explorer w wersji 11 doczekał się narzędzia do badania responsywności aplikacji z uwzględnieniem tego jaki kod jest wykonywany i na jakim wątku.

W tym celu stworzyłem trochę złośliwy kod, który liczy w pętli funkcje matematyczne:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<script>

function lekkiStres() {

for (var i = 0; i < 10000000; i++) {
var liczymy = Math.sqrt(i) + Math.log(i);
}

}


</script>

<button onclick="lekkiStres()">Lekki stres</button>

</body>
</html>

Po uruchomieniu aplikacji udajemy sie do narzędzi dla programistów I przechodzimy na zakładkę UI Responsiveness:

image

klikamy zieloną strzałkę, która spowoduje włączenie narzędzia analitycznego po czym klikamy kilka razy na przycisk Lekki stres… a na końcu wybieramy czerwonego STOP i czekamy na pokazanie się wykresów:

image

Na tak prostym przykładzie możemy zaobserwować kilka rzeczy:

  • wszystkie zdarzenia standardowo wykonują się na głównym wątku rendoredowania strony (UI Thread). Powoduje to bardzo niebezpieczną rzecz, gdy wykonujemy kod JavaScript, który pobiera zasoby procesora (patrzmy wykres wyżej) strona staje się mniej lub wogóle nie responsywna dla użytkownika – patrz ilość renderowanych FPS – u mnie spadła z wymaganych 60 do 3!!!
  • narzędzie doskonale pokazuje co angażowało aplikacje (konkretna funkcja + jaki moduł). Tutaj na rysunku widać, że głównie pracuje moduł Scripting czyli JavaScript.

IE 11 DEV-badanie przebiegu działania aplikacji–console.trace

Listopad 5, 2013 Dodaj komentarz

Dzisiaj przybliżymy sobie możliwość jaką daje nam console.trace – funkcja powstała po to byśmy mogli prześledzić ścieżkę wykonywania aplikacji bez śledzenia jej krok po kroku.

Poniżej przykładowy kawałek kodu:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <script>

            function direct() {
                last();
            }

            function indirect() {
                proxy();
            }

            function proxy() {
                last();
            }

            function last() {
                console.trace();
            }


        </script>

        <p id="pozycja"></p>

        <button onclick="direct()">Direct</button>
        <button onclick="indirect()">Indirect</button>
                
    </body>
</html>

 

W kodzie mamy 4 funkcje i dwa przyciski. Oba przyciski dochodzą do wykonania funkcji last(), w której jest dodatkowo wykonanie console.trace, które informuje Nas jak to się stało, że właśnie do tej funkcji dotarliśmy.

image

I tak widzimy, że:

  • klikając przycisk Direct idziemy najpierw przez zdarzenie onclick przycisku do funkcji Direct, a potem do Last.
  • klikajac Indirect idziemy do zdarzenia onlick, z niego przechodzimy do funkcji indirect, a z niej do funkcji proxy i dopiero do funkcji Last.

IE 11 DEV–emulator geolokalizacji

Listopad 3, 2013 Dodaj komentarz

Od dawna przeze mnie oczekiwana funkcja pojawiła się w narzędziach dla programistów IE 11 – czyli emulator geolokalizacji – możliwość zdefiniowania dowolnych koordynatów (wysokość, szerokość geograficzna) i sprawienie, że Nasz kod będzie myślał, że tam właśnie jest użytkownik.

Najpierw napiszemy fragment kodu, który wykorzystuje mechanizm do lokalizowania użytkownika na podstawie JavaScript i zbudowanych mechanizmów z HTML5:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <script>

            function success(arg) {
                var znacznik = document.getElementById('pozycja');
                znacznik.innerText = arg.coords.latitude + " " + arg.coords.longitude;
            }

            function error(err) {
                console.error(err);
            }

            function lokalizowanie() {

                if (navigator.geolocation) {
                    console.info('funkcja jest wspierana')
                    navigator.geolocation.getCurrentPosition(success, error);
                } else {
                    console.error('funkcja nie jest wspierana');
                }
            }


        </script>

        <p id="pozycja"></p>

        <button onclick="lokalizowanie()">Lokalizowanie</button>
                
    </body>
</html>

 

Tworzę przycisk podpięty do funkcji odpowiedzialnej za lokalizowanie oraz miejsce do prezentacji danych (znacznik p).

Funkcja do geolokalizacji prosi o policzenie jej I przekazuje sterowanie do jednej z dwóch funkcji – sukcesu albo błędu. W funkcji sukcesu widzimy, że dostajemy obiekt z lokalizacją, a dane ukryte są w podobiekcie coords.

Ważne jest by zapamiętać, że przeglądarka ma obowiązek zapytać użytkownika czy wyraża zgodę na zlokalizowanie siebie (okienko na dole z pytaniem)

image

W momencie wyrażenia zgody otrzymujemy lokalizacje w znaczniku p:

image

Teraz przejdźmy na zakładkę ostatnią w narzędziach dla programistów IE i wpiszmy swoje wymyślone dane dla wysokości i szerokości geograficznej:

image

Działa!

IE 11 DEV–liczniki czyli console.count

Listopad 2, 2013 Dodaj komentarz

W ramach śledzenia kodu Naszej aplikacji mamy możliwość wprowadzenia liczników do kodu I sprawdzenia ile razy wykonał się dany element. Liczniki są z góry zdefiniowanym elementem konsoli dlatego mamy do niego słowo kluczowe console.count – poniżej przykład kodu z jego użyciem:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<script>

function podbijajLicznik() {

console.count("Licznik");
}

function resetLicznika() {

console.countReset("Licznik");
}


</script>


<button onclick="podbijajLicznik()">Licz</button>
<button onclick="resetLicznika()">Resetuj</button>

</body>
</html>

W kodzie funkcja console.count dolicza za każdym razem +1 do licznika o zdefiniowanej nazwie. Funkcja console.countReset pozwala z dowolnego momentu kodu zresetować wartość licznika do 0.

 

image

Przetestujcie zarówno count jak i countReset – przydaje się w codziennym sprawdzaniu kodu.