Follow along with the video below to see how to install our site as a web app on your home screen.
Huomio: This feature may not be available in some browsers.
Pohdiskelua...
Kun katson skriptin suoritusta konsolista, on response tyhjä kun alert-ruutu tulee tyhjänä esiin. Heti kun kuittaan ruudun painamalla ok, ilmestyy response sellaisena kun pitääkin.
Ymmärrän tämän niin, että tuo alert suoritetaan liian aikaisin eikä skripti ole vielä ehtinyt saada palautetta. Vai?
Alert pysäyttää js säikeen, eli koodi seisahtuu paikalleen kunnes kuittaa alertin.
koodi esimerkki vois myös autaa..
fetch('http://192.168.1.8/request?S_227_85', { mode: 'no-cors' })
.then(res => res.text())
.then(teksti => {
alert(teksti);
})
Koodi:fetch('http://192.168.1.8/request?S_227_85', { mode: 'no-cors' }) .then(res => res.text()) .then(teksti => { alert(teksti); })
Nyt haluttu string ilmestyy responseen ennen alertin kuittaamista, mutta ei tule mukaan alert-ruutuun.
no-cors — Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers. If any ServiceWorkers intercept these requests, they may not add or override any headers except for those that are simple headers. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.
Asia selvä. Pitänee sitten unohtaa koko juttu. Kiitos kaikille neuvoja antaneille.Kuten sanoin nykyaikaiset selaimet estää corsit.
fetch mode 'no-cors' voit tehdä kutsun, ja saada paluuna statuksen, mutta responseen ei sallita pääsyä.
Request.mode
Koitan omalle sivulle saada samantyylistä systeemia rakennettua. Tällä hetkellä päivitän frontin vasta, kun palvelimelta tulee vastaus kutsuun. Tuntuu vähän köpöltä tuo viive, kun on tottunut moderneihin palveluihin. Täytynee tutustua noiden firmojen blogeihin. Sieltä voi löytyä mielenkiintoista tietoa.En tiedä, mutta luulisin, että se toimii niin, että käyttöliittymällä on oma tila, jota se ylläpitää. Käyttöliittymän tilaa päivitetään varmaankin suoraan ja palvelimen kanssa kommunikoidaan taustalla.
Eipä tuollaisen tekeminen hirveästi vaadi. Ylläpidät tiedon vaan jossain lokaalissa muistissa ja laitat palvelimelle postin tuosta tiedosta. Toki kannattaa tarkastaa vielä taustalla, että tuo palvelimelle lähettäminen onnistui. Jos ei niin toksit vaan frontin näyttämään jonkun virhesanoman.Koitan omalle sivulle saada samantyylistä systeemia rakennettua. Tällä hetkellä päivitän frontin vasta, kun palvelimelta tulee vastaus kutsuun. Tuntuu vähän köpöltä tuo viive, kun on tottunut moderneihin palveluihin. Täytynee tutustua noiden firmojen blogeihin. Sieltä voi löytyä mielenkiintoista tietoa.
Kiitos vinkistä. Ei ole ennestään tuttu eikä ole observablesitkaan. Vielä on paljon opittavaa.Kannattaa tutustua RxJS-kirjastoon, mikäli ei ole ennestään tuttu. Jos käyttää Observablea Promisen sijaan, voi käyttää suoraan retry-operaattoria, joka uusii pyynnön automaattisesti mikäli se palauttaa virheen.
Kysymys liittyen css media queryyn.
Onko jotain hyväksi todettua tapaa havaita käytetty laite (puhelin, tabletti, pc)?
Vai käytänkö suosiolla javascriptiä media queryn kaverina?
Tämä aiheuttaa tällä hetkellä ongelmia projekteissani, kun en tiedä mikä olisi oikea tapa hoitaa tämä.
Käännetäänpä kysymys toiselle kantille: mitä yrität saavuttaa?Kysymys liittyen css media queryyn.
Onko jotain hyväksi todettua tapaa havaita käytetty laite (puhelin, tabletti, pc)?
Vai käytänkö suosiolla javascriptiä media queryn kaverina?
Tämä aiheuttaa tällä hetkellä ongelmia projekteissani, kun en tiedä mikä olisi oikea tapa hoitaa tämä.
Miksi css media queryt ei riittäisi viewportin tunnistukseen? Kysymys ei oikein aukaise varsinaista ongelmaa.
Käännetäänpä kysymys toiselle kantille: mitä yrität saavuttaa?
Jos kyse on tietyistä tyyleistä päätelaitteesta riippuen, niin käytät CSS:ää. Tällöin voit lukaista esim. tämän 02/2019 päivitetyn artikkelin aiheesta: Media Queries for Standard Devices | CSS-Tricks
Jos taas kyse on toiminnallisuudesta, niin silloin käytät JS:ää. Tällöin kannattaa tutustua `matchMedia()` funktioon: Window.matchMedia()
mitä yrität saavuttaa?
Ehkä ongelma on enemmänkin se, etten osaa niitä käyttää.
Mutta hyvä tietää, jotta pelkästään niillä pärjää.
Yritin väsätä media querya iPadille (landscape), mutta kaikesta huolimatta sama query suoritettiin desktopilla.
Mutta löysi tuohon jo toimivan ratkaisun media queryna.
Pitääpä tutustua aiheeseen vähän paremmin.
Miten nuo isot palvelut, kuten Facebook, Twitter ja Reddit tekee liketykset yms tilapäivitykset? Esimerkiksi Twitterissä kun painaa sydäntä, niin palaute tulee heti (sydämen väri muuttuu). Käsittääkseni ne ei siis odota, että tietokannasta tulee vastaus ensin, eli käytännössä kutsut on optimistisia ja oletetaan, että kutsu menee onnistuneesti perille?
<div className="class-a class-x">
...
</div>
<div className={condition ? 'class-a' : 'class-b'}>
...
</div>
Miten reactissa pystyy lisäämään useamman luokan samalle elementille ehdollisestin (conditionally) ?
Miten reactissa pystyy lisäämään useamman luokan samalle elementille ehdollisestin (conditionally) ?
Tyyliin:
Koodi:<div className="class-a class-x"> ... </div>
Yhden luokan saan lisättyä ehdollisestin, seuraavastin:
Koodi:<div className={condition ? 'class-a' : 'class-b'}> ... </div>
Laita ne taulukkoon, käytä join()-funktiota niiden liittämiseen stringiksi ja anna lopputulos luokaksi.
const classes = {
"class-a": true,
"class-b": false,
"class-x": true,
"class-y": false
};
const activeClasses = Object.entries(classes)
.reduce((acc, [className, condition]) => (condition ? acc + " " + className : acc),"")
.trim();
Laita ne taulukkoon, käytä join()-funktiota niiden liittämiseen stringiksi ja anna lopputulos luokaksi.
Jos et halua keksiä pyörää uudelleen, tutustu kirjastoihin classnames ja clsx
C:\Windows\System32\cmd.exe /k mongo "mongodb+srv://db.urli" --username username
C:\Users\username\AppData\Local\Microsoft\WindowsApps\wt.exe /k mongo "mongodb+srv://db.urli" --username username
Ok. Vuoden loppuun mennessä tämän artikkelin mukaan pitäisi tulla feature complete -versio, mutta jos pitää 1.0:aa odotella niin menee pitkälle ensi vuoden puolelle.Ei taida olla vielä tuettuna Windows Terminalissa, mutta tulossa 1.0 versioon: Feature Request: wt.exe supports command line arguments (profile, command, directory, etc.) · Issue #607 · microsoft/terminal
Miksi PHP:ssä on luotu monta is_[type] funktiota sen sijaan, että olisi pelkkä is, jolle syötetään arvo ja operaattori?
Esim. is_array($arvo) vs is('array', $arvo)
Tuommoisen universaalin issin tekee toki itsekin.
Jos arvata pitäisi, PHP:n tapauksessa homma on vähän tuollaiseksi suunnittelun puutteen takia. Voi olla ihan hyväkin ratkaisu tai sitten ei (en jaksa pohtia syvällisemmin eikä heti tule mieleen syitä, miksi pitäisi olla tavalla X tavan Y sijaan), mutta koko PHP vaikuttaa sille, että asiat ovat aika orgaanisesti muotoutuneet sellaisiksi kuin ne ovat.Miksi PHP:ssä on luotu monta is_[type] funktiota sen sijaan, että olisi pelkkä is, jolle syötetään arvo ja operaattori?
Esim. is_array($arvo) vs is('array', $arvo)
Tuommoisen universaalin issin tekee toki itsekin.
Tällainen tuli vastaan: https://crossorigin.me/Asia selvä. Pitänee sitten unohtaa koko juttu. Kiitos kaikille neuvoja antaneille.
Miten reactilla pitäisi käsitellä taulukon suodatusta kun käytössä on useampi 'rasti ruutuun' -elementti?
Jos tuosta koko suodatuksesta väsäisi oman komponentin, niin miten saan kätevästin usealta checkbox -elementiltä tilan (on/off)
Ja jos nuo saisi esimerkiksi taulukossa, niin miten suodatan taulukossa olevan datan perusteella?
En välttämättä kaipaa edes koodia, mutta jos saisi hivenen osviittaa miten edetä.
Joka tapauksessa, alla linkki codesandbox esimerkkiin, jossa on yksi suodatin sekä taulukko.
bold-cartwright-7w7hb - CodeSandbox
Array filtteria ja includes käyttämällä. Eipä se oikeen muuta kun lisää vaan ehtoja sinne ja tänne.
usean checkboxin tilan voit viedä arraylle tai map ihan kummin haluat ja useReducer hookilla tietinkin väännät jo vaikka mikälaisen tilan komponentille.
holy-silence-mqn0z - CodeSandbox mitenkään ajatuksella en tätä tehnyt, mutta nopeesti vääntämällä tälläkertaa tuli tällänen.
Array filtteria ja includes käyttämällä. Eipä se oikeen muuta kun lisää vaan ehtoja sinne ja tänne...
En vain käsitä miten tuo filtteröinti toimii tuossa sun esimerkissä.
Yritin muokata tuota esimerkkiäsi niin, että pystyisin suodattamaan useammasta sarakkeesta, mutta se meni aika sotkuksi.
Olisin kiitollinen jos viitsisit lisätä muutaman kommentin tohon
const userMatch = userFilter.length ? userFilter.includes(elem.userId) : true;
const titleMatch = titleInput.value ? elem.title.includes(titleInput.value) : true;
const bodyMatch = bodyInput.value ? elem.body.includes(bodyInput.value) : true;
return userMatch && titleMatch && bodyMatch;
const dataFilter = elem => {
const userMatch = !userFilter.length || userFilter.includes(elem.userId);
const titleMatch = !titleInput.value || elem.title.includes(titleInput.value);
const bodyMatch = !bodyInput.value || elem.body.includes(bodyInput.value);
return userMatch && titleMatch && bodyMatch;
};
console.log(data[1]);
console.log('***');
console.log(typeof data[1].KUNTANRO);
console.log(typeof data[1].MAISTRAATTINRO);
console.log('***');
console.log(data[1].KUNTANRO);
console.log(data[1].MAISTRAATTINRO);
{ 'KUNTANRO': '9',
KUNTANIMIFI: 'Alavieska',
KUNTANIMISV: 'Alavieska',
KUNTAMUOTO: 'Kunta',
KIELISYYS: 'suomi',
VAALIPIIRINRO: '12',
VAALIPIIRIFI: 'Oulun vaalipiiri',
VAALIPIIRISV: 'Uleåborgs valkrets',
MAISTRAATTINRO: '796',
MAISTRAATTINIMIFI: 'Pohjois-Suomen maistraatti',
MAISTRAATTINIMISV: 'Magistraten i Norra Finland',
'PALVELUYKSIKKÖNRO': '130',
'PALVELUYKSIKKÖFI': ' Ylivieskan yksikkö',
'PALVELUYKSIKKÖSV': ' Enheten i Ylivieska',
MAAKUNTANRO: '16',
MAAKUNTANIMIFI: 'Pohjois-Pohjanmaa',
MAAKUNTANIMISV: 'Norra Österbotten' }
***
undefined
string
***
undefined
796
Nodella ja csv-parserilla muunsin csv-tiedoston array[Object]-muotoon.
Miksi jokaisen objektin KUNTANRO-avaimen arvon tyyppi on 'undefined'?
Koodi:console.log(data[1]); console.log('***'); console.log(typeof data[1].KUNTANRO); console.log(typeof data[1].MAISTRAATTINRO); console.log('***'); console.log(data[1].KUNTANRO); console.log(data[1].MAISTRAATTINRO);
Koodi:{ 'KUNTANRO': '9', KUNTANIMIFI: 'Alavieska', KUNTANIMISV: 'Alavieska', KUNTAMUOTO: 'Kunta', KIELISYYS: 'suomi', VAALIPIIRINRO: '12', VAALIPIIRIFI: 'Oulun vaalipiiri', VAALIPIIRISV: 'Uleåborgs valkrets', MAISTRAATTINRO: '796', MAISTRAATTINIMIFI: 'Pohjois-Suomen maistraatti', MAISTRAATTINIMISV: 'Magistraten i Norra Finland', 'PALVELUYKSIKKÖNRO': '130', 'PALVELUYKSIKKÖFI': ' Ylivieskan yksikkö', 'PALVELUYKSIKKÖSV': ' Enheten i Ylivieska', MAAKUNTANRO: '16', MAAKUNTANIMIFI: 'Pohjois-Pohjanmaa', MAAKUNTANIMISV: 'Norra Österbotten' } *** undefined string *** undefined 796
Miksi jokaisen objektin KUNTANRO-avaimen arvon tyyppi on 'undefined'?
// Olettamasi tilanne
const wishfulThinking = {
'KUNTANRO': 9
kuntanimi: 'Alavieska'
}
// Todellinen tilanne
const reality = {
"'KUNTANRO'": 9,
kuntanimi: 'Alavieska'
}
Heroku on ilmainen yhdellä prosessilla. Servu menee tosin sleep-tilaan 30 minuutin idlauksen jälkeen ja tällöin tunnit ei kulu.Mitä cloud palvelua voi opiskella ilman että maksaa kuukausimaksua siitä. Tai jollain kokeiluversiolla. Azure, AWS? Tarkoituksena olisi saada laitettua oma projekti sinne pyörimään.
Mitä cloud palvelua voi opiskella ilman että maksaa kuukausimaksua siitä. Tai jollain kokeiluversiolla. Azure, AWS? Tarkoituksena olisi saada laitettua oma projekti sinne pyörimään.
Kokeiltu data[1]['KUNTANRO'] ja data[1]["'KUNTANRO'"] yhtä huonolla menestyksellä. Lähdetiedosto: Kunnat - Voimassa olevat Suomen kunnat 1.1.2018 - Avoindata.fiKoska objektin avain ei ole KUNTANRO vaan 'KUNTANRO'. Nämä kaksi ovat eri tilanteita:
Koodi:// Olettamasi tilanne const wishfulThinking = { 'KUNTANRO': 9 kuntanimi: 'Alavieska' } // Todellinen tilanne const reality = { "'KUNTANRO'": 9, kuntanimi: 'Alavieska' }
Todennäköisesti nämä heittomerkit ovat osa lähdetiedostoa.
Puhdista lähdedata heti ensimmäisenä ennen kuin tuuppaat sen jsoniin niin ei tarvitse kikkailla.Kokeiltu data[1]['KUNTANRO'] ja data[1]["'KUNTANRO'"] yhtä huonolla menestyksellä. Lähdetiedosto: Kunnat - Voimassa olevat Suomen kunnat 1.1.2018 - Avoindata.fi
Tuolla lähti toimiman: awk '{if(NR==1)sub(/^\xef\xbb\xbf/,"");print}' kuntaluettelo-laajat-tiedot-2018-01-01.csv > kuntaluettelo-laajat-tiedot-2018-01-01.csv.nobomPuhdista lähdedata heti ensimmäisenä ennen kuin tuuppaat sen jsoniin niin ei tarvitse kikkailla.
$Date = Get-Date -Format yyyy.MM.dd_HH.mm.ss
$LOGFILE = "User folder size " + $Date + ".txt"
$Size = (Get-ChildItem $env:userprofile -Recurse | Measure-Object -Property Length -Sum).sum
Write-Output ("Log Date and Time: " + $Date) >> $LOGFILE
Write-Output ("Username: " + $env:USERNAME) >> $LOGFILE
Write-Output ("Profile Location: " + $env:USERPROFILE) >> $LOGFILE
Write-Output ("Profile size in: " + "{0:N2}" -f ($Size/1MB) + " MB") >> $LOGFILE
Write-Output ("Profile size in: " + "{0:N2}" -f ($Size/1GB) + " GB") >> $LOGFILE
Start $LOGFILE
Eli mikä pistää silmään, mikä on tehty hyvin ja mikä huonosti? Ja mitä parannettavaa tuossa ois?
$Date = Get-Date -Format yyyy.MM.dd_HH.mm.ss
$logFileName = "User folder size $($Date).txt"
$Size = Get-ChildItem $env:userprofile -Recurse | Measure-Object -Property Length -Sum | Select-Object -ExpandProperty Sum
@"
Log Date and Time: $Date
Username: $($env:USERNAME)
Profile Location: $($env:USERPROFILE)
Profile size in: {0:N2} MB
Profile size in: {1:N2} GB
"@ -f ($Size / 1MB), ($Size / 1GB) | Set-Content -Path $logFileName
Start-Process $logFileName
$Date = Get-Date -Format yyyy.MM.dd_HH.mm.ss
$LogFileName = "PC log $($Date).txt"
$Size = Get-ChildItem $env:userprofile -Recurse | Measure-Object -Property Length -Sum | Select-Object -ExpandProperty Sum
$SizeMB = "{0:N2}" -f ($Size / 1MB)
$SizeGB = "{0:N2}" -f ($Size / 1GB)
$Mem = Get-CimInstance -className Win32_PhysicalMemory | Measure-Object capacity -Sum | % {[Math]::Round(($_.sum / 1GB),2)}
$CPU = (Get-CimInstance -ClassName Win32_Processor | select Name | out-string).Trim()
$GPU = (Get-CimInstance -className Win32_VideoController | select Name | out-string).Trim()
$PC_info = Get-CimInstance -ClassName Win32_ComputerSystem | select -property Name, PrimaryOwnername, Domain, Model, Manufacturer | out-string
@"
Log Date and Time: $Date
Profilename: $env:USERNAME
Profile size in: $SizeMB MB
Profile size in: $SizeGB GB
Processor:
$CPU
Memory size: $Mem GB
Videocard(s):
$GPU
Windows info: $PC_info
"@ | Set-Content -Path $LogFileName
Start-Process $LogFileName
WriteByte((byte)(val & 0xFF));
WriteByte((byte)((val >> 8) & 0xFF));
WriteByte((byte)((val >> 16) & 0xFF));
WriteByte((byte)((val >> 24) & 0xFF));
WriteByte((byte)val);
WriteByte((byte)(val >> 8));
WriteByte((byte)(val >> 16));
WriteByte((byte)(val >> 24));
Tuo jälkimmäinen taitaa pystyä heittämään OverflowExceptionin.Eräässä open source c# palikassa on kirjoitettu integeri byteiksi näin:
Eikö nuo and operaatiot ole tuossa tarpeettomia? Tämänhän pitäisi tuottaa sama lopputulos:Koodi:WriteByte((byte)(val & 0xFF)); WriteByte((byte)((val >> 8) & 0xFF)); WriteByte((byte)((val >> 16) & 0xFF)); WriteByte((byte)((val >> 24) & 0xFF));
Vai olenko missannut jotain oleellista noihin casteihin liittyen?Koodi:WriteByte((byte)val); WriteByte((byte)(val >> 8)); WriteByte((byte)(val >> 16)); WriteByte((byte)(val >> 24));