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 :)

ReSharper 5.0 Nightly Build – In Action

Od jakiegoś czasu – a dokładnie od 19 listopada – udostępniono do testów nową wersję ReSharpera –  5.0. Jest to co prawda dopiero wersja beta, ale nie mogłem odmówić sobie przyjemności przetestowania :)

Pierwsze wersje trochę mi namieszały, ale reinstall Visual Studio pomógł. Ostatnio zainstalowana przeze mnie wersja 5.0.1537 póki co działa stabilnie.

Nowy Resharper oferuje wsparcie dla VS 2008 oraz VS 2010.

resharper_1

Poza wsparciem dla nowego VS, Resharper 5.0 oferuje sporo nowych przydatnych funkcji:

Wsparcie dla ASP.NET

  • nowe okienko “File structure” pokazujące budowę pliku aspx, ascx
  • generowanie placeholedrów i automatyczne powiązanie ich z MasterPagem
  • funkcja Go to file member pozwala szybko “powędrować” do innego powiązanego pliku, np.: MasterPage, kontrolki użytkownika
  • automatyczne generowanie referencji do kontrolek :)
  • nowe templaty do generowania contentu strony oraz szablony plików

resharper_6

Wsparcie dla ASP.NET MVC

  • lepsze (niż VS) wsparcie w intellisense
  • nawigacja pomiędzy powiązanymi obiektami
  • tworzenie nowych typów i metod

Możliwość debugowania źródeł .NET oraz bibliotek, dla których posiadamy pliki pdb.

Bardzo przydatne -np. na ToString() klikamy “Go to definition” i podglądamy, co się kryje w środku.

resharper_2

resharper_3

Bookmarki

Kolejna ciekawa nowość. Dodajemy bookmarka i później możemy bardzo szybko w dane miejsce wrócić. Domyślnie za pomocą skrótów możemy zarządzać 10 bookmarkami – ctrl+shift+numer (np. ctrl+shift+1) dodajemy bookmarka, ctrl+numer “wędrujemy” do bookmarka.

resharper_5

resharper_7

Oczywiście możemy dodawać więcej bookmarków (tzw. anonymous bookmark) i tylko w tej sytuacji, chcąc do niego “powędrować”, musimy go wybrać z listy (najpierw: ctrl+shift+’)

resharper_8

“Historia wartości”

Nowe okienko pokazujące, jak “wędrowała” wartość jakiejś zmiennej pomiędzy metodami.

resharper_4

Na powyższym screenie widać, że nasza zmienna testValue została przekazana jako parametr metody SampleMethod. Wartość zmiennej przekazanej do tej metody została przekazana z GetSampleValue, a w tej metodzie przypisaliśmy jej wartość 10 – czysto i przejrzyście.

To na razie tyle z nowych funkcjonalności, które przetestowałem – kolejna wersja i kolejny raz WIELKIE WOW :). O nowych ciekawych doświadczeniach postaram się informować na bieżąco.

Więcej o nowej wersji ReSharpera na stronie: http://blogs.jetbrains.com/dotnet/2009/10/resharper-50-overview/.

Nowe wydania R# 5.0 można pobrać ze strony: http://www.jetbrains.net/confluence/display/ReSharper/ReSharper+5.0+Nightly+Builds

"Naszkicuj" interfejs – Balsamiq Mockups

Dzisiaj chciałbym przedstawić aplikację, która ostatnio podbiła moje serce – Balsamiq Mockups.

Balsamiq Mockups jest aplikacją, która umożliwia prototypownie interfejsu użytkownika – zarówno aplikacji webowych, desktopowych, jak i iPhone. Aplikacja zawiera bogatą listę kontrolek, z których możemy utworzyć  prototyp – to tak jakbyśmy ołówkiem szkicowali interfejs.

Aplikacja jest bardzo wygodna w użyciu. Świetnie sprawdza się w sytuacji, gdy chcemy z klientem (lub teamem) ustalić zarys aplikacji – tutaj damy menu, tutaj jakiś panel/gird. Szybko uzyskujemy wstępny obraz naszego projektu, co bardzo ułatwia pracę nad nim.

A oto przykładowe prototypy wykonane za pomocą tej aplikacji:

wiki

mytube

bahoomaps

1 licencja kosztuje 79$. Przy zakupie min. 5 licencji uzyskujemy rabat zależny od ilości zakupionych licencji. Istnieje też możliwość uzyskania darmowej licencji – więcej tutaj: http://www.balsamiq.com/products/mockups/desktop.

Dodatkowo możemy korzystać z edytora online – takiej wersji demo. Wersja ta umożliwia eksport/import stworzonych mockupów do xml’a, dzięki czemu możemy pracować nad kilkoma projektami i później wprowadzać w nich poprawki. Na koniec prototyp możemy wyeksportować do pliku png lub pdf. Oczywiście wersja desktop jest wygodniejsza w użyciu i posiada trochę więcej opcji.

Na koniec zachęcam do obejrzenia filmiku pokazującego możliwości Balsamiq Mockups:

Mi się bardzo podoba – a Wy o co o tym sądzicie?

Przenosiny zakończone

Wczoraj zakończyłem przenosiny bloga na nowy hosting – tym razem wybór padł na firmę webio.pl

webio_logo

Do tej pory korzystałem z yeahhost.com – oferta korzystna finansowo, usługa stabilna, jednak nie byłem zadowolony z szybkości działa stron.

Od nowej usługi oczekuję polepszenia tego elementu – pierwsze wrażenia są wyjątkowo pozytywne.

Dodatkowo Webio zapewnia dostęp do najnowszych technologii Microsoft:

  • IIS 7
  • MS SQL2008
  • ASP.NET 3.5
  • ASP.NET MVC
  • ASP.NET MVC 2 Preview 2 !!
  • oraz możliwość synchronizacji zadań, kontaktów, poczty elektronicznej i notatek za pomocą protokołu SyncML – co jest szczególnie przydatne jeżeli korzystamy w urządzeń mobilnych

Jest to bardzo duży plus dla mnie jako programisty!

Attach to Process… (ASP.NET) – szybciej

Pracując nad jakąś aplikacją czasami musimy ją zdebugować. Sposobów na to jest wiele – np. podpinając się pod odpowiedni proces. U mnie standardowo wygląda to tak: menu Debug->Attach to Process…->w3wp.exe.

Wykonuję tę operację dość często.

Jak wiele czynności w pracy z komputerem można tę operację zautomatyzować, tworząc np. makro.

W Visual Studio wybieramy: Tools->Macros->Macros IDE

attache_to_process_1

Dodajemy nowy moduł, nadajemy mu nazwę, np. RecordingModule:

attache_to_process_2

i wpisujemy makro:

[sourcecode language=”vbnet”]
Imports System
Imports EnvDTE
Imports EnvDTE80
Imports EnvDTE90
Imports System.Diagnostics

Public Module RecordingModule
Sub AttachToAspNET()
Try
Dim dbg2 As EnvDTE80.Debugger2 = DTE.Debugger
Dim trans As EnvDTE80.Transport = dbg2.Transports.Item("Default")
Dim compName As String = Environ$("computername")
Dim proc2 As EnvDTE80.Process2 = dbg2.GetProcesses(trans, compName).Item("WebDev.WebServer.EXE")
proc2.Attach2()
Catch ex As System.Exception
MsgBox(ex.Message)
End Try
End Sub

End Module
[/sourcecode]

Oczywiście w ten sposób możemy podpinać się pod dowolny proces. W przypadku ASP.NET, w zależności od tego, z jakiego serwera korzystamy będzie to:

  • WebDev.WebServer.exe – środowisko uruchamiane przez VS
  • w3wp.exe – IIS 6.0
  • aspnet_wp.exe – IIS 5.0, IIS 5.1

Aby uruchamiać makro, najprościej jest podpiąć je pod skrót klawiaturowy.

Z menu wybieramy: Tools->Options->Environment->Keyboard i wybieramy nasze makro:

attache_to_process_3

Po przypisaniu skrótu (u mnie ALT+CRTL+K) klikamy Assign, zamykamy okno opcji  i cieszymy się nowym makrem :)