W czym piszecie? Bogowie Front-endu.

W czym piszecie? Bogowie Front-endu.
0

Cześć, mam pytanie do bardziej doświadczonych programistów. W sumie to do osób pracujących .
W czym piszecie strony? W czy polecalibyście mi naklepać projekty do portfolio?
Nie czuje się jeszcze na siłach jeśli chodzi o react'a. Umiem flexbox, grid, bootstrap.
Najlepiej pisze mi się we flexboxie, problem jest taki że używam go praktycznie zawsze kiedy tylko mam coś wyśrodkować lub rozmieścić obok siebie (podobno to nie jest dobra praktyka).
Piszę grida na nowych komendach, czasem sam definiuję siatkę w scss.
Bootstrapa 4 znam podstawowo (co nie jest problemem bo wszystkie klasy są w dokumentacji).
Zabieram się do klejenia portfolio na przyszły rok. Chcę już powoli pokazywać co umiem (w js'ie) ale nie potrafię się zdecydować w czym pisać HTML.
Podpowiedzcie mi co jest najlepsze i na co pracodawca zwróci uwagę. Co jest używane jeśli nie zakładamy użycia Reacta.

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

W czy polecalibyście mi naklepać projekty do portfolio?

Umiem flexbox, grid, bootstrap.

Odpowiedziałeś sam sobie ;-)
Nie ma co od razu iść w tak zaawansowane tematy jak Angular czy React - stronka-portfolio w Bootstrapie jak najbardziej wystarczy.


Hispano-Suiza
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad 5 lat
0

Zalezy co chcesz pokazac. Jesli uzycie klockow jest dla Ciebie wystarczajace to bootstrap (inny, podobny). Jezeli chcesz pokazac swoj skill - pisz wszystko od zera :P


"Trolling is a art"
0

W sumie, napiszę coś w czystym html'u dodam float-left'y. Pokaże na co mnie stać.

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

Nie wymyślaj koła na nowo, nie warto - poducz się Bootstrapa, naucz się Semantic UI; wykorzystaj to, co już jest dane.


siloam
  • Rejestracja:prawie 8 lat
  • Ostatnio:prawie 2 lata
  • Postów:99
0

Vue, vuetify.


0

No dobra, tylko czy lepiej robić coś na bootstrapie czy może lepiej napisać to samo ale z palca przy pomocy flexa albo grida?
Chcę dodać do tego jakąś aplikację wykorzystującą rest API na trochę większą skalę niż pobieranie obrazków (np. interfejs z wyszukiwarką konkretnych miejsc z dynamicznie zmieniającymi się informacjami na temat pogody czy zanieczyszczeń powietrza albo jakąś internetową bazę książek z podglądem itp.). W innym projekcie może jakiś sklep internetowy ze bardziej rozbudowaną logiką w bebechach. Zastanawiam się czy Bootstrap nie kastruje troszkę możliwości edycji pewnych rzeczy i czy w oczach rekruterów nie będzie to pójście na łatwiznę.

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

Zastanawiam się czy Bootstrap nie kastruje troszkę możliwości edycji pewnych rzeczy

Nikt nie każe Ci wykorzystywać tylko Bootstrapa - przecież możesz zarówno pisać w Bootstrapie, jak i na bieżąco dopisywać brakujące Ci rzeczy.

i czy w oczach rekruterów nie będzie to pójście na łatwiznę.

Ale Ty masz iść na łatwiznę - nikt nie chce, abyś gdziekolwiek wymyślał koło od nowa, jeśli od wielu lat już istnieją sprawdzone rozwiązania, ponieważ jest to zwyczajne marnowanie czasu i wyrzucanie pieniędzy w błoto :-)

Prosta zasada: jeśli tworzysz coś dla nauki / dla siebie, śmiało ucz się i wynajduj koło od nowa; jeśli tworzysz coś profesjonalnie, wykorzystuj gotowce - dzięki temu:

  • Nie będziesz tracił czasu na pisanie od nowa grida, alertów, modali itd.,
  • (najistotniejsze!) Inne osoby znające dany framework będą mogły szybciej dołączyć się do projektu bądź go przejąć.

edytowany 1x, ostatnio: Patryk27
0

Pisałem sporo HTML, CSS, SCSS, JS, JQuery, (teraz uczę się reacta) i w sumie mógłbym poczekać i napisać kilka aplikacji z reactem ale chyba warto pokazać co potrafi się bez niego. Używam webpacka, wcześniej gulpa. Piszę w ES6. Nie jestem więc kompletnie zielony. Zawsze miałem problem żeby określić czego użyć w konkretnym projekcie i sam już nie wiem czy pisanie Bootstrapa nie wygląda gorzej niż pokazanie że potrafi się flexbox czy grid. Planuję porozsyłać CV końcem lutego przyszłego roku (taki deadline sobie ustaliłem) dlatego w trakcie nauki podstaw reacta chcę naklepać kilka perełek żeby github nie był pusty.

czysteskarpety
czysteskarpety
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
0

Prosta zasada, jak masz zrobić brzydko, ale samodzielnie to już lepiej skorzystaj z jakiegoś theme bootstrapa, czy material design i przynajmniej domena nie pójdzie na marne :)


Hispano-Suiza
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad 5 lat
0

Albo pobierz gotowy PSD z jakimś projektem (skoro ma być brzydko) i pisz od zera. Gdybym zatrudniał to wolałbym mieć gościa, który napisał 5 projektów z ręki niż złożył 5 z bootstrapem. Oczywiście, że nie warto ciskać wszystkiego z ręki ale jestem pewien, że później mało co będzie Cię w stanie zaskoczyć. A użycie bootstrapa będzie dziecinnie proste ;-)


"Trolling is a art"
LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:4 minuty
  • Postów:8398
0

Nie czuje się jeszcze na siłach jeśli chodzi o react'a.

Czemu? JS (wraz z ES6) znasz z tego co pisałeś, więc podstawy w zasadzie masz.
Chociaż zanim się wsiądzie w React to warto spróbować napisać coś większego, z zaawansowaną logiką interfejsu, używając tylko czystego JS i DOM (ew. wspierając się jQuery). Wtedy człowiek zobaczy, że robienie w ten sposób złożonego interfejsu jest dość niewygodne i dlatego zaczęły powstawać takie narzędzia jak React czy inne opierające się na komponentach. Poza tym próbując pisząc coś większego samemu możesz się ogólnie rozwinąć pod kątem programistycznym.

Można też jakieś gierki przeglądarkowe porobić (np. używając <canvas>), bo pisanie apek w React przypomina trochę pisanie gier (podobne problemy trzeba rozwiązywać i tu, i tu).

Z drugiej strony nawet nie wchodząc w zaawansowanego JSa możesz się jakoś inaczej rozwijać, nawet w samej stronie HTML/CSS .

Np. możesz się pouczyć SVG . To coś podobnego do HTMLa (i można osadzać w HTMLu), ale ma większe możliwości do grafiki (np. można krzywe robić, figury geometryczne bez haków itp.). Za pomocą SVG można robić rzeczy, które będą wow pod kątem wizualnym. Nawet animacje można robić. To może cię jakoś wyróżnić.

Można też wejść głębiej w techniki responsywnego designu w CSS.

Można wejść w techniki dostosowywania frontendu pod różne przeglądarki (np. piszesz o grid, a co z przeglądarkami, które grida nie obsługują?)

Można się podszkolić o dostępności w HTML/CSS https://developer.mozilla.org/en-US/docs/Web/Accessibility

Innymi słowy zawsze możesz wziąć to, co już wiesz i nauczyć się tego głębiej.


edytowany 1x, ostatnio: LukeJL
0

Ostatnio React, TypeScript, Apollo i Grommet. Przyjemne kombo.

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)