JavaRush /Java блогу /Random-KY /GitHub'тун 12 укмуштуудай өзгөчөлүктөрү
Max Stern
Деңгээл
Нижний Новгород

GitHub'тун 12 укмуштуудай өзгөчөлүктөрү

Группада жарыяланган
Өмүр бою мен эч кандай киришүү жөнүндө ойлоно албайм, ошондуктан...
GitHub өзгөчөлүктөрү

Кичинекей сөздүк

Git терминдери жана башка программалоочу сөздөр көбүнчө котормосу жок колдонулгандыктан, мен аларды которбоону чечтим. Мен аларга бул жерде, тартип үчүн, бул макаладагы терминдердин "деcodeдоо" менен кыскача котормосун берем.

Айры - "айры". Негизи, сиз долбоордун негизинде бир нерсени тактоо үчүн өзүңүзгө көчүрөсүз.

Тартуу өтүнүчү - өзгөртүү өтүнүчү. Өзгөртүүлөрүңүздү репозиторийге кароого жөнөтүү (башкача айтканда, бул code репозиторийдин ээси же жумушчу кесиптештер тарабынан ырасталгандан кийин гана негизги долбоорго кошулат)

Тартуу - GitHub проектисин "тартуу" (мисалы, компьютериңиздеги IDEге).

Push - GitHub үчүн жергorктүү машинадан долбоорду "түртүрүү"

#1 GitHub.com сайтындагы түзөтүү codeу

Мен баары мурунтан эле билет деп ойлогон нерседен баштайм (бирок мен жеке өзүм бир жума мурун бул жөнүндө эч кандай түшүнүк жок болчумун). GitHub'да каалаган репозиторийдеги каалаган текст файлын көрүп жатканда, сиз жогорку оң жакта кичинекей карандашты көрө аласыз. Эгер сиз аны бассаңыз, бул файлды түзөтө аласыз. Бүткөндөн кийин, Файлды өзгөртүүнү сунуштоо баскычын чыкылдатыңыз жана GitHub айры жана Тартуу өтүнүчүн түзөт. Укмуштуудай, туурабы? Ал айрыны өзү жаратат! Кодду өзүңүзгө жүктөөнүн жана жергorктүү түрдө өзгөртүүлөрдү киргизүүнүн жана аны GitHub'га Pull Request менен кайра жөнөтүүнүн кереги жок. Минималдуу түзөтүүлөрдү жасоо керек болсо, абдан ыңгайлуу.
GitHub 12 укмуштуудай өзгөчөлүктөрү - 1
чыныгы Тартуу өтүнүчү эмес

#2 Сүрөттөрдү киргизүү

Көйгөйдүн сүрөттөлүшү тексттик комментарийлер менен эле чектелбейт. Сүрөттөрдү түздөн-түз алмашуу буферинен чаптай аларыңызды билесизби? Чабылганда, анын жүктөлүп берилгенин (булутка, шексиз) жана сүрөттү көрсөтүү үчүн белгиге айланганын көрөсүз. Керемет!

№3 Код форматтоо

Эгер сизге code блогун жазышыңыз керек болсо, анда үч арткы белгиден баштаңыз жана GitHub сиз кайсы программалоо тorнде жазып жатканыңызды болжолдоого аракет кылат. Бирок эгер сиз Vue, Typescript же JSX сыяктуу программалоо тorнде codeдун бөлүгүн жарыялап жатсаңыз, синтаксисти бөлүп көрсөтүү туура болушу үчүн тилди ачык көрсөтсөңүз болот. Биринчи саптагы ```jsxке көңүл буруңуз:
GitHub 12 укмуштуудай өзгөчөлүктөрү - 2
... code үзүндүнүн туура көрсөтүлүшүн камсыз кылуу:
GitHub 12 укмуштуудай өзгөчөлүктөрү - 3
(Баса, бул Gistке да тиешелүү. Эгер сиз өзөк үчүн .jsf кеңейтүүсүн көрсөтсөңүз, JSF синтаксиси баса белгиленет). Бул жерде бардык колдоого алынган синтаксистердин тизмеси .

#4 Тартуу өтүнүчтөрүндө "сыйкырдуу сөздөрдү" колдонуу менен көйгөйлөрдү жабуу

№234 маселени оңдогон Тартуу өтүнүчүн түздүңүз дейли. Сурамыңыздын сүрөттөмөсүнө (же өзгөртүү сурамынын комментарийинин каалаган жерине) "№234 көйгөйдү оңдоо" текстин киргизсеңиз болот. Андан кийин, Тартуу өтүнүчүн бириктирүү көйгөйдү "автоматтык түрдө" жабат. Сонун, туурабы? Бул тууралуу documentацияда көбүрөөк маалымат бар .

#5 Комментарийлерге шилтеме

Сиз качандыр бир убакта белгилүү бир комментарийге шилтеме түзүшүңүз керек болуп калдыбы жана кантип билбедиңиз? Ал күндөр артта калды, анткени мен сизге бир сырды ачып берем: комментарийге шилтеме түзүү үчүн, сиз жөн гана аталыштын жанындагы датаны/убакытты чыкылдатыңыз.
GitHub өзгөчөлүктөрү
Карачы, геарондун азыр сүрөтү бар!

№6 Код шилтемеси

Ошентип, сиз codeдун белгилүү бир сабына шилтеме түзгүңүз келет. Бул учурда, муну байкап көрүңүз: Ачык файлдагы керектүү codeдун жанындагы саптын номерин басыңыз. Вау, көрдүңбү? URL өзгөрдү, саптын номери азыр көрүнүп турат! Эгер сиз SHIFT баскычын басып туруп, башка саптын номерин бассаңыз, анда voila! – URL кайра өзгөрөт жана саптардын диапазону баса белгиленет. Бул URL азыр бул файлды жана саптардын ушул диапазонун көрсөтөт. Бирок күтө тур, ал учурдагы жипти көрсөтөт. Файл өзгөрсө эмне болот? Бул учурда сизге, балким, учурдагы абалындагы файлга туруктуу шилтеме керек. Мен абдан жалкоомун, андыктан жогорудагылардын баарынын бир скриншотун алдым:
GitHub өзгөчөлүктөрү
Баса, URL даректери тууралуу...

#7 GitHub URL дарегин буйрук сабы катары колдонуу

UI аркылуу GitHub аркылуу навигация абдан ыңгайлуу уюштурулган. Бирок кээде белгилүү бир жерге жетүү үчүн аны URL дарегине терүү тезирээк болот. Мисалы, мен иштеп жаткан фorалга барып, анын мастерге кандай салыштырарын көргүм келсе, репозиторийдин атынан кийин жөн гана /салыштыруу/фorал атын жазсам болот. Бул мени ошол фorалдын айырма барагына алып барат:
GitHub өзгөчөлүктөрү
Бирок бул башкы бутактан айырмачылыктар, бирок мен мурун интеграциялык бутагы менен иштеген болсом, URL дарегине /салыштыруу/интеграция-бланч...my-branch киргизе алам.
GitHub өзгөчөлүктөрү
Ыкчам баскычтарды сүйгөндөр үчүн: CTRL+L же CMD+L курсорду URL тилкесине жылдырат (жок дегенде Chrome жана Firefox браузерлеринде). Бул браузердин автотолтуруусу менен айкалышып, бутактардын ортосунда навигацияны кыйла жеңилдетет. Профессионалдык кеңеш: Chrome'дун автотолтуруучу сунуштары боюнча чабыттоо үчүн жебелерди колдонуңуз жана тарыхтан нерселерди алып салуу үчүн SHIFT+DELETE басыңыз (мисалы, бутакты бириктиргенден кийин). (Мен SHIFT + DELETE сыяктуу боштук койсом, бул кыска жол баскычтарын окуу оңой болобу, билбейм. Бирок техникалык жактан "+" алардын бир бөлүгү эмес, андыктан бул параметр мага жаккан жок. Бул Ушул сыяктуу нерселерден улам мен түнкүсүн уктабайм, Ронда.)

#8 Көйгөйлөр үчүн тизмелерди түзүңүз

Көйгөйүңүздүн сүрөттөмөсүндө белги кутучасын каалайсызбы?
GitHub өзгөчөлүктөрү
Жана сиз тизмеден маселени көргөндө "5тин 2си" сыяктуу кооз тилке пайда болушун каалайсызбы?
GitHub өзгөчөлүктөрү
Эч кандай көйгөй жок! Төмөнкү синтаксистин жардамы менен интерактивдүү кутучаларды түзө аласыз:
  • [ ] Экрандын туурасы (бүтүн сан)
  • [x] Кызмат кызматкерлерин колдоо
  • [x] Колдоо алуу
  • [ ] CSS flexbox колдоосу
  • [ ] Ыңгайлаштырылган элементтер
Синтаксис: боштук, дефис, боштук, ачылуучу квадрат кашаа, боштук (же х), жабылуучу квадрат кашаа, боштук жана кээ бир сөздөр. Андан кийин, сиз чындыгында бул баскычтарды текшерип/жокко чыгара аласыз! Эмнегедир бул мага кандайдыр бир техникалык сыйкыр сыяктуу сезилет. Сиз кутучаларды белгилей аласыз! Жана ошол эле учурда баштапкы текст өзгөрөт! Алар мындан ары эмнени ойлоп табат деген коркунучтуу. О, жана бул көйгөй долбоордун панелинде болсо, анда прогресс ошол жерде да көрсөтүлөт:
GitHub өзгөчөлүктөрү
Эгер сиз "долбоорлор панели" деп эмнени айткым келгенин түшүнбөсөңүз - төмөндө окуңуз. Бул баракта бир нече сантиметр төмөн.

GitHub ичиндеги №9 Долбоор панелдери

Ири долбоорлор үчүн мен дайыма Jira колдончумун. Ал эми жеке долбоорлорум үчүн мен ар дайым Trello колдончумун. Мага бул куралдардын экөө тең жагат. Мен бир нече жума мурун GitHub репозиторийдин Долбоорлор өтмөгүндө өзүнүн вариантын сунуштаганын билгенде , мен Trello менен иштеген тапшырмалар топтомун кайталоо мааниси бар деп ойлогом.
GitHub өзгөчөлүктөрү
Бул жерде күлкүлүү эч нерсе жок. Эми GitHub долбоорунда да ошол эле нерсе:
GitHub өзгөчөлүктөрү
Акырындык менен көзүңүз контрасттуу сүрөткө көнүп калат
Ылдамдык үчүн, мен жогоруда айтылгандардын бардыгын эскертмелер катары коштум, алар GitHub "чыныгы" маселелер эмес. Бирок GitHubдагы маселелерди башкаруунун күчү анын репозиторийдин калган бөлүгү менен интеграциясында жатат - андыктан репозиторийден куралдар тактасына учурдагы маселелерди кошуу жакшыраак. Жогорку оң бурчтагы Карталарды кошуу баскычын чыкылдатып , эмнени кошкуңуз келгенин табыңыз. Бул жерде атайын издөө синтаксиси жардамга келет : мисалы, is :pr is:open түрүн жана сиз каалаган ачык Тартуу өтүнүчүн панелге сүйрөсөңүз болот, же кээ бир мүчүлүштүктөрдү оңдоо керек болсо label:bug .
GitHub өзгөчөлүктөрү
Сиз ошондой эле учурдагы жазууларды маселелерге айландырсаңыз болот.
GitHub өзгөчөлүктөрү
Акыр-аягы, учурдагы көйгөй формасынан аны оң панелдеги долбоорго кошуңуз.
GitHub өзгөчөлүктөрү
Ал ошол долбоордун панелинин триаж тизмесине кирет, андыктан аны кайсы тилкеге ​​коюуну тандай аласыз
"Тапшырманын" сүрөттөлүшү бул тапшырманы ишке ашыруучу code менен бир репозиторийде болгондо, бул абдан (өтө) ыңгайлуу. Бул көп жылдардан кийин сиз Jira/Trello/башка жерде анын баарын байкабай туруп, codeдун сызыгында git blame иштетип, ошол сызыкка алып келген маселенин баарын түшүнө аласыз дегенди билдирет .

Кемчorктер

Акыркы үч жумада мен Жиранын ордуна GitHub'та баарын жасоону сынап көрдүм (кичинекей долбоордо, Канбан стorнде) жана аны жакшы көрөм. Бирок мен муну Scrum долбоору үчүн элестете албайм, анда өнүгүү ылдамдыгы жана башка ушул сыяктуу нерселер туура бааланып, эсептелиши керек. Жакшы жаңылык, GitHub долбоорлорунда "өзгөчө өзгөчөлүктөр" ушунчалык аз болгондуктан, башка системага өтүү көп убакытты талап кылbyte. Андыктан аракет кылып көрүңүз жана сизге канчалык жага турганын көрүңүз. Бул канчалык маанилүү экенин билбейм, бирок мен ZenHub жөнүндө угуп , аны 10 мүнөт мурун биринчи жолу ачкам. Бул негизинен GitHub кеңейтүүсү, анда сиз маселелерге баа берип, "эпосторду" жана көз карандылыктарды түзө аласыз. Өнүгүү ылдамдыгы жана күйүп кетүү графиктери бар; Бул жөн эле укмуштуудай көрүнөт. Андан ары окуу: Долбоорлор боюнча GitHub documentтери.

#10 Gwiki

Уикипедия сыяктуу структураланбаган баракчалар үчүн GitHub Wiki (мен мындан ары Gwiki деп атайм) сонун. Барактардын структураланган топтому үчүн - мисалы, documentтериңиз сыяктуу - анчалык деле көп эмес. "Бул барак тигинин баласы" деп айтууга эч кандай жол жок, "Кийинки бөлүм" жана "Мурунку бөлүм" баскычтары сыяктуу ыңгайлуу нерселер жок. Гансель менен Гретель бул жерде сөзсүз адашып кетишмек, анткени бул жерде да “нан күкүмдөрү” (атайын мүчүлүштүктөрдү оңдоо операторлору – болжол менен котормо) жок. (Authorдун эскертүүсү: Бул окуяны окудуңуз беле ? Бул жөн эле адамгерчorксиздик. Эки жаш бандит ачка кемпирди өлтүрүп, өз мешинде тирүүлөй өрттөп жиберишет . Анан албетте, эч ким түшүнбөй тургандай башаламандыкты калтырып кетишти. Менимче ушундан улам. Азыркы жаштар тозоктой сезгич – балдарга уктаар алдында окулган жомоктор азыркы күндө өтө катаал эмес!) Улантуу – Gwiki'ни чындап сынап көрүү үчүн, мен NodeJSден вики баракчалары катары бир нече барактарды киргиздим, анан салт түздүм. сайттын чыныгы түзүмүн окшоштуруу үчүн каптал тилкеси. Бул каптал тилкеси ар дайым бар, бирок учурдагы барак өзгөчөлөнгөн эмес. Шилтемелер кол менен жүргүзүлүшү керек, бирок жалпысынан баары жакшы иштейт. Кааласаңыз, карап көрсөңүз болот :
GitHub өзгөчөлүктөрү
Бул GitBook ( Redux documentтеринде колдонулат ) же атайын веб-сайт сыяктуу нерсе менен атаандаша алbyte. Бирок бул анын 80% жакшы жана баары сиздин репозиторийиңизде. Мен мунун жөн гана күйөрманымын. Эгер сиз жалгыз README.md файлынан ашып кетсеңиз жана колдонуучу колдонмолору же деталдуу documentтер үчүн бир нече ар кандай барактар ​​керек болсо, Gwiki менен карманууну сунуштайм. Түзүмдүн/навигациянын жоктугу сизди тынчсыздандырса, башка нерсеге өтүңүз.

№11 GitHub баракчалары

Сиз GitHub баракчаларын статикалык веб-сайтты өткөрүү үчүн колдонсо болорун билесиз. А эгер сиз билбесеңиз, анда азыр билесиз. Бирок, бул бөлүм конкреттүү бир темага арналган: веб-сайтты түзүү үчүн Jekyll колдонуу. Жөнөкөй түрдө GitHub Pages + Jekyll README.md файлын жакшы көрүнгөн теманы колдонуп көрсөтө алат. Мисалы, about-github сайтынан менин Readme барагымды карап көрүңүз :
GitHub өзгөчөлүктөрү
Эгер сиз бул GitHub сайтынын орнотуулар өтмөгүнө чыксаңыз, GitHub баракчаларын иштетиңиз жана Jekyll темасын тандаңыз...
GitHub өзгөчөлүктөрү
Андан кийин биз Jekyll темасынын стorндеги баракчаны алабыз :
GitHub өзгөчөлүктөрү
Андан кийин сиз GitHub'ту CMSге айлантып, негизинен оңой түзөтүлүүчү белгилөө файлдарына негизделген бүтүндөй статикалык сайтты түзө аласыз. Мен муну чындыгында колдоно элек болсом да, веб-сайттар React аркылуу Bootstrap фреймворкунун жардамы менен ушундайча курулат, андыктан бул жерде коркунучтуу эч нерсе жок. Мен Ruby жергorктүү машинада иштеп жатканын белгилейм (Windows колдонуучулары бул жерде түшүнүү менен карашат жана башка жол менен кетишет, macOS колдонуучулары: "Эмне көйгөй бар, кайда бара жатасың? Ruby универсалдуу платформа! GEMS да бар. пакетти башкаруу системасы!") (Ошондой эле GitHub баракчаларында "Агрессивдүү же коркунучтуу мазмунга же жүрүм-турумга" жол берилбейт, андыктан Hansel жана Gretel окуясынын versionсын ал жерге жайгаштыра албай каласыз).

Менин оюм

Мен GitHub Pages + Jekyll айкалышын канчалык көп карасам (бул макала үчүн), мен ошончолук бул идея кызыктай жыттанып кетти деп ойлодум. "Аз күч менен өзүңүздүн веб-сайтыңызды түзүү" идеясы сонун. Бирок анын үстүндө иштөө үчүн сизге дагы эле жергorктүү машинадагы учурдагы version керек. Жана ушунчалык "жөнөкөй" нерсе үчүн буйрук сабынын буйруктары өтө көп. Баштоо бөлүмүндөгү жети баракты барактап чыктым жана бул жерде бир гана жөнөкөй нерсе мен экенимди сездим . Мен негизги беттин жөнөкөй синтаксисин же жөнөкөй "Суюк тилге негизделген калыптоо механизминин" негиздерин түшүнө элекмин. Мен өзүм веб-сайт жазгым келет! Чынын айтсам, Фейсбук муну React documentтери үчүн колдонуп жатканына таң калдым, анткени алар React аркылуу жардам тутумунун баракчаларын түзүп, күн сайын статикалык HTML файлдары катары алдын ала көрсөтүүгө мүмкүнчүлүк алышат . Алар эмне кылышы керек болсо, алар CMSден келген сыяктуу учурдагы белгилөө файлдарын алуу жолун табуу. Эмне болсо...

№12 GitHub CMS катары колдонуу

Бизде кандайдыр бир тексти бар веб-сайтыбыз бар дейли, бирок биз ал текстти HTML белгилөө катары сактагыбыз келбейт. Анын ордуна, биз иштеп чыгуучу эмес колдонуучулар оңой түзөтө ала турган тексттин бөлүктөрүн сактагыбыз келет. Кээ бир version опциясы менен. Балким, ал тургай, кесиптештерин карап чыгуу процесси менен. Бул жерде мен сунуштайм: текстти сактоо үчүн репозиторийде сакталган белгилөө файлдарын колдонуңуз. Ал эми кардар тарабында тексттин бул бөлүктөрүн чыгарып, аларды баракта көрсөтө турган компонентти колдонуңуз. Мен Reactтин күйөрманымын, ошондуктан бул жерде туура <Markdown> компонентинин мисалы келтирилген, ал белгилөө файлына жол берилгенде, аны чыгарып, талдап, HTML катары көрсөтөт.
class Markdown extends React.Component {
    constructor(props) {
      super(props);

      // Конечно, вам нужно заменить это на свой URL
      this.baseUrl = 'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets';

      this.state = {
        markdown: '',
      };
    }

    componentDidMount() {
      fetch(`${this.baseUrl}/${this.props.url}`)
        .then(response => response.text())
        .then((markdown) => {
          this.setState({markdown});
        });
    }

    render() {
      return (
        <div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />
      );
    }
}
(Мен HTMLде белгилөө талдоо үчүн бул жерде npm белгиленген пакетти колдоном) URL менин үлгү репозиторийимди көрсөтөт, анда /text-snippets каталогунда белгилөө файлдары бар . (Сиз ошондой эле мазмунду алуу үчүн GitHub API колдонсоңуз болот , бирок бул сизге керек болот деп күмөнүм бар.) Сиз бул сыяктуу компонентти колдонсоңуз болот:
const Page = () => (
  <div className="page">
    <div className="about-us">
      <Markdown url="about-us.md" />
    </div>

    <div className="disclaimer">
      <p>A very important disclaimer:</p>

      <Markdown url="disclaimers/home-page-disclaimer.md" />
    </div>
  </div>
);
Ошентип, азыр GitHub сиз жайгаштыргыңыз келген тексттин бөлүктөрү үчүн сиздин CMS катары иштейт. Жогорудагы мисалда белгилөө компонент браузерге жүктөлгөндөн кийин гана чыгарылат. Эгер сизге статикалык сайт керек болсо, аны serverде көрсөтүшүңүз керек болот. Жакшы кабар! Сервердеги бардык белгилөө файлдарын алуудан эч нерсе тоскоол болбойт (каалаган кэштөө стратегиясын колдонуу менен). Эгер сиз бул жолго барууну чечсеңиз, каталогдогу бардык белгилөө файлдарынын тизмесин алуу үчүн GitHub API колдонуу мааниси бар. Бонус - GitHub утorталары! Мен бир топ убакыттан бери Octotree Chrome кеңейтүүсүн колдонуп жатам жана аны сизге сунуштайм. Резервсиз эмес, бирок мен дагы эле сунуштайм. Ал сиз карап жаткан репозиторийдин дарак көрүнүшү менен сол жактагы панелди көрсөтөт.
GitHub өзгөчөлүктөрү
Жана бул видеодон мен октобокс жөнүндө билдим , ал дагы мага ушул убакка чейин абдан жакшы жардамчы болуп көрүнөт. Бул сиздин GitHub көйгөйлөрүңүздүн кутусу. Бул сиз ал жөнүндө бorшиңиз керек. Түстөр жөнүндө айтсам, сизди коркутуп албаш үчүн жогорудагы бардык скриншотторду жеңил темада тарттым. Бирок мен башка бардык нерселерде кара түстөрдү жактырсам, анда эмне үчүн өлүмгө дуушар болгон GitHub менен чыдай берем?
GitHub өзгөчөлүктөрү
Бул жерде мен Chrome серепчиси үчүн Stylish кеңейтүүсүнүн (ал темаларды каалаган веб-сайтка колдоно алат) жана GitHub Dark стorнин айкалышын колдондум . Жана башталгычтар үчүн, GitHub иштеп чыгуучу куралдарынын караңгы темасы (курулган, аны иштетишиңиз керек) жана Chrome үчүн Atom One Dark темасы .

Bitbucket

Тактап айтканда, бул жерде таптакыр туура эмес, бирок мен Bitbucket жөнүндө айтпай коё албайм. Эки жыл мурун мен бир долбоор баштап, жарым күн бою мыкты гит хостингди тандоого жумшадым. Ошентип, Bitbucket олуттуу айырма менен утуп алды. Алардын codeун карап чыгуу куурлары атаандаштыктан алда канча алдыда (бул GitHub серепчи деген түшүнүккө ээ болгонго чейин эле болгон). Ошондон бери, GitHub да сын-пикирлерди алган. Тилекке каршы, менде акыркы бир жылда Bitbucketти колдонууга мүмкүнчүлүк болгон жок - балким, алар дагы бир нерседе алдыга жылды. Андыктан мен git хостинг кызматын тандоого жооптуу болгондорго Bitbucketке көңүл бурууну сунуштайм.

Корутунду

Баары болду! Мен сизге мурда белгисиз болгон үч нерсени айтып бере алдым деп үмүттөнөм. Ошондой эле, менин макаламды окуп жакшы убакыт өттү деп үмүттөнөм.
Комментарийлер
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION