Quick tip: 10. console.log(); w IE

Niedawno w jednym z postów opisałem, jak można wykorzystać obiekt console do ułatwienia pracy z JavaScriptem. Wspomniałem tam, że obiekt ten nie jest standardowym obiektem JavaScript, a jest “dodawany” przez różne przeglądarki (lub dodatki do przeglądarek). W związku z tym może się zdarzyć, że nasza strona nie będzie działała na jakiejś przeglądarce. czytaj dalej

console.log(); – wykorzystanie konsoli w JavaScript

JavaScript jest nieodłącznym elementem praktycznie każdej strony www. Coraz częściej poziom skomplikowania JavaScriptu jest większy niż logiki po stronie serwera. Niestety js jest trochę niewdzięczny pod względem kontrolowania tego, co robi :)

Pisząc pierwsze skrypty wpadłem na pomysł, by strzelać alertami za każdym razem, kiedy chcę sprawdzić, co dzieje się w skrypcie. Życie szybko jednak pokazało, że jest to złe podejście – tak odkryłem metodę console.log();. czytaj dalej

Darmowe pluginy do VS2010

Dzisiaj chciałbym Wam przedstawić kilka ciekawych (darmowych) dodatków do Visual Studio 2010, z których od pewnego czasu korzystam.

1. devcolor

URL: http://visualstudiogallery.msdn.microsoft.com/en-us/7dbae8b3-5812-490e-913e-7bfe17f47f1d

Plugin bardzo przydatny podczas pracy z kolorami w aplikacji www. Tworzy on podkreślenie pokazujące kolor reprezentowany przez kod:

Dodatkowo możemy skorzystać z edytora kolorów:2. ItalicComments

URL: http://visualstudiogallery.msdn.microsoft.com/en-us/0b439a8a-e21a-4e26-b82b-054fbf0acab7

Sprawia, że komentarze w kodzie są wyświetlane kursywą. Bardzo poprawia to czytelność kodu:

3. Javascript parser

URL: http://visualstudiogallery.msdn.microsoft.com/en-us/288a2b0f-1357-47b4-8215-1134c36bdf30

Ostatnio mój faworyt, plasuje się zaraz za ReSharperem. Plugin ułatwia “poruszanie” się po plikach javascriptowych. Plugin dodaje nowe okno prezentujące strukturę pliku js. Dwukrotne kliknięcie na jakiejkolwiek pozycji powoduje przeniesienie kursora do powiązanego kodu:

Dodatkowo możemy przeszukiwać strukturę pliku za pomocą skrótu “Alt+j, Shift+j”:

4. Regex Editor

URL: http://visualstudiogallery.msdn.microsoft.com/en-us/55c24bf1-2636-4f94-831d-28db8505ce00

Jak sama nazwa wskazuje dodaje do VS2010 edytor wyrażeń regularnych. Edytor uruchamiamy klikając na wyrażeniu prawym przyciskiem myszki przy wciśniętym klawiszu Ctrl:

Edytor umożliwia edycję oraz testowanie wprowadzonego wyrażenia. Bardzo przydatny jest prosty intellisense:

5. Find Results Highlighter

URL: http://visualstudiogallery.msdn.microsoft.com/en-us/18fc5767-d3e6-4483-adbd-7396b0ea164e

Podświetla wyszukiwaną frazę w okienku wyszukiwania:

A Wy z jakich pluginów korzystacie?

Promuj

Kurczymy skrypty javascript – Microsoft Ajax Minifier

Jakiś czas temu Microsoft wydał bardzo przydatne narzędzie umożliwiające kompresję tworzonych skryptów JavaScript – MS Ajax Minifier.

Oczywiście nie jest to pierwsze/jedyne tego typu narzędzie – ale dużym plusem Ajax Minifiera jest możliwość “podpięcia” go do projektu jako task MSBuilda.

Narzędzie pobieramy ze strony http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=35893

Po zainstalowaniu nowy task MSBuilda wyląduje w katalogu:
C:Program FilesMSBuildMicrosoftMicrosoftAjax lub C:Program Files (x86)MSBuildMicrosoftMicrosoftAjax, jeżeli korzystamy z systemu 64-bitowego.

Aby dodać nowego taska do projektu edytujemy plik naszego projektu (csproj) – możemy to oczywiście zrobić w dowolnym edytorze, np. Notepad2.

I dodajemy kilka nowych linijek:

minifier1

1. Dodajemy referencje do taska MSBuild (MSBuildExtensionsPath wskazuje na C:Program FilesMSBuildMicrosoftMicrosoftAjax)

2. W sekcji Include podajemy, które pliki chcemy zminimalizować (w pokazanym przypadku wszystkie pliki js); w sekcji Exclude, które chcemy opuścić  – czyli pliki min.js (te, które już są zminimalizowane) oraz wszystkie pliki js z katalogu extLib – tutaj przykładowo przechowujemy różne biblioteki.

3. Podajemy, w jaki sposób zostanie wygenerowana nazwa nowego (zminimalizowanego) pliku – tutaj pliki z rozszerzeniem .js zostaną zamienione na .min.js.

Teraz wystarczy już tylko odpalić projekt i go przebildować, a w naszym projekcie pojawią nowe pliki:

minifier2

W wyniku minimalizacji z oryginalnego pliku zostaną usunięte wszystkie zbędne “białe znaki” oraz komentarze. Oczywiście plik oryginalny nie zostanie w żaden sposób zmieniony.

Przykładowy plik przed minimalizacją

minifier3

i po:

minifier4

Przydatności MS Ajax Minifiera (w połączeniu z łatwością jego użycia) nikomu chyba tłumaczyć nie trzeba. Minimalizując pliki aplikacji webowej zwiększamy szybkość  ich “ładowania”, dzięki czemu nasza aplikacja działa szybciej – i to wszystko automatycznie.

MS Ajax Minifiera można również uruchamiać z linii poleceń – jednak jako osoba ceniąca wygodę preferuję opisane rozwiązanie.

Miłej zabawy :)

ScriptManager: EnableCdn="true"

Parę dni temu Microsoft uruchomił usługę Microsoft Ajax CDN umożliwiającą pobieranie bibliotek javascript (związanych z Microsoft AJAX) z serwerów Microsoftu. Wykorzystanie Microsoft Ajax CDN pozwala zwiększyć “szybkość” działania aplikacji – używane biblioteki są cachowane i szybciej wysyłane do klienta.

Najbardziej mnie jednak cieszy fakt dodania property EnableCdn, umożliwiających wykorzystanie Microsoft Ajax CDN do ładowania skryptów, które do tej pory automatycznie były pobierane z bibliotek System.Web.dll oraz System.Web.Extensions.dll, czyli zamiast standardowego:

[sourcecode language=”xhtml”]
<script src="/ScriptResource.axd?d=gbruZflV-cd1gZnUdPOxDZcPjj4iD1Hix9fWmdpjOFQzRXbkQcZ2wc0n-Dt1NPH2RQJC2J0S8AHa_9qVldKC2T0CHE2p0Pg6O5j986Okf1M1&&t=ffffffff87dfba72" type="text/javascript"></script>
[/sourcecode]

uzyskamy

[sourcecode language=”xhtml”]
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjax.debug.js" type="text/javascript"></script>
[/sourcecode]

Very cool :)

Lista dostępnych bibliotek znajduje się na stronie:
http://www.asp.net/ajax/cdn/

Więcej informacji o Microsoft Ajax CDN na stronie ScottaGu:

http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx

Intellisense dla jQuery i innych bibliotek javascript

W Visual Studio 2008 mamy możliwość korzystania z intellisense dla różnych bibliotek javascript. Aby jednak korzystać z tego dobrodziejstwa musimy:

Po instalacji tych elementów możemy korzystać z instellisense dla różnych bibliotek javascript. Oczywiście biblioteki te musimy zadeklarować na naszej stronie.

[sourcecode language=”xhtml”]

<script src="js/mylibrary.js" type="text/javascript"></script>

[/sourcecode]

Poza standardowym “podpowiadaniem” funkcji/metod/itp. dla bibliotek js, path ten umożliwia korzystanie również z dokumentacji. Dokumentację tworzymy pisząc komentarze podobne do komentarzy z C#, np.:

[sourcecode language=”xhtml”]

function TestFunction(imie) {
/// Przykładowa funkcja javascript
/// Pierwszy parametr funkcji
/// Wartość zwracana
return "test";
}
[/sourcecode]

JavaScript intellisense

Funkcjonalność patha jest bardzo przemyślana i umożliwia korzystanie z komentarzy umieszczonych w innym pliku niż nasza biblioteka.  Jak wiadomo, pliki javascript powinny być jak najmniejsze, a tworzenie w nich dokumentacji na pewno w tym nie pomaga :)

Kolejność przeszukiwania plików w poszukiwaniu dokumentacji wygląda tak:

  • mylibrary-vsdocs.js
  • mylibrary-debug.js
  • mylibrary.js

Jeżeli nie zostanie znaleziony plik mylibrary-vsdocs.js szukany jest mylibrary-debug.js, itd. Oczywiście deklarujemy tylko mylibrary.js – plik z dokumentacją powinien jednak znajdować się w tym samym katalogu (jednak nie musi być nawet includowany w projekcie).

JavaScript intellisense

Jeżeli deklaracja pliku js znajduje się innym pliku (np. w MasterPage), wtedy w naszym pliku musimy podać referencję:

[sourcecode language=”xhtml”]

/// <reference path="js/mylibrary.js" />

[/sourcecode]

lub

[sourcecode language=”xhtml”]

/// <reference path="Default.aspx" />

[/sourcecode]

Wszystkich, którzy piszą w jQuery z pewnością ucieszy fakt, iż od jakiegoś czasu przygotowywane są pliki z dokumentacją do tej biblioteki.

Dokumentację znaleźć można na stronie jQuery.

JavaScript intellisense