FV
GIT és GitHub
Belépsz a mappába amibe dolgozni akarsz
git init (ezután érdemes GIT terminalt nyitni)
git add readme.txt – hozzáadod a readme.txt filet a git branchedhez
vagy : git add . – add everything
git commit -m „Added readme.txt” – ide leirhatod mit módositottál
git status
git checkout -b new – létrehozza és átvált a „new” branchre
git checkout master – átvált a master branchre
git remote add origin https://...... – ide akarunk pusholni majd dolgokat (GitHub-ról vett repository link)
git push -u origin master – feltölt mindent a master-ba GitHubra (legközelebb csak git push-ot kell beirni – pusholás előtt be kell jelentkezned, autentikálni GITHUBra:
git congif --global user.name „Sziszi”
git config --global user.email „sziszibia@gmail.com”)
git pull origin master – letölti GitHub-ról a változtatásokat
Kiegészitő infó: http://math.bme.hu/~balazs/git/gitcml.html
SASS - scss
VSCode SASS letöltés, Live Sass Compiler letöltés (terminalba npm i –g sass-al is telepithető)
CSS file létrehozása SCSS file-ból: katt a jobb lenti sarokba a SASS watchingra az SCSS file-on belül 🡪 legenerálja a CSS-t, ezt kell HTML-be linkelni, mert SCSS-t nem tud olvasni a böngésző
Változó létrehozás (variables):
$primaryBtn : red;
header button {
background: $primaryBtn;
}
footer button {
background: $primaryBtn;
}
A változó létrehozásával és használatával megkönnyited az életed. Csak egyszer kell pl a background szint áttirni és mindenhol megváltozik, ahova az a változó van beirva!
Nem muszáj class-ozni vagy külön irogatni dolgokat, hanem pl. ha header-en belül van több módositani kívánt dolog is, akkor egymás alá lehet őket irni:
header {
background: blue;
button {
color: red;
p {
text-align: justify;
}
}
}
Focus, hover stb. hozzáadása dolgokhoz:
button {
color: red;
& : hover {
background: blue;
}
}
Importálás:
Ha két SCSS file-ra lenne szükségünk (mert pl a header rész túl sok lenne 1 SCSS filehoz), akkor az alap style.scss-be be tudjuk importálni a másik SCSS file-t (a második,harmadik stb. file-okat mindig ilyen formátumban készitjük: _header.scss):
importálás a style.scss-be: @import „./header”;
A további scss-ekhez nem kell SASS watch-ot nyomni, azaz CSS-t generálni
Mixin-ek:
@mixin flexCenter {
height: 100vh;
display: flex;
}
header {
@include flexCenter();
}
A mixin hasonló, mint a változók, csak itt egy „tömböt” hozunk létre, amit az @include-al tudunk meghivni akármelyik objektumnál
Ha különböző változókat szeretnénk különböző dolgokhoz, akkor tudjuk ezt is használni:
@mixin flexCenter($background) {
height: 100vh;
display: flex;
background: $background;
}
header {
@include flexCenter(red);
}
Extend:
.contact {
@extend header;
font-size: 15px;
}
-Egy már létező class-ra vonatkozó stílusokat tudod egy másik class-ra „átmásolni” és hozzáadni (inherit-álni) más tulajdonságokat is mellé (pl.-ban: font size).
@function, @if és @else
@function set-text-color($color) {
@if (lightness($color) > 70) {
@return #333;
} @else {
@return #fff;
}
}
Kiegészítő infók: https://codeguide.hu/sass
Jquery
Jquery oldalról letöltöm – fejlesztői verzió (development) (lehet,hogy kidob egy kódot 🡪 ebben az esetben csinálok a munkamappámba egy jquery.js file-t és oda bemásolom)
HTML fileba script-el beágyazom a jqueryt
Ezután vagy a HTML file-ba lehet irni direktbe a jquery kódot script tagek közé vagy pedig egy külön fileba, amit szintén be kell linkelni!
A jquery kód mindig ezzel kezdődik:
$(document).ready(function(){ ….. VAGY(ha más olyan framework-öt is használunk, amiben a $-t haszálni kell) $.noConflict(); jQuery(document).ready(function(){……
Ajax
AJAX = Asynchronous JavaScript and XML.
Röviden: Az Ajax betölti az adatokat a háttérben és megjeleníti őket az oldalon a weboldal újratöltése nélkül.
POST és GET
GET – Adatokat kér egy megadott erőforrástól. Figyelni kell használata során, mert gyakran cach-elt adatot ad vissza.
POST – Adatokat küld feldolgozásra egy megadott erőforráshoz, de használható adatok lekérésére is. Előnye a GET-el szemben, hogy soha nem a cach-elt adatokat adja vissza.
Mongodb
$expr
$gt – greater than – nagyobb,mint 🡪 y nagyobb,mint x
$lt – lesser than – kisebb, mint 🡪 y kisebb, mint x
$push- új elem hozzáadása a sorhoz, egy mezőt tömbmezővé alakít, ha korábban más típusú volt
{tömb sor: {„$size”: szám}} – visszaadja az összes dokumentumot, aminek szám nagyságú elemei vannak („tömb sorai”). Pl.: {almafák : { „$size”: 20}} 🡪 visszaadja a 20 soros tömböket
{tömb sor: {„$all”: sor,sor2…}} – visszaadja az összes tömböt, amiben szerepel a sor
$gte – nagyobb, mint. pl: „bedrooms”:{„$gte”:2}} – legalább 2 hálószobája van
$lte – kisebb,mint
– ha azt kérjük, hogy benne legyen a tömbben az elem
0 - ha azt kérjük, hogy ne legyen benne a tömbben az elem
$elemMatch – kidobja a megegyező dokumentumokat, amikben legalább 1 sor vagy elem megegyezik a specifikus kritériummal
Vue és buildelés
npm init vue@latest -router YES mindig, a többi attól függ,mire van most szükség npm i ......... ezután irja a lépéseket Lebuildelés: - vite.config.js-ba beirom alias zárója után: , base: '/teszt-GB/' -magyarán,ahova menteni akarjuk (ez a XAMP htdocs-ában létrehozott mappa) - .htaccess file bemásolása a public mappába a vue projekten belül - New terminal --> npm run build - dist mappából mindent átmásolok a XAMP htdocs-ba - XAMP-ban Apache elinditása, meg is tudod nézni igy localhost/teszt-g-vel
Megjegyzések
Megjegyzés küldése