په هر وخت کې، د تکنالوژۍ د پټولو د فیصلہ چې يو ځل د حق احساس کوي، پیل کوي چې خپل محدودیتونه ښيي - لکه څنګه چې د بریښنا د بریښنا د بریښنا د کارولو وروسته یو screwdriver نلري. دا د HackerNoon سره د کارولو په صورت کې دی.Styled Componentsد کلونو لپاره، دا موږ ته ښه خدمت کوي - په پراخه کچه سټیلونه، د دومايښت موضوعاتو او بشپړ کنترول په خپلو React برخو کې وړاندې کوي. خو لکه څنګه چې زموږ د کوډ بیس پرمختللي او وسایلو لکهTailwind CSSچمتو شوي، دا ښکاري چې achange was overdue.
دا پست زموږ د Styled Components څخه Tailwind CSS ته بدلولو، ځکه چې موږ د حرکت ترسره کړم، څنګه چې زه د انتقال ته راځي، او د دې پروسه په څیر چیرې چیرې دی. که تاسو د قديم سبکونو سره کار کوي یا ستاسو د خپل پروژو لپاره Tailwind فکر کوي، امید ته دا تاسو ته یو ګټور (یا لږ تر لږه نسبتا) تاسو ته ورکړي چې له تاسو سره لاړ شئ.
چرا HackerNoon په اصل کې د Styled برخو کارول
زه په ټیم کې نه وه کله چې Styled Components لومړی زموږ د CSS په کارولو لپاره غوره شوې وه، مګر په هغه وخت کې،Tailwind CSS hadn’t even been released، او Styled Components د HackerNoon front-end آرکټیکټۍ لپاره ډیر معنی لري.
دا پرمختلونکو ته اجازه ورکوي چې د CSS په مستقیم ډول په جاواسکرپټ کې ورسیږي، د برخو په بشپړه توګه ځان لري. دا لارښوونې په طبیعت کې ډیر "د React-native" احساس کوي-encapsulated, reusable, and, at the time, thought to be easier to maintainپه پراختیا کې د کوډ بیس او ټیم کې. د ډینامیک ډیزاین وړتیاوې، د انډول شوي موضوعي ملاتړ، او وړتیا ته په مستقیم ډول په سبکونو کې پروپیلز انتقال کړي، په ځانګړي ډول په پراخه کچه د صفحات او ترتیبونو کې چې موږ جوړ کړ. اوږد وخت لپاره،Styled Components served HackerNoon wellد
هغه څه چې موږ ته د Tailwind بدلون په اړه فکر کوي؟
په وخت کې، زموږ د کوډ بیس وده ورکړي - او د مدیریت سټیلونو پیچیدو هم هم.
Styled Components موږ ته انعطاف لري، مګر دا د لګښت سره راځي:larger bundle sizesدruntime performance hitsاو دcluttered component structureپه هر وخت کې د اوږدې مودې بلوکونو سره پوښل کیږي. دا په سختۍ سره د سټیلونو څارنه یا دوی په اغیزمنه توګه پرته د کوډ ډبل کولو پرته وکاروي.
موږ هم پوه شو چې زموږ ډیری سبکونه په مختلفو برخو کې تکرار شوي دي. دا کله چېTailwind CSSد utility-first لارښوونې په څیر د هر څه په سمه توګه احساس شوی - له layout څخه تر responsiveness او حتی theming.
خو موږ په واقعیت کې وي: دsmall dev team like HackerNoon’s، د يو لوی کوډ بیس refactoring افکارline by lineپه هرصورت، موږ نه کولی شو نښلوي چې څنګه په پراخه کچه Tailwind په پراخه کچه په پراختیا ټولنې کې تصویب شوي دي. موږ غواړم.
څنګه زه د switch جوړ کړم
د دې بدلون تر ټولو سخت برخه؟Setup.
د Tailwind نصب کول ساده دی، مګر کله چې دا فعال شوی، د Tailwind نړیوال سبکونه - د Preflight لخوا - زموږ د موجودو برخو سره مخه ونیسئ.
په دې کې د ژوند خوندي دیpreflight: falseپهtailwind.config.jsفایل. دا حرکت کويdisabled most of Tailwind’s base resetsالبته، نو هم د کوچني styling ستونزې حل شوي دي، مګر څه هم نه د يو جنسي زون په څیر ښکاري.
له دې امله، ما بایدestablish new conventions- څنګه موږ د نړیوالو سبکونو سره کار واخلئ، کلاسونه دوبار کاروئ، او د Tailwind سره د موضوعاتو په اړه د اجزاو جوړ کړي. کله چې دا بنسټ پوښل شوی، زه چمتو وه چې جوړ کړي.
او دلته هغه برخه دی چې زه اوس هم حیران شوی:AI made this process actually enjoyable.
د کوډ سولو هزاران رنګونو د Refactoring به دی دی دی دی دی دی. خو زه د ChatGPT کارولو سره زموږ د سټیلډ برخو د Tailwind په یو وخت کې بدلون. د ساده برخو لپاره - layouts، spacing، جوړښت - دا یو بڼه وه. یوازې پوښښ، tweak، او چلو.
Now, let me be honest:د AI په بشپړ ډول نه ترلاسه کړ. ډیر پیچلي، موضوعي اجزاء هم اړتیا لريmanual coding and plenty of hoursمګر له دې لپاره چې په پیل کې یو پیاوړتیا بنسټ لري، کارونه ډیر آسانه و. Tailwind سندونه هم د غفلتونو بشپړولو کې مرسته وکړي، او کله چې زه په بشپړه توګه دutility class mindsetد چیزو په کلکولو پیل کړي.
لکه څنګه چې د مهاجرت په داسې حال کې ښکاري
زه خوشحاله ده چېTailwind is now live on HackerNoon!د
د دې لپاره، دHackerNoon Homepage په بشپړه توګه بدل شویپه Tailwind CSS کې، سره Styled Components په بشپړه توګه حذف شوي. ډیری نورو پاڼهونه تل د Styled Components پر بنسټ دي، او دوی به په دوامداره توګه بدل شي -one component, one page at a timeد
HackerNoon Homepage په بشپړه توګه بدل شوی
دا روښانه لاره په واقعیت کې یو برکت دی. د هر اجزاء کې د Refactoring زما فرصت ورکړي چېrevisit and improveزموږ پاڼې ډیزاین او جوړښت. د Tailwind بدلون سره، موږ دmore modern UI، ښه لګښت کارول، نوي برخو، او حتیcustom-built theme pickerدا زموږ د قديم موضوعي سيستم ته شرم ورکوي.
په HackerNoon کې د 4 کلونو څخه زیات کار کولو وروسته، زه احساس کوم چېreignitedزموږ د کوډ بیس ته د دوبې ډاونلوډ کولو لپاره. Tailwind د جوړولو لپاره ډیر خوښ دی. دا پاک، مطابقت، او قوي دی - او زه هیله لرئ چې د بدلون ته وده ورکړئ. کوم چې پوهیږي؟ شاید په لوړه وخت کې، موږ د پاکولو لپاره.styled-componentsزموږ څخهpackage.jsonپه ښه توګه 😉
Final Tailwinding Thoughts
د Tailwind CSS ته حرکت نه یوازې د styling کتابتون بدلولو په اړه دی - دا زموږ د frontend د کار د جریان د ماښامولو، د تعقیب او د پرمختګ ساده کولو په اړه دی. په داسې حال کې چې Styled Components د HackerNoon انټرنیټ په یوه مهمو پرمختګ مرحلې کې مرسته کوي، Tailwind موږ ته د دې وړاندیز کويflexibility, speed, and maintainabilityموږ ته اړتيا لري لکه څنګه چې موږ به په کچه وده ورکړي.
دا اوس هم په کار کې دی - زموږ اپلیکیشن اوس هم ډیری Styled Components لري - مګر د Tailwind په ژوند کې زموږ په کور پاڼه کې او په نوي refactored برخو کې وګورئ د حیرانتیا وړ دی. دا حقیقت چې زه د AI سره زما د خپل تخصص سره د refactor په چټکۍ سره تړل کولی شي دا بدلون نه یوازې کارول کیږي، خو هیله ورکړي.
HackerNoon پراختیا کوي، او زموږ سبکونه د دې سره پراختیا کوي.
