GoldenLine
Zaloguj się
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

W zaleznosci od wielu rzeczy kod JS ma sie wykonywac na stronie lub nie. Dodam, ze ten kod laduje reklame, wiec jest BARDZO wazne, zeby sie w konkretnych sytuacjach nie wykonal. Jego wykonanie jest determinowane przez szerokosc okna przegladarki.

W zaleznosci od szerokosci okna laduje rozne zestawy css. Dla malych okien (urzadzenia mobilne) css ma klase abc, ktora powoduje ze kontener z ta klasa sie nie wyswietla (display: none;) kontenery z reklama maja te klase. W swoim kodzie JS sprawdzam czy display jest rozne od none i wtedy wykonuje kod.

Na desktopowych przegladarkach gra i buczy, ale na mobilnych nie. Strona laduje sie z poprawnym layoutem i bez reklam, jednak po zaladowaniu ulega ponownemu zrenderowaniu (bez przeladowania) juz z uzyciem css przeznaczonych dla wiekszych ekranow i ma zaladowane reklamy... Najczesciej sie to dzieje od razu po zaladowaniu, czasami po jakiejs akcji usera na stronie a czasami w ogole.

Kod funkcji i warunek jakiego uzywam:



function getStyle(el,styleProp)

{

  var x = document.getElementById(el);

  if (x.currentStyle)

    var y = x.currentStyle[styleProp];

  else if (window.getComputedStyle)

    var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);

  return y;

}



if (getStyle(idKontenera,'display') !== 'none') {

// tutaj kod reklamy

}
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Problem solved. Otoz dla przegladarek mobilnych sprawdzanie styli nalezy robic po zaladowaniu strony (onload). Gra i buczy :)
Link do wypowiedziLink

konto usunięte

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Czy nie warto rozważyć w ty m miejscy zamiast JS wykorzystanie CSS i atrybutów media query:
@media screen and (min-width: 480px){
/* some css */
}/*/mediaquery*/.

W ten sposób kod się to bardzo czytelny i ułatwi to programowanie i analizę kodu.

---------------------
Plus opcjonalnie JS dla starszych przeglądarek nie wspierających CSS3:
http://code.google.com/p/css3-mediaqueries-js/#referre...Błażej K. edytował(a) ten post dnia 14.01.13 o godzinie 18:49
Link do wypowiedziLink
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Maja Miarecka:
Problem solved. Otoz dla przegladarek mobilnych sprawdzanie styli nalezy robic po zaladowaniu strony (onload). Gra i buczy :)

To w jaki sposob podeszłaś do tematu jest kompletnie nieprofesjonalne - jestem pewnien na 100% że to nie będzie zawsze poprawnie dzialalo.

podpowiedz: Jesli juz uzywasz javascript to po co w ogóle bawisz sie w czytanie czy jest jakis styl przypisany czy nie? Przeciez javascriptem mozesz bez problemu sprawdzic z jaka przegladarka masz do czynienia i jakie sa dostepne wymiary "powierzchni roboczej" przegladarki
Link do wypowiedziLink
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Błażej K.:
Czy nie warto rozważyć w ty m miejscy zamiast JS wykorzystanie CSS i atrybutów media query:

nie (brak kompatybilnosci) i po co (mozna javascriptem)

Naprawianie trikami "trików" jst kompletnie bez sensu.
Link do wypowiedziLink

konto usunięte

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

http://caniuse.com/css-mediaqueries -> 84% wsparcia dla wszystkich przeglądarek

Frameworki HTML takie jakie Less czy Bootstrap korzystają z Media Queries i są w pełni profesjonalne.
Polecam profesjonalne zapoznanie się z CSS'em :)
Mirosław Ratman:
Błażej K.:
Czy nie warto rozważyć w ty m miejscy zamiast JS wykorzystanie CSS i atrybutów media query:

nie (brak kompatybilnosci) i po co (mozna javascriptem)

Naprawianie trikami "trików" jst kompletnie bez sensu.Błażej K. edytował(a) ten post dnia 15.01.13 o godzinie 01:20
Link do wypowiedziLink
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Błażej K.:
Polecam profesjonalne zapoznanie się z CSS'em :)

mam przyjemnosc bawic sie nim juz od dawna ;)
http://caniuse.com/css-mediaqueries -> 84% wsparcia dla wszystkich przeglądarek

a co z pozostałymi 16% ?
Frameworki HTML takie jakie Less czy Bootstrap korzystają z Media Queries i są w pełni profesjonalne.

Po ki grzyba brac caly framework aby wyswietlic jedna czy dwie reklamy CSS'em ??? jak mozna to napisac w "2 linijkach" w JSMirosław Ratman edytował(a) ten post dnia 15.01.13 o godzinie 09:36
Link do wypowiedziLink

konto usunięte

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Proszę jeszcze raz zastanowić się nad tym co napisałem i ruszyć do przodu, a nie rzucać jadem, ponieważ nie zrozumiał Pan zupełnie informacji, które przekazałem . Kończę dyskusję. Pozdrawiam.
Mirosław Ratman:
Błażej K.:
Polecam profesjonalne zapoznanie się z CSS'em :)

mam przyjemnosc bawic sie nim juz od dawna ;)
http://caniuse.com/css-mediaqueries -> 84% wsparcia dla wszystkich przeglądarek

a co z pozostałymi 16% ?
Frameworki HTML takie jakie Less czy Bootstrap korzystają z Media Queries i są w pełni profesjonalne.

Po ki grzyba brac caly framework aby wyswietlic jedna czy dwie reklamy CSS'em ??? jak mozna to napisac w "2 linijkach" w JS
Link do wypowiedziLink
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Generalnie nie lubie bawić się w polemikę bo to nie ma sensu - ilu programistów tyle sposobów programowania.

Jeśli nawet CSS z media queries jest obsługiwany przez większość przeglądarek to nadal nie je jest suportowany przez większość IE. W przypadku niektórych stron (np gdzie ruch wacha się w okolicy miliarda odsłon miesiecznie i gdzie 50% userów to ludzie z IE) bagatelizowanie tych 16% uzytkowników jest potencjalnym "marnotrastwem" pieniędzy - bo oni np tych reklam nie zobaczą.

Wspomniane frameworki maja funkcje które wspomagają poprawne wyswietlanie informacji również w starszych przeglądarkach ale korzystanie z nich w opisanej sytuacji mija się kompletnie z celem.

Po prostu nie ma sensu ładować kilkadziesiąt lub kilkaset KB skryptów jak mozna to rozwiązać w kilku liniach javascriptu.

PozdrawiamMirosław Ratman edytował(a) ten post dnia 15.01.13 o godzinie 16:49
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

O mamo... ja tu proste pytanie zadalam, a sie taka dyskusja wywiazala. Uzywam jednego z polecanych sposobow na wykrywanie szerokosci okna - media queries. W zaleznosci od szerokosci okna ladowane sa rozne style, decydujace o tym, jak ma sie wyswietlac strona. Poniewaz style sa ladowane przez media queries (dla IE dodatkowo laduje skrypt js, ktory umozliwia zrozumienie i HTML5 i media queries) to nie widze sensu w wykrywaniu szerokosci okna przegladarki za pomoca JS. Dlaczego? Glownie dlatego, ze oba sposoby czasami sie rozna i media queries laduja mi style dla smartphone a JS wykonuje pliki dla tabletu.

Sposob banalnie prosty - w pewnych konkretnych sytuacjach pewne kontenery sa niewidoczne. Zamiast sprawdzac szerokosc okna sprawdzam, czy one istnieja. I mam kompatybilny js i css.

Niestety nie mam mozliwosc uzycia specjalnych i zaawansowanych frameworkow. Pracuje na istniejacym kodzie, napisanym fatalnie i ekstremalnie trudnym w utrzymaniu. To co robie musi byc proste i funkcjonalne.
Link do wypowiedziLink
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Maja Miarecka:
O mamo... ja tu proste pytanie zadalam, a sie taka dyskusja wywiazala. Uzywam jednego z polecanych sposobow na wykrywanie szerokosci okna - media queries. W zaleznosci od szerokosci okna ladowane sa rozne style, decydujace o tym, jak ma sie wyswietlac strona. Poniewaz style sa ladowane przez media queries (dla IE dodatkowo laduje skrypt js, ktory umozliwia zrozumienie i HTML5 i media queries) to nie widze sensu w wykrywaniu szerokosci okna przegladarki za pomoca JS. Dlaczego? Glownie dlatego, ze oba sposoby czasami sie rozna i media queries laduja mi style dla smartphone a JS wykonuje pliki dla tabletu.

Moim zdaniem bledne myslenie, dlaczego:
- z media queries nie jestes w stanie na 100% zindentyfikowac z "czym" masz do czynienia (chba ze o czyms nie wiem ;) )
- twoje reklamy (czy cokolwiek innego) istnieja w DOM ale sa ukryte
- niepotrzebnie generowane obiekty w dom
- niepotrzebnie zuzyty traffic
- brak 100% pewnosci ze bedzie dzialac
Sposob banalnie prosty - w pewnych konkretnych sytuacjach pewne kontenery sa niewidoczne. Zamiast sprawdzac szerokosc okna sprawdzam, czy one istnieja. I mam kompatybilny js i css.

kompatybilny js i css - co to znaczy ?
Niestety nie mam mozliwosc uzycia specjalnych i zaawansowanych frameworkow. Pracuje na istniejacym kodzie, napisanym fatalnie i ekstremalnie trudnym w utrzymaniu. To co robie musi byc proste i funkcjonalne.

czyli zrobienie kolejnego mixa zeby cos "dzialalo" - kod staje sie jeszcze bardziej skomplikowany do edycji/zmian/utrzymania. Jak pisalem wyzej - naprawianie trikami trikow to najgorsze co moze byc. Potem jeden kod zaczyna sie gryzc z drugim i w koncu przegladarka zaczyna sie wieszac i potem jest nastepny post - dlaczego mi to nie dziala - pomozcie ;).

Czasami prosciej jest napisac cos od nowa i dobrze niz poprawiac poprawki.
Link do wypowiedziLink

konto usunięte

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Maja Miarecka:
Niestety nie mam mozliwosc uzycia specjalnych i zaawansowanych frameworkow. Pracuje na istniejacym kodzie, napisanym fatalnie i ekstremalnie trudnym w utrzymaniu. To co robie musi byc proste i funkcjonalne.

1)
biblioteka: http://wicky.nillia.ms/enquire.js/
tutorial: http://css-tricks.com/enquire-js-media-query-callbacks...

2)
https://gist.github.com/08602e7d2ee448be834c
przykład:
http://www.sitepoint.com/forums/showthread.php?742717-...

3)
inne rozwiązanie: http://adapt.960.gs/

4) artykuł:
http://www.sitepoint.com/javascript-media-queries/

To pierwsze powinno rozwiązać problem, po zminimalizowaniu ma 2.5kB, to chyba nie jest dużo?
Rozwiązanie nr 2 jest tak proste że aż trudno uwierzyć że działa. Pewnie nie zawsze.Piotr L. edytował(a) ten post dnia 20.01.13 o godzinie 17:07
Link do wypowiedziLink

konto usunięte

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Mirosław Ratman:
Jeśli nawet CSS z media queries jest obsługiwany przez większość przeglądarek to nadal nie je jest suportowany przez większość IE. W przypadku niektórych stron (np gdzie ruch wacha się w okolicy miliarda odsłon miesiecznie i gdzie 50% userów to ludzie z IE) bagatelizowanie tych 16% uzytkowników jest potencjalnym "marnotrastwem" pieniędzy - bo oni np tych reklam nie zobaczą.
<!--[if lte IE 8]><script src="scripts/polyfill.js"></script><![endif]-->
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross...
Po prostu nie ma sensu ładować kilkadziesiąt lub kilkaset KB skryptów jak mozna to rozwiązać w kilku liniach javascriptu.
1) wygląd strony powinien być definiowany w CSS
2) nie obsługujesz użytkowników, którzy mają przeglądarkę wspierającą Media Queries, ale bez JavaScript

poza tym zasadnicza sprawa - nie powinniśmy ograniczać nowoczesnych przeglądarek tylko po to, by zapewnić wsparcie starym przeglądarkom. Skoro coś jest stare i nie wspiera danej technologii to musi ponieść tego konsekwencje przez wczytanie nowej biblioteki dodającej obsługę owej funkcjonalności.
Link do wypowiedziLink
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Kamil Brenk:

<!--[if lte IE 8]><script
> src="scripts/polyfill.js"></script><![endif]-->
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross...

dobra, jeszcze raz: PO CO??? jak to można napisać w 2 linijkach w javascript !!!
1) wygląd strony powinien być definiowany w CSS

cytat postu autorki "W zaleznosci od wielu rzeczy kod JS ma sie wykonywac na stronie lub nie. Dodam, ze ten kod laduje reklame, wiec jest BARDZO wazne, zeby sie w konkretnych sytuacjach nie wykonal. "

odp; dlatego wiele osób pytanych na rozmowach o prace o proste rzeczy nie jest w stanie nawet zindentyfikowac poprawnie problemu - to tak troche abstrahując od tematu
2) nie obsługujesz użytkowników, którzy mają przeglądarkę wspierającą Media Queries, ale bez JavaScript

- patrz wyżej ;)

poza tym zasadnicza sprawa - nie powinniśmy ograniczać nowoczesnych przeglądarek tylko po to, by zapewnić wsparcie starym przeglądarkom. Skoro coś jest stare i nie wspiera danej technologii to musi ponieść tego konsekwencje przez wczytanie nowej biblioteki dodającej obsługę owej funkcjonalności.

nie zgodzę się ale nie będę się też powtarzal.

Pozdrawiam
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Mirosław Ratman:
Moim zdaniem bledne myslenie, dlaczego:
- z media queries nie jestes w stanie na 100% zindentyfikowac z "czym" masz do czynienia (chba ze o czyms nie wiem ;) )

Ja nie chce wiedziec z czym. Interesuje mnie szerokosc ekranu. Tylko i wylacznie.
- twoje reklamy (czy cokolwiek innego) istnieja w DOM ale sa ukryte

Wlasnie nie. Blokujac wywolanie JS mam tylko div z odpowiednim id. Style da tego id definiuja display:none, co blokuje pokazanie sie diva oraz wykonanie skojarzonego z nim JS. Tak wiec do HTML wczytywany jest i owszemjeden ponadprogramowy div i nic wiecej.
- niepotrzebnie generowane obiekty w dom

No coz na tu i teraz lepszego rozwiazania nie bedzie. Moj szef uznal, ze to maly koszt.
- niepotrzebnie zuzyty traffic

No prosze Cie... na jeden pusty div?
- brak 100% pewnosci ze bedzie dzialac

Dziala (przetestowane gdzie popadnie, zarowno na emulatorach jak i realnych urzadzeniach.
kompatybilny js i css - co to znaczy ?

To, ze odczytanie szerokosci ekranu przez media queries i js czasami sie rozni. nie o duzo, ale jednak i juz mialam taka sytuacje ze css sie wczytywal dla nizszej rozdzielczosci a js dla wyzszej.
czyli zrobienie kolejnego mixa zeby cos "dzialalo" - kod staje sie jeszcze bardziej skomplikowany do edycji/zmian/utrzymania. Jak pisalem wyzej - naprawianie trikami trikow to najgorsze co moze byc. Potem jeden kod zaczyna sie gryzc z drugim i w koncu przegladarka zaczyna sie wieszac i potem jest nastepny post - dlaczego mi to nie dziala - pomozcie ;).

Nie, kod nie staje sie bardziej skomplikowany. Zamiast warunku sprawdzajacego szerokosc ekranu mam warunek sprawdzajacy czy dany element jest wyswietlony. Poziom komplikacji identyczny, bez potrzeby zasysania biblioteki lub pisania funkcjonalnosci odpowiadajacej za czytanie szerokosci ekranu w JS.
Czasami prosciej jest napisac cos od nowa i dobrze niz poprawiac poprawki.

No coz, ale ja mam szefa, ktory na tu i teraz nie ma srodkow na przepisanie calej aplikacji.
Link do wypowiedziLink
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Maja Miarecka:
Wlasnie nie. Blokujac wywolanie JS mam tylko div z odpowiednim id. Style da tego id definiuja display:none, co blokuje pokazanie sie diva oraz wykonanie skojarzonego z nim JS. Tak wiec do HTML wczytywany jest i owszemjeden ponadprogramowy div i nic wiecej.

Albo czegoś tu nie rozumiem albo to robisz tak:

- ustawiasz z uzyciem media queries np display:none przy szerokosci okna > 600px (dla starszych przegladarek ladujesz dodatkowe "bajery" aby dzialalo w media queries !!!)
- potem javascriptem sprawdzasz czy to cos nam display = none
- i ladujesz lub nie javascript

Tak ? Jesli tak to nie prosciej jest zrobic np:

if (screen.width > 600) { zaladuj reklamy }


?????
Jedna linijka i po krzyku.
Link do wypowiedziLink

konto usunięte

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Podrzucę trochę do ognia i pozwolę sobie css'em. Przeglądarki mobilne to są właśnie te "nowoczesne" i obsługują już aktualne implementacje CSS i JS. Ja zaproponuję jednak ultimatum, które jest kompatybilne z każdą przeglądarką, a to zadowoli wszystkich.
<![if gt IE 8]>

<link media="media="only screen and (max-device-width: 600px)" href="mobile.css" type="text/css" rel="stylesheet" />

<![endif]>

Pozdrawiam.
Mirosław Ratman:
Maja Miarecka:
Wlasnie nie. Blokujac wywolanie JS mam tylko div z odpowiednim id. Style da tego id definiuja display:none, co blokuje pokazanie sie diva oraz wykonanie skojarzonego z nim JS. Tak wiec do HTML wczytywany jest i owszemjeden ponadprogramowy div i nic wiecej.

Albo czegoś tu nie rozumiem albo to robisz tak:

- ustawiasz z uzyciem media queries np display:none przy szerokosci okna > 600px (dla starszych przegladarek ladujesz dodatkowe "bajery" aby dzialalo w media queries !!!)
- potem javascriptem sprawdzasz czy to cos nam display = none
- i ladujesz lub nie javascript

Tak ? Jesli tak to nie prosciej jest zrobic np:

if (screen.width > 600) { zaladuj reklamy }


?????
Jedna linijka i po krzyku.Błażej K. edytował(a) ten post dnia 28.01.13 o godzinie 03:43
Link do wypowiedziLink
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Błażej K.:
Podrzucę trochę do ognia i pozwolę sobie css'em. Przeglądarki mobilne to są właśnie te "nowoczesne" i obsługują już aktualne implementacje CSS i JS. Ja zaproponuję jednak ultimatum, które jest kompatybilne z każdą przeglądarką, a to zadowoli wszystkich.

Przeczytaj o co chodziło autorce postu a zrozumiesz dlaczego pisze ze uzywanie media queries jest kompletnie bez sensu !!!
Link do wypowiedziLink
Mirosław Ratman

Mirosław Ratman Manager IT,
Architekt systemów
@Avast, Founder
@aSyncro ...

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Maja Miarecka:
Zamiast sprawdzac szerokosc okna sprawdzam, czy one istnieja. I mam kompatybilny js i css.
Niestety nie mam mozliwosc uzycia specjalnych i zaawansowanych frameworkow. Pracuje na istniejacym kodzie, napisanym fatalnie i ekstremalnie trudnym w utrzymaniu. To co robie musi byc proste i funkcjonalne.

Warto obejrzeć ;) - http://www.goldenline.pl/forum/3166730/ho-to-destroy-t...
Link do wypowiedziLink
Konrad Kluźniak

Konrad Kluźniak Webdeveloper /
Designer

Temat: Jak najlepiej zablokowac wykonanie kodu na stronie

Ciekawe jest to,że Less jest frameworkiem...Tak przy okazji....
Wg. mnie, media query powinno się wspomóc biblioteką php do detekcji mobilnych. Wtedy jest lepiej.
i
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

jak zapobiec przeskakiwaniu...




Wyślij zaproszenie do
Anuluj