Jak przenieść pojedynczą literę na końcu linij do nowego wiersza? (HTML, CSS a może JS?)

Oczywiście robimy to za pomocą specjalnego znaku spacji, który łączy literę z poprzedzającym go wyrazem. CSS niestety nic nam tu raczej nie pomoże. No dobrze wiemy już że musimy wpisać kod HTML (tzw. non-braking HTML space name code).

non-braking space - HTML

No ok ale co teraz? Mamy edytować cały tekst na naszej stronie? To mogło by być bardzo czasochłonne a w przypadku większych stron wręcz niemożliwe. Dlatego będąc leniwym musimy spróbować zrobić to automatycznie używając do tego oczywiście naszego kochanego JavaScript.

function lastSingleLetterToNewLine(el){
  let result;
  el.forEach((element, i)=>{
     
     if(!element.innerHTML.match(/[{}]|<script|^\n$/gi)){
      result = element.innerHTML.replace(/ (.) /gi, " "+'\$1'+"&nbsp ;");
     }
     element.innerHTML = result;
     console.log(result);
  });
}

let el = document.querySelectorAll("h1, h2, h3, h4, h5, p, span, .text");
lastSingleLetterToNewLine(el);

Nie ma tu co za wiele wyjaśniać. Kod sprawdza czy przypadkiem nie zaciągnął jakiegoś skryptu a następnie wyszukuje wszystkich pojedynczych liter otoczonymi spacjami po obu stronach i tą przednią zastępuje naszym specjalnym kodem HTML z niełamiącą się spacją. Jeśli macie jakieś przemyślenia jak można taki kod usprawnić to zostawcie sugestie w komentarzu.

Demo powyższego skryptu możecie przetestować na CodePen https://codepen.io/DevWL/pen/VwZpzNp

Dzięki!

Jak prosto debugować horyzontalny scroll?

Czy podczas tworzenia projektu od podstaw napotkaliście na tzw horyzontalny scroll i nie do końca wiedzieliście gdzie szukać jego przyczyny? Jeśli korzystasz z przeglądarki chrome możecie w prosty sposób wyszukać element, który jest jego sprawcą.

Wystarczy, że wkleisz do konsoli poniższy skrypt a wszystkie elementy na stronie zostaną otoczone czerwoną linią. Dzięki temu łatwo wychwycisz element, który wylatuje poza standardową szerokość twojej strony internetowej.

(function (debug) {
var w = debug.documentElement.offsetWidth,
t = debug.createTreeWalker(debug.body, NodeFilter.SHOW_ELEMENT),
b;
while (t.nextNode()) {
b = t.currentNode.getBoundingClientRect();
if (b.right > w || b.left < 0) {
t.currentNode.style.setProperty(‘outline’, ‘1px dotted red’, ‘important’);
console.log(t.currentNode);
}
};
}(document));

Google Ads – Jak naliczać żeby nie stracić

Jak policzyć klienta za kampanię w Google Ads żeby nie stracić

Jak naliczać klienta za usługę w Google Ads

Model 1 – Rejestracja płatności na własną firmę

Zakładam, że jesteś płatnikiem VAT i posiadasz VAT UE.
Może tak. Jeśli ty fakturujesz klienta to doliczasz mu podatek VAT na budżet. Dlaczego? Bo ty podatek zapłacisz ale go nie odliczysz bo jest to import usług z odwrotnym obciążeniem.
Czyli klient chce wydać 400 zł na kampanię to ty wystawiasz mu fakturę 492 zł i jesteś na 0. Cena budowy i obsługi budżetu to średnio od 20% przy mikro kampaniach + opłata za konfigurację kampanii czyli +100 zł.

Z 492 zł brutto trzeba jeszcze odliczyć wynagrodzenie tj. 20% licząc od wysokości budżetu netto tj od 400 zł (co równa się 80 zł za obsługę budżetu). Dla wyższych kwot budżetu koszt obsługi odpowiednio spada nawet do 6-8% przy dużych kampaniach 3000 tyś + / miesiąc.

Klient paci 672 zł przy zakładaniu kampanii. Jako firma zarabiasz 180 zł brutto. (potem odliczasz VAT i dochodowy i zostaje ci 146 zł – dochodowy 18%) Tj. zarobiłeś 112 zł do ręki.

Uwaga! Jeśli ty nie jesteś podatnikiem VAT UE to musisz od wysokości budżetu odprowadzić podatek VAT czyli od budżetu wpłaconego na reklamę w Google płacisz do skarbówki 23%. Od kwoty 400 zł płacisz do skarbówki 92 zł VATu. Co prawda masz VAT klienta wejdzie jeden w drugi. Gorzej jak nie policzyłeś klienta o VAT to tedy dołożyłeś się do budżetu klienta i pomniejszysz swoje wynagrodzenie.

W takim modelu musisz być podatnikiem VAT i mieć zarejestrowany w urzędzie skarbowym VAT UE.
Taki model jest komicznością jeśli obsługujesz np nowe firmy dofinansowane z PUP.

Model 2 – Rejestracje płatności na klienta.

Kim ty jesteś nie ma żadnego znaczenia. Klient jest podatnikiem VAT i ma zarejestrowany VAT UE.
Rejestrujesz konto płatności na klienta a on sam pobiera i drukuje FV. Klient nie płaci podatku VAT od budżetu jeśli jest podatnikiem VAT i ma zarejestrowany VAT UE.
Jego budżet jest równy środkom wpłacanym na konto AdWords. Co było spowodowane (pośrednikiem krajowym w transakcji). Ty wystawisz tylko FV za obsługę i konfigurację na klienta czyli te 180 zł brutto.

* Uwaga, jeśli klient nie jest podatnikiem VAT UE to musi samodzielnie odprowadzić podatek VAT od wysokości swojego budżetu. Czyli od budżetu w wysokości 400 zł płaci 92 zł podatku do skarbówki w postaci VATu. Nie ma wtedy różnicy czy ty fakturujesz klienta czy nie.

Jak poprawnie księgować AdWords

Mamy dostępne dwa rodzaje płatności podpięcie karty i przedpłata. Ponad to w  Polsce mamy dostępne dwa rodzaje przedpłaty tj. przelew na konto bankowe tradycyjnie lub płatność kartą. Różnica jest dość istotna w księgowaniu przy przedpłacie księgujemy od całej kwoty VAT a potem co miesiąc wrzucamy wydatki w koszta poprzez rozliczenie między okresowe kosztów (uwaga! nie wrzucamy w koszta jednorazowo wartości przedpłaty) przy podpiętej karcie koszta są naliczane co miesiąc na koniec każdego miesiąca i księgujemy (Import usług – naliczamy i odliczamy VAT – który jest neutralny) zakładając oczywiście, że posiadamy VAT UE.

Uwaga! W drugiej połowie 2019 r. forma przedpłaty na konto w Google Ads została wycofana dla nowo stworzonych kont w Polsce.

Divi – glabalny footer i jak go dodać do każdej podstrony

Czy jesteś skazany na ręczną edycję każdej ze stron? NIE!

Jak dodać globalny footer do divi? Oczywiście nie chodzi nam o moduł globalny ale o jego integrację, tak by nie było trzeba edytować każdej z naszych podstron.
Wystarczy zainstalować plugin “Code Snippets” a następnie stworzyć nasz globalny element wchodząc w zakładkę DIVI > biblioteka divi. Po stworzeniu globalnego elementu (naszego footera) odczytujemy jego numer z adresu URL:

https://twojastrona.pl/wp-admin/post.php?post=402&action=edit

Teraz wystarczy stworzyć nowy snipet w naszym pluginie. Zaznaczyć opcję wyświetlania tylko na front endzie a następnie wkleić poniższy kod:

//======================================================================
// CUSTOM FOOTER
//======================================================================
function mp_add_custom_footer() {
echo do_shortcode('[et_pb_section global_module="402"][/et_pb_section]');
}
add_action( 'et_after_main_content', 'mp_add_custom_footer' );

i gotowe.

Musimy pamiętać, że edycja tak dodanego footera nie będzie dostępna z edytora divi na stronie.
Jak zatem edytować nasz globalny moduł? Musimy przejść do zakładki DIVI > biblioteka divi tutaj mamy już dostępne wszystkie funkcje edycji.

Jeśli chcemy usunąć domyslny footer możemy ukryć go używając CSS:

Lub jeśli stworzyliśmy child theme do naszego motywu divi możemy wyedytować footer.php, tak, by nie wyświetlał standardowego footera.
Integrację naszego footera możemyprzeprowadzić również bez użycia pluginu “Code snipets” instrukcję znajdziecie tutaj:

https://quiroz.co/replace-the-default-footer-with-a-divi-builder-footer-saved-in-your-divi-library/
https://quiroz.co/inject-a-layout-from-your-divi-library-into-your-footer-using-divi-hooks/

Jak przeszukiwać gmaila

Jeśli posiadasz konto gmail to masz to szczęście, że własnie gmail obsługuje kilka rodzajów wyszukiwać wiadomości wliczając zakres dat, załączniki, rodzaje załączonych plików.
Można przeszukiwać wiadomości z podziałem na tylko te, które odebraliśmy, lub te które wysyłaliśmy.

from:123ela@wp.pl has:attachment filename:jpg

Powyższe wyszuka wszystkie wiadomości otrzymane od 123ela@wp.pl z załącznikami oraz z plikami w formacie jpg

to:123ela@wp.pl has:attachment filename:jpg

Powyższe wyszuka wszystkie wiadomości otrzymane do 123ela@wp.pl z załącznikami oraz z plikami w formacie jpg

Jak wyszukać nieprzeczytane wiadomości z naszej głównej zakładki?
in: category:primary is:unread

 

Alternatywy dla Google Maps

Wzrost opłat o 1400% oraz obniżenie darmowego limitu na korzystanie z Google Map API. Polityka cenowa oraz sposób korzystania z Google Maps API zostały drastycznie zmienione. Teraz Google nie tylko podnosi ceny za korzystanie z tego produktu ale również każe użytkownikom rejestrować karty płatnicze aby móc korzystać z darmowego limitu. Co Prawda Google daje nam darmowy limit ale jego wysokość ciągle się zmienia. Początkowo było to 200$ miesięcznie co w przypadku większości małych stron dalej oznaczało by, że produkt jest darmowy mimo rejestracji karty płatniczej (cennik Google Maps). Niestety to z pewnością nie koniec zmian.

Przy rejestracji karty płatniczej dowiadujemy się, że otrzymamy 300$ na okres 12 miesięcy okresu próbnego do wykorzystania w Google Cloud Platform. Co stanie się po 12 miesiącach ciężko powiedzieć. Zapewne do tego czasu ceny ulegną kolejnym modyfikacjom.

cennik google maps Polska

Obniżenie limitów dodatkowo wiąże się z podwyżkami cen za korzystanie z tej usługi także ludzie zaczynają szukać alternatywy.  Czy takie istnieją ? Tak i są sporo tańsze. oto kilka z nich:

mapbox
https://www.mapbox.com/help/google-to-mapbox/

maptiler
https://www.maptiler.com/google-maps-platform-alternative/

leafletjs
https://leafletjs.com/examples.html

Należy się przyzwyczaić, że produkty firmy Google zwłaszcza te darmowe z czasem (gdy opanują rynek) staną się aplikacjami płatnymi. W momencie gdy taka usługa stanie się płatna może być ciężko dokonać zmiany produktu na inny. Tak więc należy zastanowić się czy warto zaczynać korzystać z produktów tej firmy tylko po to aby za kilka lat szukać alternatywy z powodu drastycznych zmian cen lub po prostu, gdy darmowy produkt staje się płatnym.

WordPress – jak rozbudować i utrzymać porządek w pliku functions.php

code snippets - organizacja kodu wp

Czy kojarzycie problem nadpisywania plików motywu lub potrzebę tworzenia tzw. child-theme tylko to to by dodać drobną funkcjonalność do pliku functions.php.
Ponadto plik ten po edycji często wygląda jak niekończąca się ścian płaczu. Myślę, że nikt za tym nie tęskni. Ten problem odchodzi w zapomnienie dzięki pluginom, które pomagają nam organizować nasz kod.
Code Snippets” jest jednym z kilku pluginów, który pomaga nam tworzyć kod bardziej uporządkowany. Używa się go bardzo prosto. Instalujemy plugin, aktywujemy, tworzymy nowy snippet i piszemy nasz kod.
Plugin pozwala nam z łatwością zarządzać zasięgiem działania naszego skryptu, włączać i wyłączać funkcjonalności za przyciśnięciem jednego przycisku.

/**
* @description function is used to generate horisontal menu from exsisting menu
* @param "name" This is name or id of the menu we want to use
* @return "Pipe separated horizontal navigation"
*/
function generate_links($atts){
  
  // get shortcode atributes value / set defaults
  $shortcode_atts = shortcode_atts( array(
	'name' => 1,
  ), $atts );
  
  // get menu object array
  $menu = wp_get_nav_menu_items($shortcode_atts['name']);
  $output = "";
  $output .= "<div class='cx-menu'>";
  foreach($menu as $key => $v){
    end($menu);
    if ($key === key($menu)) // check if is last element
        $output .= "<a class='cx-menu-a' href='{$v->url}'>{$v->title}</a>"; 
	else
  		$output .= "<a class='cx-menu-a' href='{$v->url}'>{$v->title}</a> | ";
  }
  $output .= "</div>";
  
  return $output;
  
}

add_shortcode( 'links', 'generate_links' );

dodawanie shortcode do widgetu

Tak wygląda nasz panel zarządzania kodem.  Możemy na tym etapie włączać wyłączać i zmieniać zasięg działania naszego kodu. Co najważniejsze mamy czysty i przejrzysty interfejs oraz jasno podzielony kod w rozbiciu na funkcjonalności.

Code Snippets

Po kliknięciu przechodzimy do kodu naszego krótkiego skryptuCode Snippets

 

Płatne i darmowe katalogi firmowe do których warto się zapisać (SEO linkowanie)

Ponieważ linki nie są już głównym wykładnikiem generowania pozycji w wyszukiwarkach nie należy z nimi przesadzać.
Proponuje zapoznać się z następującą listą

  1. Interia http://katalog.interia.pl/dodaj_odswiez_strone (11,07zł brutto / wpis)
  2. WP http://katalog.wp.pl/dodaj_opis.html?ticaid=11bc7f&_ticrsn=5 (11,07zł brutto)
  3. Zumi https://www.zumi.pl/warszawa,14.65.011.000554,index.html (płatny ?)
  4. PF https://panoramafirm.pl/dodaj-firme.html (płatny ?)
  5. PKT https://www.pkt.pl/dodaj-aktualizuj-dane-firmy (płatny ?)
  6. oferteo.pl https://www.oferteo.pl/rejestracja-dostawcy.html (darmowe)
  7. firmy.net http://www.firmy.net/dodaj-firme.html (darmowe)
  8. biznes finder https://www.biznesfinder.pl/p,dodajfirme (darmowe)
  9. Google Moja Firma (darmowe)
  10. Facebook (darmowe)

Tutaj budowa linków jest już kompletna. Większa ilość linków nie zagwarantuje nam znacznej różnicy w pozycjonowaniu.
Linki ze stron z wysokim PR natomiast na pewno mogą nam w tym pomóc. Dlatego warto czasami zapłacić za artykuł w gazecie, która napisze o nas artykuł i podlinkuje do naszej strony.
Nie warto jednak z tym przesadzać, ponieważ artykuły sponsorowane są drogie a efekt też nie jest znaczący. Profilaktycznie raz na jakiś czas możemy jednak pozwolić sobie na taką przyjemność.

Najlepiej dodać firmę zaledwie do kilku katalogów i skupić się na treści zamieszczonej na stronie, alt tagach, nazwach plików, tytułach nagłówków i adresów URL, odpowiednią optymalizacją zdjęć i używaniem w tekście słów kluczowych na które chcemy się wypozycjonować.

Warto również upewnić się, że nasza strona została dodana do indeksu Google:
W tym celu należy zintegrować stronę z takimi narzędziami jak Google Search Console google Analytics, Google Tag manager, Google Adwords itp.