ទោះជាយ៉ាងណាក៏ដោយការដោះស្រាយបច្ចុប្បន្នដែលបានជឿទុកថាវាជាការត្រឹមត្រូវចាប់ផ្តើមបង្ហាញពីកំណត់របស់វា - ដូចជាការយល់ដឹងអំពីការមិនមានប្រសិទ្ធិភាពនៃការបង្វិលបន្ទាប់ពីការប្រើម៉ាស៊ីនបង្វិល។ នេះគឺជាការប្រសិនបើ HackerNoon បានប្រើStyled Componentsក្នុងអំឡុងពេលវេលាវាត្រូវបានផ្ដល់នូវសេវាកម្មល្អរបស់យើងដោយផ្តល់នូវប្រភេទដែលមានទំហំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំTailwind CSSនៅពេលវេលាវាត្រូវបានបង្ហាញថា achange was overdue.
អត្ថបទនេះគឺជាការផ្លាស់ប្តូរនៃការផ្លាស់ប្តូររបស់យើងពី Styled Components ទៅ Tailwind CSS, ហេតុអ្វីដែលយើងបានធ្វើការផ្លាស់ប្តូរនេះ, តើខ្ញុំបានចូលទៅក្នុងការផ្លាស់ប្តូរនេះដូច្នេះនិងដំណើរការនេះបានមើលទៅដូច្នេះនៅពេលនេះ។ ប្រសិនបើអ្នកកំពុងធ្វើការជាមួយប្រភេទប្រវត្តិសាស្រ្តដែលមានប្រសិទ្ធិភាពឬការគិតពី Tailwind សម្រាប់គម្រោងរបស់អ្នក, សូមអរគុណថាវាផ្តល់ឱ្យអ្នកនូវអ្វីដែលមានប្រសិទ្ធិភាព (ឬទាន់តែមានប្រសិទ្ធិភាព) ដើម្បីដោះស្រាយជាមួយ។
ហេតុអ្វី HackerNoon បានប្រើសម្រាប់ឧបករណ៍ Styled
ខ្ញុំមិនជាផ្នែកមួយនៃក្រុមនេះនៅពេលដែល Styled Components ត្រូវបានជ្រើសរើសដំបូងដើម្បីដំណើរការ CSS របស់យើង, ប៉ុន្តែនៅពេលនេះ,Tailwind CSS hadn’t even been released, និង Styled Components បានធ្វើអត្ថប្រយោជន៍ជាច្រើនសម្រាប់អគ្គិសនី front-end នៃ HackerNoon ។
It allowed developers to write CSS directly within JavaScript, making components fully self-contained. This approach felt very “React-native” in nature—encapsulated, reusable, and, at the time, thought to be easier to maintainការបង្កើតប្រសិទ្ធិភាពរចនាសម្ព័ន្ធច្នៃប្រឌិត, ការគាំទ្រច្នៃប្រឌិតច្នៃប្រឌិតនិងសមត្ថភាពដើម្បីផ្លាស់ប្តូរគោលបំណងដោយផ្ទាល់ទៅក្នុងប្រភេទបានធ្វើការយ៉ាងល្អសម្រាប់ទំហំទូលំទូលាយនៃទំព័រនិងការរចនាសម្ព័ន្ធដែលយើងបានបង្កើត។ ក្នុងរយៈពេលវែង,Styled Components served HackerNoon wellនេះ។
តើអ្វីបានធ្វើឱ្យយើងគួរតែផ្លាស់ប្តូរទៅ Tailwind?
ក្នុងអំឡុងពេលវេលាកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិតកម្រិត។
Components Styled បានផ្តល់ឱ្យយើងនូវការលំអិតប៉ុន្តែវាបានមានតម្លៃ:larger bundle sizesលោកruntime performance hitsនិង acluttered component structureវាគឺជាការងាយស្រួលក្នុងការរក្សាទុកប្រភេទឬដំណើរការវាដោយមានប្រសិទ្ធិភាពដោយគ្មានការចាក់កូដ។
យើងក៏បានរកឃើញថ្នាំរបស់យើងជាច្រើនត្រូវបានប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រTailwind CSSគោលបំណងដំបូងនៃឧបករណ៍ប្រើប្រាស់គួរឱ្យចាប់អារម្មណ៍ដូចជាវិធីដើម្បីប្រសើរឡើងអ្វីគ្រប់យ៉ាង - ពីការរចនាសម្ព័ន្ធទៅនឹងការឆ្លើយតបនិងបន្ថែមទៀត។
សូមអរគុណសម្បត្តិ: សម្រាប់ asmall dev team like HackerNoon’s, គំនិតនៃការ refactoring កម្រិតខ្ពស់ codebaseline by lineវាគឺជាការពិតណាស់ដែលយើងមិនអាចបាត់បង់បានពីរបៀបដែល Tailwind ត្រូវបានទទួលបានយ៉ាងទូលំទូលាយនៅក្នុងសហគមន៍អភិវឌ្ឍន៍។ យើងចង់ចូលទៅក្នុង។
តើធ្វើដូចម្តេចដើម្បីធ្វើឱ្យ Switch
នេះជាផ្នែកសំខាន់បំផុតនៃការផ្លាស់ប្តូរនេះ?Setup.
ការដំឡើង Tailwind គឺជាការងាយស្រួលប៉ុន្តែបន្ទាប់ពីវាបានបើកដំណើរការរចនាសម្ព័ន្ធទូទាំងពិភពលោកនៃ Tailwind - ដោយគុណដល់ការ Preflight - បានចាប់ផ្តើមជំរុញជាមួយនឹងឧបករណ៍ដែលយើងមាន។ រចនាសម្ព័ន្ធត្រូវបានកាត់បន្ថយខាងលិចនិងខាងលិច។
សត្វសត្វសត្វសត្វសត្វសត្វសត្វសត្វសត្វសត្វpreflight: falseនៅក្នុងtailwind.config.jsប្រព័ន្ធ ប្រតិបត្តិការdisabled most of Tailwind’s base resetsសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យ
នៅទីនេះខ្ញុំគួរតែestablish new conventions—ប្រសិនបើយើងនឹងដំណើរការរចនាសម្ព័ន្ធទូទាំងពិភពលោក, ការប្រើប្រាស់បណ្តុះបណ្តាល, និងបង្កើតឧបករណ៍ដែលមានជំនាញវិជ្ជាជីវៈជាមួយ Tailwind ។ នៅពេលដែលមូលដ្ឋាននេះត្រូវបានដាក់, ខ្ញុំបានរៀបចំដើម្បីបង្កើត។
នេះគឺជាផ្នែកមួយដែលខ្ញុំមិនអរគុណនៅពេលនេះ:AI made this process actually enjoyable.
ការធ្វើបច្ចុប្បន្នភាពប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហ
Now, let me be honest:អាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានmanual coding and plenty of hoursBut having a solid base to start from made things so much easier. សៀវភៅរបស់ Tailwind also helped fill the gaps, and once I fully embraced theutility class mindsetអ្វីដែលបានចាប់ផ្តើមដើម្បីចុច។
តើធ្វើដូចម្តេចដើម្បីធ្វើឱ្យទំហំទំហំទំហំទំហំទំហំទំហំ
ខ្ញុំមានអារម្មណ៍ថាTailwind is now live on HackerNoon!
ឥឡូវនេះ, ការHackerNoon Homepage is fully convertedវាត្រូវបានគេហៅថា CSS, ជាមួយនឹង Styled Components បានបាត់បន្ថយយ៉ាងពេញលេញ។ កន្លែងផ្សេងទៀតជាច្រើននៅតែផ្អែកលើ Styled Components ហើយពួកគេនឹងត្រូវបានផ្លាស់ប្តូរយ៉ាងច្បាស់។one component, one page at a timeនេះ។
ទំព័រដើម HackerNoon ត្រូវបានផ្លាស់ប្តូរយ៉ាងពេញលេញ
ការធ្វើតេស្តនេះគឺជាការប្រសើរឡើងយ៉ាងឆាប់រហ័ស។ ការធ្វើតេស្តទាំងអស់នេះបានផ្តល់ឱ្យខ្ញុំនូវឱកាសដើម្បីrevisit and improveការរចនាសម្ព័ន្ធនិងរចនាសម្ព័ន្ធនៃទំព័ររបស់យើង។ លើសពីការផ្លាស់ប្តូរ Tailwind យើងបានបង្កើតmore modern UIការប្រើប្រាស់ដំណឹងល្អប្រសើរជាងមុន, ផ្នែកថ្មីនិងបន្ថែមទៀតcustom-built theme pickerនេះជាការដែលធ្វើឱ្យប្រព័ន្ធប្រវត្តិសាស្រ្តប្រវត្តិសាស្រ្តរបស់យើងមានភាពខុសគ្នាត្រូវបានកាត់បន្ថយ។
បន្ទាប់ពីធ្វើការនៅ HackerNoon ក្នុងរយៈពេលជាង 4 ឆ្នាំខ្ញុំមានអារម្មណ៍ថាreignitedទោះជាយ៉ាងណាក៏ដោយវាបានធ្វើឱ្យការសាងសង់មានភាពងាយស្រួលហើយវាមានភាពងាយស្រួលនិងមានប្រសិទ្ធិភាព - ហើយខ្ញុំមានអារម្មណ៍ថានឹងរក្សាទុកការផ្លាស់ប្តូរមុនពេលនេះ។ អ្នកគួរតែដឹងទេ? ដូច្នេះប្រសិនបើយើងនឹងរក្សាទុកវាយ៉ាងឆាប់រហ័ស។styled-componentsពីយើងpackage.jsonសូមអរគុណ 😉
គំនិតច្នៃប្រឌិតចុងក្រោយ
ការផ្លាស់ប្តូរទៅ Tailwind CSS គឺមិនមែនគ្រាន់តែជាការផ្លាស់ប្តូរសៀវភៅរចនាសម្ព័ន្ធ - វាគឺជាការធ្វើឱ្យប្រសើរឡើងប្រព័ន្ធប្រតិបត្តិការ frontend របស់យើង, ការទទួលយកភាពរចនាសម្ព័ន្ធនិងការប្រសើរឡើងប្រសើរជាងមុន។ ខណៈពេលដែល Styled Components បានជួយរចនាសម្ព័ន្ធអ៊ីនធឺណិតរបស់ HackerNoon ក្នុងអំឡុងពេលអភិវឌ្ឍន៍សំខាន់, Tailwind បានផ្តល់ឱ្យយើងនូវភាពងាយស្រួលflexibility, speed, and maintainabilityដូច្នេះយើងគួរតែរក្សាទុកការកើនឡើង។
វាគឺជាការធ្វើការនៅពេលនេះ - កម្មវិធីរបស់យើងក៏មានផ្នែកផ្នែក Styled ច្រើនទៀត - ប៉ុន្តែមើល Tailwind រស់នៅលើគេហទំព័ររបស់យើងនិងនៅក្នុងផ្នែកផ្នែកដែលបានធ្វើឡើងឡើងវិញថ្មីនេះគឺជាការប្រសើរឡើងខ្លាំងណាស់។ ការពិតដែលខ្ញុំអាចបំពាក់ AI ជាមួយជំនាញរបស់ខ្ញុំដើម្បី refactor លឿនជាងនេះបានធ្វើឱ្យការផ្លាស់ប្តូរនេះមិនត្រឹមតែអាចធ្វើបានទេប៉ុន្តែមានអារម្មណ៍។
HackerNoon គឺជាការអភិវឌ្ឍ, និងរចនាសម្ព័ន្ធរបស់យើងបានអភិវឌ្ឍជាមួយនឹងវា. One component at a time.
