ទោះជាយ៉ាងណាក៏ដោយការដោះស្រាយបច្ចុប្បន្នដែលបានជឿទុកថាវាជាការត្រឹមត្រូវចាប់ផ្តើមបង្ហាញពីកំណត់របស់វា - ដូចជាការយល់ដឹងអំពីការមិនមានប្រសិទ្ធិភាពនៃការបង្វិលបន្ទាប់ពីការប្រើម៉ាស៊ីនបង្វិល។ នេះគឺជាការប្រសិនបើ HackerNoon បានប្រើ ក្នុងអំឡុងពេលវេលាវាត្រូវបានផ្ដល់នូវសេវាកម្មល្អរបស់យើងដោយផ្តល់នូវប្រភេទដែលមានទំហំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំទូលំ នៅពេលវេលាវាត្រូវបានបង្ហាញថា a Styled Components Tailwind CSS change was overdue. អត្ថបទនេះគឺជាការផ្លាស់ប្តូរនៃការផ្លាស់ប្តូររបស់យើងពី Styled Components ទៅ Tailwind CSS, ហេតុអ្វីដែលយើងបានធ្វើការផ្លាស់ប្តូរនេះ, តើខ្ញុំបានចូលទៅក្នុងការផ្លាស់ប្តូរនេះដូច្នេះនិងដំណើរការនេះបានមើលទៅដូច្នេះនៅពេលនេះ។ ប្រសិនបើអ្នកកំពុងធ្វើការជាមួយប្រភេទប្រវត្តិសាស្រ្តដែលមានប្រសិទ្ធិភាពឬការគិតពី Tailwind សម្រាប់គម្រោងរបស់អ្នក, សូមអរគុណថាវាផ្តល់ឱ្យអ្នកនូវអ្វីដែលមានប្រសិទ្ធិភាព (ឬទាន់តែមានប្រសិទ្ធិភាព) ដើម្បីដោះស្រាយជាមួយ។ ហេតុអ្វី HackerNoon បានប្រើសម្រាប់ឧបករណ៍ Styled ខ្ញុំមិនជាផ្នែកមួយនៃក្រុមនេះនៅពេលដែល Styled Components ត្រូវបានជ្រើសរើសដំបូងដើម្បីដំណើរការ CSS របស់យើង, ប៉ុន្តែនៅពេលនេះ, , និង Styled Components បានធ្វើអត្ថប្រយោជន៍ជាច្រើនសម្រាប់អគ្គិសនី front-end នៃ HackerNoon ។ Tailwind CSS hadn’t even been released 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 បានផ្តល់ឱ្យយើងនូវការលំអិតប៉ុន្តែវាបានមានតម្លៃ: លោក និង a វាគឺជាការងាយស្រួលក្នុងការរក្សាទុកប្រភេទឬដំណើរការវាដោយមានប្រសិទ្ធិភាពដោយគ្មានការចាក់កូដ។ larger bundle sizes runtime performance hits cluttered component structure យើងក៏បានរកឃើញថ្នាំរបស់យើងជាច្រើនត្រូវបានប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រែប្រ គោលបំណងដំបូងនៃឧបករណ៍ប្រើប្រាស់គួរឱ្យចាប់អារម្មណ៍ដូចជាវិធីដើម្បីប្រសើរឡើងអ្វីគ្រប់យ៉ាង - ពីការរចនាសម្ព័ន្ធទៅនឹងការឆ្លើយតបនិងបន្ថែមទៀត។ Tailwind CSS សូមអរគុណសម្បត្តិ: សម្រាប់ a , គំនិតនៃការ refactoring កម្រិតខ្ពស់ codebase វាគឺជាការពិតណាស់ដែលយើងមិនអាចបាត់បង់បានពីរបៀបដែល Tailwind ត្រូវបានទទួលបានយ៉ាងទូលំទូលាយនៅក្នុងសហគមន៍អភិវឌ្ឍន៍។ យើងចង់ចូលទៅក្នុង។ small dev team like HackerNoon’s line by line តើធ្វើដូចម្តេចដើម្បីធ្វើឱ្យ Switch នេះជាផ្នែកសំខាន់បំផុតនៃការផ្លាស់ប្តូរនេះ? Setup. ការដំឡើង Tailwind គឺជាការងាយស្រួលប៉ុន្តែបន្ទាប់ពីវាបានបើកដំណើរការរចនាសម្ព័ន្ធទូទាំងពិភពលោកនៃ Tailwind - ដោយគុណដល់ការ Preflight - បានចាប់ផ្តើមជំរុញជាមួយនឹងឧបករណ៍ដែលយើងមាន។ រចនាសម្ព័ន្ធត្រូវបានកាត់បន្ថយខាងលិចនិងខាងលិច។ សត្វសត្វសត្វសត្វសត្វសត្វសត្វសត្វសត្វសត្វ នៅក្នុង ប្រព័ន្ធ ប្រតិបត្តិការ សាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យសាកលវិទ្យាល័យ preflight: false tailwind.config.js disabled most of Tailwind’s base resets នៅទីនេះខ្ញុំគួរតែ —ប្រសិនបើយើងនឹងដំណើរការរចនាសម្ព័ន្ធទូទាំងពិភពលោក, ការប្រើប្រាស់បណ្តុះបណ្តាល, និងបង្កើតឧបករណ៍ដែលមានជំនាញវិជ្ជាជីវៈជាមួយ Tailwind ។ នៅពេលដែលមូលដ្ឋាននេះត្រូវបានដាក់, ខ្ញុំបានរៀបចំដើម្បីបង្កើត។ establish new conventions នេះគឺជាផ្នែកមួយដែលខ្ញុំមិនអរគុណនៅពេលនេះ: AI made this process actually enjoyable. ការធ្វើបច្ចុប្បន្នភាពប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហែលជាប្រហ អាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋានអាសយដ្ឋាន But having a solid base to start from made things so much easier. សៀវភៅរបស់ Tailwind also helped fill the gaps, and once I fully embraced the អ្វីដែលបានចាប់ផ្តើមដើម្បីចុច។ Now, let me be honest: manual coding and plenty of hours utility class mindset តើធ្វើដូចម្តេចដើម្បីធ្វើឱ្យទំហំទំហំទំហំទំហំទំហំទំហំ ខ្ញុំមានអារម្មណ៍ថា Tailwind is now live on HackerNoon! ឥឡូវនេះ, ការ វាត្រូវបានគេហៅថា CSS, ជាមួយនឹង Styled Components បានបាត់បន្ថយយ៉ាងពេញលេញ។ កន្លែងផ្សេងទៀតជាច្រើននៅតែផ្អែកលើ Styled Components ហើយពួកគេនឹងត្រូវបានផ្លាស់ប្តូរយ៉ាងច្បាស់។ នេះ។ HackerNoon Homepage is fully converted one component, one page at a time ទំព័រដើម HackerNoon ត្រូវបានផ្លាស់ប្តូរយ៉ាងពេញលេញ ការធ្វើតេស្តនេះគឺជាការប្រសើរឡើងយ៉ាងឆាប់រហ័ស។ ការធ្វើតេស្តទាំងអស់នេះបានផ្តល់ឱ្យខ្ញុំនូវឱកាសដើម្បី ការរចនាសម្ព័ន្ធនិងរចនាសម្ព័ន្ធនៃទំព័ររបស់យើង។ លើសពីការផ្លាស់ប្តូរ Tailwind យើងបានបង្កើត ការប្រើប្រាស់ដំណឹងល្អប្រសើរជាងមុន, ផ្នែកថ្មីនិងបន្ថែមទៀត នេះជាការដែលធ្វើឱ្យប្រព័ន្ធប្រវត្តិសាស្រ្តប្រវត្តិសាស្រ្តរបស់យើងមានភាពខុសគ្នាត្រូវបានកាត់បន្ថយ។ revisit and improve 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.

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Check out my projects

សំឡេងនេះផលិតជាភាសាដើមនៃរឿង!

ពីឧបករណ៍ Styled ទៅ Tailwind CSS: A HackerNoon Migration Story

About Author

មតិយោបល់

ព្យួរស្លាក

អត្ថបទនេះត្រូវបានបង្ហាញនៅក្នុង

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps