Interface kev txhim kho tsev kawm ntawv: tsom xam cov dej num rau Minsk thiab ib tug tshiab set nyob rau hauv Moscow

Hnub no ib tug tshiab rau npe qhib nyob rau hauv Yandex Interface Development School hauv Moscow. Thawj theem ntawm kev cob qhia yuav pib txij lub Cuaj Hli 7 txog Lub Kaum Hli 25. Cov tub ntxhais kawm los ntawm lwm lub nroog yuav tuaj yeem koom nrog nws nyob deb lossis ntawm tus kheej - lub tuam txhab yuav them rau kev mus ncig thiab chaw nyob hauv lub tsev so. Qhov thib ob, kuj yog theem kawg, yuav kav mus txog rau lub Kaum Ob Hlis 3, nws tsuas tuaj yeem ua tiav ntawm tus neeg.

Kuv lub npe yog Yulia Seredich, peb tau sau tsab ntawv no ua ke nrog Sergei Kazakov. Peb yog ob tus neeg tsim khoom sib tham hauv Minsk chaw ua haujlwm ntawm Yandex thiab kawm tiav ntawm SRI los ntawm xyoo dhau los.

Nyob rau lub sijhawm qhib kev sau npe nyob rau hauv Moscow, peb tab tom tshaj tawm kev soj ntsuam ntawm kev qhia ua haujlwm rau lub tsev kawm ntawv dhau los - ntawm no hauv Minsk.

Yog tias koj taug qab cov keeb kwm ntawm SRI cov haujlwm, xyoo rau xyoo peb sim peb qhov kev txawj ntse tseem ceeb rau tus programmer:

• Layout. Txhua tus tsim tawm yuav tsum muaj peev xwm ua layout. Nws tsis tshwm sim tias koj muaj txiv ntxawm Seryozha uas tsim rau tag nrho pab neeg, thiab koj tsuas yog sau ntawv. Yog li ntawd, txhua tus menyuam kawm ntawv yuav tsum qhia seb nws paub yuav ua li cas sau ntawv.
• JavaScript. Yog tias qhov teeb meem raug txwv rau kev teeb tsa, ces peb yuav tsis muaj Lub Tsev Kawm Ntawv ntawm Kev Txhim Kho Kev Sib Txuas, tab sis Lub Tsev Kawm Ntawv ntawm Layout Designers. Lub interface tsim zoo nkauj yuav tsum tau rov kho dua. Yog li ntawd, muaj ib txwm ua haujlwm rau JS, tab sis qee zaum nws kuj yog ib txoj haujlwm rau algorithms - peb hlub lawv heev.
• Kev daws teeb meem yog kab tias qhov txuj ci tseem ceeb tshaj plaws ntawm tus tsim tawm. Thaum nws los txog rau kev tsim interfaces, txhua yam hloov pauv sai heev. Nws zoo li Lewis Carroll: "Koj yuav tsum tau khiav ceev npaum li koj tuaj yeem nyob hauv tib qhov chaw, thiab mus rau lwm qhov chaw koj yuav tsum tau khiav ob zaug sai dua." Txhua hnub peb tuaj hla cov thev naus laus zis tshiab - peb yuav tsum coj lawv mus rau hauv tus account thiab muaj peev xwm nkag siab lawv. Yog li ntawd, hauv txoj haujlwm thib peb, peb tau npaj kom nkag siab txog cov thev naus laus zis uas tus tsim tawm tshiab feem ntau tsis paub txog.

Hauv kev tshuaj xyuas ntawm txhua txoj haujlwm, peb yuav qhia koj tsis tsuas yog hais txog cov txheej txheem raug, tab sis kuj hais txog kev ua yuam kev ntau.

Txoj Haujlwm 1: Portfolio

Thawj txoj haujlwm tau ua haujlwm los ntawm Yandex.Collections designer Alexey Cherenkevich, uas paub yuav ua li cas ua layout, thiab nws pab neeg ua hauj lwm, interface developer Sergey Samsonov.

Mob

Tsim ib lub vev xaib portfolio: qhia peb txog koj tus kheej, koj txoj haujlwm thiab koj qhov kev cia siab los ntawm Lub Tsev Kawm Ntawv. Lub vev xaib yuav tsum sib haum raws li ntau li ntau tau rau qhov kev npaj npaj (txuas mus rau layouts: 1000px, 600px, 320px, specification). Peb tsuas yog txaus siab rau qhov kev teeb tsa, yog li thov tsis txhob siv JavaScript.

Thaum kuaj peb yuav coj mus rau hauv tus account:

• indentation qhov ntau thiab tsawg, xim raug, font style, font loj;
• semantic layout;
• lub xub ntiag ntawm ntau lub xeev ntawm cov ntsiab lus: tso saib cov nyees khawm thiab cov kev sib txuas thaum hovering tus cursor, highlighting active input teb, thiab lwm yam .;
• cross-browser compatibility (kuaj nyob rau hauv qhov tseeb versions ntawm nrov browsers).

Qhov zoo dua yuav yog:

• siv cov kev daws teeb meem CSS niaj hnub no: flexbox, kab sib chaws, thiab lwm yam.;
• Adaptive layout;
• siv pre- thiab (los yog) post-processors, sib dhos, minification, optimization ntawm cov zis code;
• HTML daim ntawv validation, stylized cov ntaub ntawv upload khawm.

Txoj haujlwm yog voluminous, yog li koj tuaj yeem hla qhov yuav tsis ua haujlwm. Qhov no yuav txo koj cov qhab nia me ntsis, tab sis koj tseem tuaj yeem ua kom pom koj qhov kev paub. Thaum koj ua tiav, xa peb ob qhov txuas - rau koj cov ntaub ntawv khaws cia thiab qhov chaws ntawm GitHub.

Cov layouts tau npaj rau hauv txoj haujlwm tsis yog nrog cov ntxaij vab tshaus rau cov khoom siv mobile, ntsiav tshuaj thiab desktops, tab sis kuj muaj cov ntsiab lus tiag.

Txhawm rau nqa ntau qhov kev xav tau ntau npaum li qhov ua tau rau hauv qhov tshwm sim ntawm kev tshuaj xyuas thawj txoj haujlwm, muaj ntau yam qauv rau daim tshev no.

Kev Ntsuas

Tsim lub vev xaib. Qhov no zoo li pom tseeb, tab sis qee tus txiv neej hla qee qhov thaiv tag nrho - txawm lawv xav txuag sijhawm, lossis lawv ua tsis tau. Cov txheej txheem tuaj yeem muab faib ua plaub lub ntsiab lus: lub vijtsam tseem ceeb nrog tus avatar, thaiv nrog cov npe ntawm cov kev cia siab los ntawm SRI, thaiv nrog cov ntaub ntawv khaws cia thiab thaiv nrog cov ntaub ntawv tiv tauj. Lawv tuaj yeem ua rau hauv ntu lossis tsuas yog siv divs, qhov tseem ceeb yog tias tag nrho plaub lub blocks muaj.

Ua raws li layout nrog layout. Tus tsim qauv tsim ib qho kev qhia tshwj xeeb (xws li xim, typography, khawm xeev, thiab lwm yam) kom yooj yim rau cov neeg sib tw. Nyob rau hauv qab muaj ib tug hint ntawm indents thiab nta ntawm thawj lub screen. Kuv txaus siab heev rau cov txiv neej uas tau coj mus rau hauv tus account tag nrho cov neeg tsim khoom xav tau: piv txwv li, thawj lub vijtsam yuav tsum tsis pub tsawg dua qhov siab ntawm qhov pom.

Adaptive layout - qhov no yog thaum lub interface tsis yog tsuas yog nteg tawm kom ntawm peb qhov kev daws teeb meem txhua yam yog pixel rau pixel hauv layout. Hauv cov xeev nruab nrab, qhov layout yuav tsum tsis txhob sib nrug. Qee tus tsis nco qab txwv qhov siab tshaj plaws ntawm lub thawv thiab teeb tsa txhua yam mus rau 1920 pixels, qee qhov cuam tshuam cov keeb kwm yav dhau los, tab sis tag nrho cov neeg sib tw tau txais txoj haujlwm no zoo.

Semantic layout. "Puas muaj pes tsawg zaus lawv tau hais rau ntiaj teb" tias qhov txuas yuav tsum tau tsim los ua , khawm - li . Hmoov zoo, feem ntau cov neeg sib tw ua tiav qhov kev xav tau no thiab. Tsis yog txhua tus paub txog cov npe zais hauv qhov kev cia siab ntawm SRI, ua rau nws siv div cim npe, tab sis nws tsis yog qhov phem. Muaj ib tus neeg sib tw uas tau ntxig tag nrho cov cim npe uas nws paub - qhov twg nws tsim nyog thiab qhov twg tsis tsim nyog. Piv txwv li, tsis yog ib daim ntawv teev npe - thiab . Tom qab tag nrho, semantics - nws yog hais txog kev nkag siab txog cov ntsiab lus ntawm koj nplooj ntawv thiab lub hom phiaj ntawm txhua qhov thaiv (feem ntau tswj hwm nws ntawm no), nrog rau kev siv cov khoom ua ntej thiab / lossis cov txheej txheem tom qab (ob peb tswj nws ntawm no, txawm tias qhov no. kuj yog nyob rau hauv cov ntsiab lus - feem ntau lawv siv tsawg thiab scss).

Ua haujlwm slider. Hauv txoj haujlwm peb tau sau tias JS siv tsis tau. Ntawm no muaj peev xwm los daws cov teeb meem tau sim - lub slider tuaj yeem ua los ntawm kev sib txuas ntawm thiab . Tag nrho cov khawv koob tshwm sim ntawm qib xaiv #button-N: checked ~ .slider-inner .slider-slides. Thaum peb nyem rau ntawm ib qho ntawm cov input checkboxes, nws mus rau hauv lub xeev checked. Peb tuaj yeem ua kom zoo dua qhov no thiab muab cov lus txhais peb xav tau rau lub thawv nrog cov swb: hloov pauv: txhais (-33%). Koj tuaj yeem pom qhov kev siv ntawm cov slider no.

Cov npe poob qis. Ntawm no nws tag nrho kuj tuaj rau thiab ib tug zoo xws li xaiv: .accordion-item input:checked ~ .accordion-item__content. Koj tuaj yeem pom qhov kev siv no.

Muaj :hover, :active thiab :focu* xeev. Ib qho tseem ceeb heev. Kev nplij siab thaum sib cuam tshuam nrog lub interface nyob ntawm nws. Tus neeg siv yuav tsum tau txais cov lus teb rau lawv cov kev ua. Cov khoom no tau tshawb xyuas thoob plaws hauv kev sib cuam tshuam nrog daim ntawv nug. Yog tias kuv nyem lub pob "Hu rau kuv" thiab pom tsis muaj dab tsi tshwm sim (txawm tias qhov kev thov raug xa mus), qhov no tsis zoo, vim tias tom qab ntawd kuv yuav nyem nws dua thiab dua. Yog li ntawd, kaum qhov kev thov yuav raug xa thiab kuv yuav raug hu rov qab kaum zaug. Peb yuav tsum tsis txhob hnov ​​​​qab tias cov khoom siv txawb tsis muaj nas, uas txhais tau hais tias yuav tsum tsis txhob muaj lub hover. Thiab ib qho ntxiv uas tsis cuam tshuam rau cov neeg ua tiav cov ntsiab lus ntawm semantics. Yog tias koj qhov kev tswj tsis yog ib qho kev sib tham sib, ces thaum koj hover nws, tus cursor yuav nyob twj ywm tus qauv. Nws zoo nkaus li tsis huv, txawm tias koj tau sau cov lus teb rau hover. Tsis txhob underestimate cursor: pointer.

Animations. Nws yog ib qho tseem ceeb uas txhua qhov kev tshwm sim tshwm sim nrog cov ntsiab lus yog du. Tsis muaj dab tsi hauv lub neej yog instantaneous, yog li muaj kev hloov pauv ntawm hover thiab nquag tau txaus los ua kom lub interface zoo siab dua. Zoo, cov neeg uas animated lub slider thiab cov npe feem ntau zoo heev.

Siv cov thev naus laus zis tshiab. Ntau tus neeg siv flex, tab sis tsis muaj leej twg ua tiav txoj haujlwm siv daim phiaj. Cov ntsiab lus raug suav yog tias siv flex raug raug. Yog tias qhov chaw ntawm qhov teeb tsa sib nrug vim yog cov flexes, alas, koj tsis tau txais cov ntsiab lus ntxiv.

Daim ntawv validation. Txhua yam uas yuav tsum tau yog ntxiv tus cwj pwm xav tau rau txhua qhov kev nkag ntawm daim ntawv. Peb ntxiv cov ntsiab lus rau cov neeg uas tau lees paub email teb raws li email.

Styling cov ntaub ntawv upload khawm. Peb yuav tsum pom kev sib xyaw ua ke xws li: thiab Xaiv cov ntaub ntawv. Tom ntej no peb yuav tsum tau nkaum lub tswv yim thiab style daim ntawv lo. Muaj lwm txoj hauv kev - los ua kom muaj cov tswv yim pob tshab thiab muab tso rau saum lub pob. Tab sis tsis yog txhua tus browsers tso cai rau styled, thiab qhov kev daws teeb meem no tsis tuaj yeem hu ua tus hla browser. Thiab nws yog semantically ntau yog los ua ib daim ntawv lo.

Cross-browser compatibility. Peb tau txheeb xyuas tias txhua yam zoo nyob rau hauv ob qhov tseeb versions ntawm cov browsers niaj hnub (tsis muaj IE - cov neeg koom tau muaj hmoo), nrog rau hauv Safari ntawm iPhones thiab Chrome ntawm Androids.

Ntawm qhov tsis sib xws, peb txiav cov ntsiab lus yog tias ib tus neeg siv JS lossis Bootstrap: ob leeg ntawm lawv yuav swb lub hom phiaj ntawm tag nrho cov haujlwm. Ntxiv mus, cov neeg koom nrog Bootstrap tsis tsuas yog tau txais ib qho kev rho tawm xwb, tab sis kuj poob ntau cov ntsiab lus rau semantics thiab cov ntsiab lus siv.

Cov neeg uas tuav lawv qhov chaw nyob hauv Is Taws Nem tsis tau txais txiaj ntsig tshwj xeeb - tab sis cov neeg tshuaj xyuas tau zoo siab heev thaum lawv tsis tas yuav rub tawm cov chaw khaws cia thiab khiav lawv hauv zos hauv lawv lub computer. Yog li qhov no tau ua haujlwm ntxiv rau karma.

Thawj txoj haujlwm tseem ceeb heev rau cov menyuam kawm ntawv. Cov neeg uas peb tsis tau txais tam sim no muaj ib daim ntawv qhia txog kev npaj - koj tuaj yeem txaus siab xa mus rau txhua qhov lus teb lossis tshaj tawm rau ntawm koj cov nplooj ntawv gh.

Txoj Haujlwm 2: Kev thauj mus los

Tus sau ntawm txoj hauj lwm yog lub taub hau ntawm kev tshawb nrhiav interfaces pawg Denis Balyko.

Mob

Koj puas muaj daim ntawv qhia hnub qub? Nws qhia lub npe ntawm txhua lub hnub qub, nrog rau qhov kev ncua deb ntawm nws mus rau lwm lub hnub qub hauv lub teeb vib nas this. Siv cov kev daws teeb meem, uas yuav tsum tau siv peb qhov kev sib cav: ib yam khoom uas cov yuam sij yog cov npe ntawm cov hnub qub, thiab cov txiaj ntsig yog qhov kev ncua deb ntawm cov hnub qub (ib txoj kev tsheb khiav hauv qhov chaw), nrog rau cov npe ntawm cov ntsiab lus pib thiab xaus ntawm txoj kev - pib thiab ua tiav, feem. Txoj haujlwm yuav tsum rov qab qhov luv tshaj plaws ntawm lub hnub qub pib mus rau lub hnub qub tiav thiab txoj hauv kev ua raws.

Function kos npe:

const solution = function(graph, start, finish)  {
    // Ваше решение
} 

Piv txwv input data:

const graph = {
  start: { A: 50, B: 20 },
  A: { C: 40, D: 20 },
  B: { A: 90, D: 90 },
  C: { D: 160, finish: 50 },
  D: { finish: 20 },
  finish: {}
};
const start = 'start';
const finish = 'finish'; 

Piv txwv tso zis:

{
    distance: 90,
    path: ['start', 'A', 'D', 'finish']
} 

Nco tseg: Cov pob txha pob txha yog nyob rau hauv src/folder, muab koj cov tshuaj rau hauv solution.js.

Kev txheeb xyuas qhov ua haujlwm thib ob yog qhov ua tau zoo tshaj plaws thiab lub hom phiaj. Feem ntau ntawm cov txiv neej kwv yees tias nws yog qhov tsim nyog los siv Dijkstra's algorithm. Cov neeg uas pom nws cov lus piav qhia thiab siv cov algorithm hauv JS ua tau zoo. Txawm li cas los xij, thaum kuaj xyuas txoj haujlwm, peb tuaj hla ntau cov ntawv nrog tib yam yuam kev. Peb tau tshawb hauv Is Taws Nem rau cov lej tawg thiab pom ib tsab xov xwm los ntawm cov neeg koom ua ke theej cov algorithm. Nws yog qhov lom zem uas ntau tus neeg tau theej cov cai los ntawm tsab xov xwm nrog rau tus sau cov lus. Cov hauj lwm zoo li no tau txais cov qhab nia qis. Peb tsis txwv tsis pub siv ib qho twg, tab sis peb xav kom tus neeg delve rau hauv qhov nws sau.

Kev Ntsuas

Cov ntsiab lus tseem ceeb tau txais txiaj ntsig rau kev xeem. Qee lub sij hawm nws tau pom tseeb tias cov txiv neej tau messing nyob ib puag ncig nrog lub chaw cia khoom, renaming folders, thiab kev sim yuav ua tsis tau tsuas yog vim lawv nrhiav tsis tau cov ntaub ntawv tsim nyog. Xyoo no peb tau sim pab cov neeg zoo li no thiab xa rov qab txhua yam rau nws qhov chaw rau lawv. Tab sis xyoo tom ntej peb npaj yuav hloov mus rau qhov kev sib tw, thiab qhov no yuav tsis zam txim ntxiv lawm.

Kuj tseem muaj "tib neeg", phau ntawv txheej txheem. Piv txwv li, lub xub ntiag ntawm ib tug code style. Tsis muaj leej twg txiav tawm cov ntsiab lus rau kev siv tabs tsis yog qhov chaw lossis rov ua dua. Nws yog lwm qhov teeb meem yog tias koj hloov ib nqe lus nrog ob nqe lus raws li ib txoj cai paub rau koj, thiab tso cov cim cim ntawm random.

Lub clarity thiab readability ntawm cov tshuaj tau muab coj mus rau hauv tus account nyias. Hauv txhua lub rooj sib tham hauv ntiaj teb lawv hais tias 80% ntawm tus programmer txoj haujlwm yog nyeem lwm tus neeg cov cai. Txawm tias cov menyuam kawm ntawv tau txais kev tshuaj xyuas cov cai - los ntawm lawv cov kws saib xyuas thiab los ntawm ib leeg. Yog li qhov kev ntsuas no nqa hnyav hnyav. Muaj cov haujlwm uas tsis muaj qhov hloov pauv ntev dua ib tus cim - thov tsis txhob ua qhov ntawd. Cov lus los ntawm cov neeg tuaj koom tau txhawb nqa heev - tshwj tsis yog cov uas zoo ib yam rau Stella Chang cov lus.

Cov txheej txheem kawg yog qhov muaj autotests. Tsuas yog ob peb tus neeg ntxiv lawv, tab sis rau txhua tus nws tau dhau los ua ib qho ntxiv hauv lawv cov karma.

Kev daws kom raug:

const solution = function(graph, START, FINISH)  {
    // Всё не бесплатно в этом мире
    const costs = Object.assign({[FINISH]: Infinity}, graph[START]);

    // Первая волна родительских нод
    const parents = { [FINISH]: null };
    Object.keys(graph[START]).reduce((acc, child) => (acc[child] = START) && acc, parents)

    const visited = [];
    let node;

    // Ищем «дешёвого» родителя, отмечаем пройденные
    do {
        node = lowestCostNode(costs, visited);
        let children = graph[node];
        for (let n in children) {
            let newCost = costs[node] + children[n];

            // Ещё не оценена или нашёлся более дешёвый переход
            if (!costs[n] || costs[n] > newCost) {
                costs[n] = newCost;
                parents[n] = node;
            }
        }
        visited.push(node);
    } while (node)

    return {
        distance: costs[FINISH],
        path: optimalPath(parents)
    };

    // Возврат назад по самым «дешёвым» родителям
    function optimalPath(parents) {
        let optimalPath = [FINISH];
        let parent = parents[FINISH];
        while (parent && parent !== START) {
            optimalPath.push(parent);
            parent = parents[parent];
        }
        optimalPath.push(START);
        return optimalPath.reverse();
    }

    // Минимальная стоимость из текущей ноды среди непросмотренных
    function lowestCostNode(costs, visited) {
        return Object.keys(costs).reduce((lowest, node) => {
            if (lowest === null || costs[node] < costs[lowest]) {
                if (!visited.includes(node)) {
                    lowest = node;
                }
            }

            return lowest;
        }, null);
    };
};

Txoj Haujlwm 3: Txheej xwm Calendar

Nws tau npaj los ntawm tus tsim tawm interface Sergey Kazakov thiab Alexander Podskrebkin.

Mob

Sau lub mini-calendar los tso saib koj lub sijhawm. Koj tuaj yeem ua txhua lub sijhawm koj nyiam. Piv txwv li, lub sijhawm ntawm kev sib tham pem hauv ntej hauv 2019.

Daim ntawv qhia hnub yuav tsum zoo li ib daim ntawv teev npe. Tsis muaj lwm yam kev cai tsim. Ua kom nws tuaj yeem teeb tsa kev ceeb toom 3, 7 thiab 14 hnub ua ntej. Tom qab thawj zaug rub tawm los ntawm Is Taws Nem, daim ntawv qhia hnub yuav tsum qhib thiab ua haujlwm offline.

Cov Khoom Siv Muaj Txiaj Ntsig

Frontend lub rooj sib tham teem caij:
confs.tech/javascript?topics=javascript%2Bcss%2Bux

Cov neeg ua haujlwm pabcuam:
developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers

Kev ceeb toom API:
developer.mozilla.org/ru/docs/Web/API/Notifications_API

Qhov thib peb txoj haujlwm yog qhov nthuav tshaj plaws rau kev sim, vim tias muaj ntau txoj kev daws teeb meem, txhua tus nrog lawv tus kheej. Peb tau kuaj xyuas seb tus neeg sib tw ua haujlwm li cas cov thev naus laus zis tsis paub - seb nws puas paub tshawb fawb, seb nws puas ntsuas nws cov kev daws teeb meem.

Kev Ntsuas

Folded daim ntawv qhia hnub. Yog, nws tseem yuav tsum tau muab tso tawm. Kuj tseem muaj cov neeg uas coj tus mob dhau lawm thiab tsis tau ntxig ib kab ntawm CSS code. Nws tsis zoo li ntxim nyiam heev, tab sis yog tias txhua yam ua haujlwm, cov ntsiab lus tsis txo qis.

Tau txais ib daim ntawv teev cov xwm txheej los ntawm ib qhov chaw. Qhov no tsis yog ib txoj haujlwm layout, yog li cov npe ntawm cov xwm txheej suav nrog nws tsis raug suav. Koj tuaj yeem tshem tawm lub rooj sib tham txhua lub sijhawm, rov teem sijhawm, lossis ntxiv ib qho tshiab. Yog li nws yog qhov yuav tsum tau txais cov ntaub ntawv los ntawm sab nraud thiab ua cov txheej txheem raws li JSON tau txais. Nws yog ib qho tseem ceeb kom tau txais cov ntaub ntawv nyob rau hauv txhua txoj kev (siv txoj kev fetch los yog siv XMLHttpRequest). Yog hais tias ib tug neeg ntxiv ib tug polyfill rau nqa thiab cim nws xaiv nyob rau hauv lub readme, qhov no yog suav tias yog ib tug ntxiv.

Kev pabcuam rau cov neeg ua haujlwm sau npe yam tsis muaj qhov yuam kev thiab ua haujlwm offline tom qab thawj download. Nov yog piv txwv tus neeg ua haujlwm pabcuam nrog lub sijhawm caching ntawm thawj khau raj. Paub meej txog cov neeg ua haujlwm pabcuam, lawv lub peev xwm thiab txoj hauv kev ua haujlwm nrog lawv (cov tswv yim ua haujlwm nrog caches, ua haujlwm offline) tuaj yeem pom ntawm no.

Muaj peev xwm teeb tsa kev ceeb toomyog li ntawd nws yeej ua haujlwm tom qab 3, 7, 14 hnub. Nws yog qhov tsim nyog kom nkag siab txog Kev Ceeb Toom API, txuas rau qhov twg yog txoj haujlwm. Peb tsis tau cia siab tias yuav muaj kev siv tshwj xeeb los xyuas seb nws puas yog lub sijhawm los thawb. Ib qho kev xaiv ua haujlwm tau txais: cia hauv localStorage, IndexDB lossis ib ntus pov npav los ntawm tus neeg ua haujlwm pabcuam. Nws tseem muaj peev xwm ua rau lub laub server (ntawm no Piv txwv), tab sis nws yuav tsis ua haujlwm offline. Nws yog qhov tseem ceeb sib npaug kom tau txais kev thawb tom qab nplooj ntawv raug kaw - thiab qhib tom qab qee lub sijhawm. Yog tias qhov kev ceeb toom tuag tib lub sijhawm uas nplooj ntawv raug kaw, qhov kev daws teeb meem tsis raug suav. Nws yog qhov txias thaum cov txiv neej xav txog cov neeg tshuaj xyuas thiab ua rau nws muaj peev xwm tau txais kev thawb tam sim no - yog li tsis txhob tos 3 hnub.

Muaj peev xwm tso lub icon ntawm lub desktop (PWA). Peb tshawb xyuas qhov muaj cov ntaub ntawv manifest.json nrog rau qhov tseeb icons. Qee tus txiv neej tau ua cov ntaub ntawv no (lossis tso nws tawm hauv CreateReactApp) - tab sis tsis ntxiv cov cim kom raug. Tom qab ntawd, thaum sim rau nruab, ib qho yuam kev zoo li "ib qho icon sib txawv yog xav tau" tshwm sim.

Codestyle thiab qhov project qauv. Raws li nyob rau hauv ob txoj hauj lwm, peb saib ntawm ib tug codestyle (txawm hais tias nws tsis coincide nrog peb li). Qee tus txiv neej ntsia hlau rau ntawm linters - qhov zoo heev.

Console yuam kev. Yog tias muaj qhov taw qhia txoj cai nyob rau hauv lub console tias ib yam dab tsi tsis ncaj ncees lawm, thiab tus neeg koom tsis tau xyuam xim rau nws, ces peb txiav cov ntsiab lus.

Cov txiaj ntsim tau los

Dab tsi funny txog cov neeg koom kev txiav txim siab:

• Ib daim ntawv nug uas muaj cov ntawv hauv qab no: “Ib tug phooj ywg programmer tau pab kuv ua ib daim ntawv thov React. Kuv tau foob nws nrog cov lus nug txog yuav ua li cas thiab yog vim li cas, thiab nws hais rau kuv. Kuv nyiam nws heev, kuv xav paub ntxiv txog nws. " Peb tau rooting rau daim ntawv thov no nrog tag nrho peb lub siab, tab sis hmoov tsis, tus neeg sib tw tus phooj ywg tsis tau txais txiaj ntsig zoo hauv kev ua daim ntawv thov ua haujlwm.
• Ib tus neeg sib tw tau xa ib qhov txuas mus rau GitHub, qhov twg RAR archive nyob - nws nyuaj rau kev tawm tswv yim txog qhov no. 🙂
• Lwm tus neeg sib tw, hauv kev tawm tswv yim ntawm thawj kab ntawm cov ntaub ntawv solution.js, ncaj ncees lees paub tias nws tau theej cov algorithm.

Peb tau txais daim ntawv thov los ntawm 76 tus neeg sib tw thiab xaiv 23 tus neeg. Peb tau xa daim ntawv nug tsis yog los ntawm Minsk, tab sis kuj los ntawm Moscow, St. Petersburg thiab txawm Tatarstan. Qee tus txiv neej ua rau peb xav tsis thoob nrog lawv txoj haujlwm tam sim no: ib tug ntawm lawv yog kws tshaj lij forensic, thiab lwm tus yog tub ntxhais kawm kho mob.

Qhov tshwm sim yog qhov nthuav dav ntawm kev ua tiav ntawm kev ua tiav cov haujlwm. Cov neeg tuaj koom ua tiav thawj txoj haujlwm los ntawm qhov nruab nrab ntawm 60%, qhov thib ob los ntawm 50%, thiab qhov thib peb yog qhov nyuaj tshaj plaws thiab tau ua tiav los ntawm qhov nruab nrab ntawm 40%.

Thaum xub thawj siab ib muag, cov dej num saib complex thiab siv sij hawm. Qhov laj thawj tsis yog tias peb xav tshem tawm cov neeg sib tw ntau li ntau tau. Thaum lawv kawm, cov tub ntxhais kawm tau ntsib nrog cov haujlwm hauv lub neej tiag tiag - ua kev sib tham, Yandex.Music rau menyuam yaus lossis Yandex.Weather rau cov neeg nyob ntawm huab cua. Rau qhov no koj xav tau lub hauv paus pib.

Kuv nco qab pom kuv txoj haujlwm nkag SRI ob xyoos dhau los thiab xav tias kuv yuav tsis daws nws. Qhov tseem ceeb ntawm lub sijhawm no yog zaum, ua tib zoo nyeem cov xwm txheej thiab pib ua. Nws hloov tawm tias cov xwm txheej muaj yuav luag 80% ntawm cov tshuaj. Piv txwv li, nyob rau hauv cov xwm txheej ntawm txoj haujlwm thib peb (qhov nyuaj tshaj plaws), peb tau ntxiv cov kev sib txuas rau cov neeg ua haujlwm pabcuam thiab Cov Ntawv Ceeb Toom API ntawm MDN. Cov tub ntxhais kawm ntawv uas kawm cov ntsiab lus ntawm kev sib txuas ua tiav nws yam tsis muaj teeb meem.

Kuv xav kom tsab xov xwm no tau nyeem los ntawm cov neeg sib tw uas npaj yuav nkag mus rau SRI yav tom ntej, uas tsis tuaj yeem nkag mus rau hauv Minsk Tsev Kawm Ntawv, lossis leej twg tab tom pib ua lwm yam haujlwm xeem. Raws li koj tau pom, nws muaj peev xwm ua tau heev. Koj tsuas yog yuav tsum ntseeg koj tus kheej thiab mloog tag nrho cov lus qhia los ntawm cov kws sau ntawv.

Tau qhov twg los: www.hab.com