• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Czy kod jest poprawny?

0 głosów
224 wizyt
pytanie zadane 27 stycznia 2020 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)

Witam wszystkich!

Aktualnie przerabiam kod Samuraja Programowania z tego odcinka

I trochę go zmieniłem, a nie miałem wcześniej zbyt dużego doświadczenia z animacjami css, dlatego chciałbym spytać czy mój kod jest dobry i spełnia on wszelkie standardy itd. 

Html:

    <div class="writingEffect">
        <h1>Good Morning</h1>
    </div>
      

Css:

.writingEffect
{
  background-color: #000;
  color: #fff;
}

.writingEffect h1 {
   display: inline-block;
   position: relative;
   font-family: monospace;
   font-size: 60px;
   margin-top: 50px;
   margin-bottom: 50px;
   margin-left: 32.5%;
   letter-spacing: 10px;
  }

.writingEffect  h1::after {
   box-sizing: border-box;
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #000;
   top: 0;
   right: 0;
   animation:writing 2s steps(12) forwards 1;
  }

  @keyframes writing {
   0% {
    width: 100%;
   }
  
   100% {
    width: 0%;
   }

  }

A i jeszcze mam pytanie: czy jeśli kod jest w większości z gotowego źródła i jest jedynie po niewielkiej modyfikacji, to mogę go używać bez żadnych problemów u siebie na stronie, nawet jeśli zarabiała by ona jakieś pieniądze? 

Dziękuję za poświęcony czas, miłego wieczoru! 

2 odpowiedzi

+1 głos
odpowiedź 30 stycznia 2020 przez pirouetti Mądrala (6,490 p.)
wybrane 30 stycznia 2020 przez Layoutowiec
 
Najlepsza
Możesz wykorzystywać do woli, po to są takie tutoriale.

Jeżeli działa, to jest poprawny kod.

Pisz jak ci wygodnie, byle działało tak jak chcesz.

Kod nie musi spełniać żadnych standardów.

Jeżeli ci wygodniej pisać tak: writingEffect dla klasy w css nie ma w tym nic złego.

Jedyne co ma znaczenie w pisaniu kodów to:

- po pierwsze żeby były czytelne i wygodne w pisaniu dla ciebie, lub ewentualnie współpracowników, jeśli takich masz, czy będziesz miał.

- po drugie - jakość kodu, to jest, jeżeli ten sam efekt można osiągnąć mniejszą ilością kodu lub po prostu lepszą techniką to taki efekt jest pożądany.

Jednak na tym polega cała zabawa i nauka projektowania i programowania, że zawsze można nauczyć się czegoś lepiej.

Znależć jakąś lepszą metodę czy po prostu douczyć się, bo technologia idzie do przodu.

Ogólnie mówiąc, nie przejmuj się niuansami i pisz jak ci wygodnie. Byle działało jak trzeba.
komentarz 30 stycznia 2020 przez pirouetti Mądrala (6,490 p.)
Dodam tylko, że jeśli animacja ma iść tylko z jednego do drugiego punktu, nie trzeba pisać 0% i 100%, można po zamiast 0% napisać "from", zamiast 100% "to"
komentarz 30 stycznia 2020 przez Layoutowiec Mądrala (5,470 p.)

Naprawdę dziękuję za pomoc.laugh

Będę się starał szukać z czasem coraz lepszych metod i starał się pisać czytelny kod 

To dobrze ze bede mogl wykorzystać u siebie ten efekt bo bardzo mi się spodobał a nie jestem pewien czy np. Jeśli strona coś zarabia to można z tego tak korzystać czy trzeba zapłacić 

I oczywiście poprawie to 0 i 100 procent 

 

komentarz 31 stycznia 2020 przez pirouetti Mądrala (6,490 p.)
Nie ma sprawy :)

Jeśli chodzi o użycie darmowych lub płatnych materiałów, zawierają one licencje.

Np. niektóre licencje jak MIT mają swoje zasady, są licencje jak creative commons, które czasem wymagają pozostawienie w stopce np. autora danego załóżmy szablonu.

Ale to w przypadku pobraniu jakiś plików darmowych.

Jeżeli nie ma licencji to nie ma się czym przejmować.

A jeśli ktoś robi tutorial z np. css pokazując jak to działa, to nie może sobie całego tego kodu zalicencjonować, bo przecież jest to kod otwarty dla wszystkich i nikt sobie nie może go przywłaszczyć :).

A z tym 0 i 100 procent to chyba nie ma tak dużego znaczenia akurat tutaj, bo efekt ten sam.

Gdy 2 sposobami można osiągnąć jeden efekt, ja zawsze patrze, które zawiera mniej kodu i go używam, dzięki czemu jest lżejszy plik i strona ładuje się szybciej.

Najczęściej to są później milisekundy, ale jak to mówią, grosz do grosza...
komentarz 31 stycznia 2020 przez pirouetti Mądrala (6,490 p.)
Wszedłem w ten filmik i jest tam w opisie link do codepen skąd pobrałeś zapewne dane pliki strony.

Pobrałem dany plik zip i jak we wszystkich z codepena znajduje się tam plik licence.

"Permission is hereby granted, free of charge, to any person obtaining a copy of this software" - ta licencja oczywiście pozwala w pełni na swobodne użycie danych kodów, możesz przeczytać całą, powinna być w folderze, który pobrałeś.
komentarz 31 stycznia 2020 przez Layoutowiec Mądrala (5,470 p.)
Właśnie przeglądałem ten plik z licencją. Czyli w tym przypadku nie muszę podawać żadnych informacji o autorze etc. dobrze zrozumiałem?
komentarz 31 stycznia 2020 przez pirouetti Mądrala (6,490 p.)

Tak.

Niczego nie musisz podawać.

Podawanie autora jest wymagane przy tej licencji:

https://creativecommons.org/licenses/by/3.0/pl/

I używane najczęściej np. przy całych darmowych szablonach strony.

Tutaj możesz w pełni modyfikować i używać kod w swoim projekcie beż żadnego uznania autorstwa, codepen to taki zwykły edytor, gdzie każdy może swoje kody na szybko wrzucić i każdy może to użyć.

+1 głos
odpowiedź 27 stycznia 2020 przez Comandeer Guru (568,840 p.)

A i jeszcze mam pytanie: czy jeśli kod jest w większości z gotowego źródła i jest jedynie po niewielkiej modyfikacji, to mogę go używać bez żadnych problemów u siebie na stronie, nawet jeśli zarabiała by ona jakieś pieniądze? 

Wszystko zależy, na jakiej licencji jest udostępniany kod, który wykorzystujesz.

 Co do animacji: osobiście dodałbym klasę także do h1 i to po niej stylował. Ale pomijając to, jest ok.

komentarz 28 stycznia 2020 przez Layoutowiec Mądrala (5,470 p.)
Okej więc tak zrobię.

No to jest kod z poradnika więc wydaje mi się że nie powinno być chyba problemu jednak nie jestem do końca pewien. A co bym musiał zrobić jakby żebym mógł użyć tego efektu na swojej stronie nie łamiąc niczyich praw autorskich?
komentarz 28 stycznia 2020 przez lapa19904 Stary wyjadacz (11,590 p.)
Wiele jest poradników czy tutków które pokazują nie najlepsze praktyki.

Ja na przykład zawsze uczony byłem stylowania po klasach, nigdy po ID czy po elementach. W zespołach z którymi dotychczas pracowałem nikt też nie popierał camel case-a w css/sass. Najlepiej nazywać klasy trzymając się BEM-a, a camleCase zostawić dla js-a. Ale są to moje doświadczenia, wiele zależy od tego co dla Ciebie jest dobre i od ludźmi z którymi pracujesz/piszesz. Pamiętaj żeby nigdy nie wierzyć poradnikom na 100%, każdy może napisać/nagrać poradnik i nikt bardziej doświadczony nie musi sprawdzać jakość contentu przed wrzuceniem do na yt/udemy itp.
komentarz 28 stycznia 2020 przez Layoutowiec Mądrala (5,470 p.)
Czyli lepiej zapisywać nazwy używając małych liter i podkreślenia przy drugim słowie?

No mi zapis camleCase wydaje się wygodniejszy, ale skoro lepiej zostawić go dla js to tak zrobię

A co z tym kodem mogę go wykorzystać u siebie jeśli jest po części z poradnika?
komentarz 29 stycznia 2020 przez lapa19904 Stary wyjadacz (11,590 p.)

Tak, w sassie zazwyczaj korzysta się z BEM-a (http://getbem.com/introduction/), a w js-ie zmienne i funkcje zapisuję się camelCase. Używanie BEM jest bardzo wygodne przy pisaniu sass-a (&--modifier itp.), w css długość klas może trochę męczyć.

Jak pisałem wcześniej zależy to od zespołu bo bywa różnie ale to są najlepsze praktyki.

Co masz na myśli "wykorzystać kod u siebie?" Chcesz go sprzedać czy trzymać tylko na swojej stronie?

 

 

komentarz 29 stycznia 2020 przez Layoutowiec Mądrala (5,470 p.)
Nie no, po prostu chciałem go wykorzystać na swojej stronie, ale nie jestem pewien czy mogę go sobie tak po prostu wziąć i dostosować zależnie od potrzeb.

Podobne pytania

0 głosów
1 odpowiedź 252 wizyt
pytanie zadane 22 lipca 2017 w HTML i CSS przez KoruS Obywatel (1,630 p.)
0 głosów
0 odpowiedzi 42 wizyt
+1 głos
2 odpowiedzi 374 wizyt
pytanie zadane 25 września 2020 w HTML i CSS przez Pantomas Nowicjusz (230 p.)

88,325 zapytań

136,919 odpowiedzi

305,556 komentarzy

58,598 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...