We live in an era where web designers have become ultra-specialized. Many tend to have a narrow focus regarding the tools they use and types of projects they accept. It didn’t used to be this way. Back in the late 1990s and early 2000s, the industry was a bit scattered. I certainly fit that mold.…
PHP is an open source language that was created to make web development easier. It’s primary and most suitable purpose is as a web development language for creating web apps or APIs. You don’t need a complicated set of commands to create webpages in PHP. In fact, you can mix PHP with plain HTML in…
2021 Redesign or: How I Learned to Stop Art Directing and Love the Blog – One designer’s mission to bring consistency to their blog. Yoome Free WooCommerce Theme – A free WooCommerce WordPress theme for creating stunning online shopping stores. Guide to building a UI design system – Helpful tips for those wanting to craft…
What You’ll Be Creating With Firebase, creating real-time social applications is a walk in the park. And the best thing about it: you don’t have to write a single line of server-side code. In this tutorial, I’ll show you how to leverage Firebase UI to create a group chat app you can share with your…
No matter what type of website you own or manage, you probably need a contact form. The contact form can help your visitors request a quote, ask for information, or share any tips or problems they’re facing while using your website. In this tutorial, our focus will be on creating a fully functional contact form…
._3bX7W3J0lU78fp7cayvNxx{max-width:208px;text-align:center}
._1PeZajQI0Wm8P3B45yshR{fill:var(–newCommunityTheme-actionIcon)}._1PeZajQI0Wm8P3B45yshR._3axV0unm-cpsxoKWYwKh2x{fill:#ea0027}
._1x9diBHPBP-hL1JiwUwJ5J{font-size:14px;font-weight:500;line-height:18px;color:#ff585b;padding-left:3px;padding-right:24px}._2B0OHMLKb9TXNdd9g5Ere-,._1xKxnscCn2PjBiXhorZef4{height:16px;padding-right:4px;vertical-align:top}._1LLqoNXrOsaIkMtOuTBmO5{height:20px;padding-right:8px;vertical-align:bottom}.isInIcons2020 .icon._1LLqoNXrOsaIkMtOuTBmO5{vertical-align:middle}.QB2Yrr8uihZVRhvwrKuMS{height:18px;padding-right:8px;vertical-align:top}._3w_KK8BUvCMkCPWZVsZQn0{font-size:14px;font-weight:500;line-height:18px;color:var(–newCommunityTheme-actionIcon)}._3w_KK8BUvCMkCPWZVsZQn0 ._1LLqoNXrOsaIkMtOuTBmO5,._3w_KK8BUvCMkCPWZVsZQn0 ._2B0OHMLKb9TXNdd9g5Ere-,._3w_KK8BUvCMkCPWZVsZQn0 ._1xKxnscCn2PjBiXhorZef4,._3w_KK8BUvCMkCPWZVsZQn0 .QB2Yrr8uihZVRhvwrKuMS{fill:var(–newCommunityTheme-actionIcon)}
._3K2ydhts9_ES4s9UpcXqBi{display:block;padding:0 16px;width:100%}
.FIYolDqalszTnjjNfThfT{max-width:256px;white-space:normal;text-align:center}
._9ZuQyDXhFth1qKJF4KNm8{padding:12px 12px 40px}._2iNJX36LR2tMHx_unzEkVM,._1JmnMJclrTwTPpAip5U_Hm{font-size:16px;font-weight:500;line-height:20px;color:var(–newCommunityTheme-bodyText);margin-bottom:40px;padding-top:4px}._306gA2lxjCHX44ssikUp3O{margin-bottom:32px}._1Omf6afKRpv3RKNCWjIyJ4{font-size:18px;font-weight:500;line-height:22px;border-bottom:2px solid var(–newCommunityTheme-line);color:var(–newCommunityTheme-bodyText);margin-bottom:8px;padding-bottom:8px}._2Ss7VGMX-UPKt9NhFRtgTz{margin-bottom:24px}._3vWu4F9B4X4Yc-Gm86-FMP{border-bottom:1px solid var(–newCommunityTheme-line);margin-bottom:8px;padding-bottom:2px}._3vWu4F9B4X4Yc-Gm86-FMP:last-of-type{border-bottom-width:0}._2qAEe8HGjtHsuKsHqNCa9u{font-size:14px;font-weight:500;line-height:18px;color:var(–newCommunityTheme-bodyText);padding-bottom:8px;padding-top:8px}.c5RWd-O3CYE-XSLdTyjtI{padding:8px 0}._3whORKuQps-WQpSceAyHuF{font-size:12px;font-weight:400;line-height:16px;color:var(–newCommunityTheme-actionIcon);margin-bottom:8px}._1Qk-ka6_CJz1fU3OUfeznu{margin-bottom:8px}._3ds8Wk2l32hr3hLddQshhG{font-weight:500}._1h0r6vtgOzgWtu-GNBO6Yb,._3ds8Wk2l32hr3hLddQshhG{font-size:12px;line-height:16px;color:var(–newCommunityTheme-actionIcon)}._1h0r6vtgOzgWtu-GNBO6Yb{font-weight:400}.horIoLCod23xkzt7MmTpC{font-size:12px;font-weight:400;line-height:16px;color:#ea0027}._33Iw1wpNZ-uhC05tWsB9xi{margin-top:24px}._2M7LQbQxH40ingJ9h9RslL{font-size:12px;font-weight:400;line-height:16px;color:var(–newCommunityTheme-actionIcon);margin-bottom:8px}
.s5ap8yh1b4ZfwxvHizW3f{color:var(–newCommunityTheme-metaText);padding-top:5px}.s5ap8yh1b4ZfwxvHizW3f._19JhaP1slDQqu2XgT3vVS0{color:#ea0027}
._1EPynDYoibfs7nDggdH7Gq{margin-bottom:8px;position:relative}._1EPynDYoibfs7nDggdH7Gq._3-0c12FCnHoLz34dQVveax{max-height:63px;overflow:hidden}._1zPvgKHteTOub9dKkvrOl4{font-family:Noto Sans,Arial,sans-serif;font-size:14px;line-height:21px;font-weight:400;word-wrap:break-word}._1dp4_svQVkkuV143AIEKsf{-ms-flex-align:baseline;align-items:baseline;background-color:var(–newCommunityTheme-body);bottom:-2px;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;padding-left:2px;position:absolute;right:-8px}._5VBcBVybCfosCzMJlXzC3{font-family:Noto Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:21px;color:var(–newCommunityTheme-bodyText)}._3YNtuKT-Is6XUBvdluRTyI{position:relative;background-color:0;color:var(–newCommunityTheme-metaText);fill:var(–newCommunityTheme-metaText);border:0;padding:0 8px}._3YNtuKT-Is6XUBvdluRTyI:before{content:””;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:9999px;background:var(–newCommunityTheme-metaText);opacity:0}._3YNtuKT-Is6XUBvdluRTyI:hover:before{opacity:.08}._3YNtuKT-Is6XUBvdluRTyI:focus{outline:none}._3YNtuKT-Is6XUBvdluRTyI:focus:before{opacity:.16}._3YNtuKT-Is6XUBvdluRTyI._2Z_0gYdq8Wr3FulRLZXC3e:before,._3YNtuKT-Is6XUBvdluRTyI:active:before{opacity:.24}._3YNtuKT-Is6XUBvdluRTyI:disabled,._3YNtuKT-Is6XUBvdluRTyI[data-disabled],._3YNtuKT-Is6XUBvdluRTyI[disabled]{cursor:not-allowed;filter:grayscale(1);opacity:.3}._2ZTVnRPqdyKo1dA7Q7i4EL{transition:all .1s linear 0s}.k51Bu_pyEfHQF6AAhaKfS{transition:none}._2qi_L6gKnhyJ0ZxPmwbDFK{transition:all .1s linear 0s;display:block;background-color:var(–newCommunityTheme-field);border-radius:4px;padding:8px;margin-bottom:12px;margin-top:8px;border:1px solid var(–newCommunityTheme-canvas);cursor:pointer}._2qi_L6gKnhyJ0ZxPmwbDFK:focus{outline:none}._2qi_L6gKnhyJ0ZxPmwbDFK:hover{border:1px solid var(–newCommunityTheme-button)}._2qi_L6gKnhyJ0ZxPmwbDFK._3GG6tRGPPJiejLqt2AZfh4{transition:none;border:1px solid var(–newCommunityTheme-button)}.IzSmZckfdQu5YP9qCsdWO{cursor:pointer;transition:all .1s linear 0s}.IzSmZckfdQu5YP9qCsdWO ._1EPynDYoibfs7nDggdH7Gq{border:1px solid transparent;border-radius:4px;transition:all .1s linear 0s}.IzSmZckfdQu5YP9qCsdWO:hover ._1EPynDYoibfs7nDggdH7Gq{border:1px solid var(–newCommunityTheme-button);padding:4px}._1YvJWALkJ8iKZxUU53TeNO{font-size:12px;font-weight:700;line-height:16px;color:var(–newCommunityTheme-button)}._3adDzm8E3q64yWtEcs5XU7{display:-ms-flexbox;display:flex}._3adDzm8E3q64yWtEcs5XU7 ._3jyKpErOrdUDMh0RFq5V6f{-ms-flex:100%;flex:100%}._3adDzm8E3q64yWtEcs5XU7 .dqhlvajEe-qyxij0jNsi0{color:var(–newCommunityTheme-button)}._3adDzm8E3q64yWtEcs5XU7 ._12nHw-MGuz_r1dQx5YPM2v,._3adDzm8E3q64yWtEcs5XU7 .dqhlvajEe-qyxij0jNsi0{font-size:12px;font-weight:700;line-height:16px;cursor:pointer;-ms-flex-item-align:end;align-self:flex-end;-webkit-user-select:none;-ms-user-select:none;user-select:none}._3adDzm8E3q64yWtEcs5XU7 ._12nHw-MGuz_r1dQx5YPM2v{color:var(–newCommunityTheme-button);margin-right:8px;color:var(–newCommunityTheme-errorText)}._3zTJ9t4vNwm1NrIaZ35NS6{font-family:Noto Sans,Arial,sans-serif;font-size:14px;line-height:21px;font-weight:400;word-wrap:break-word;width:100%;padding:0;border:none;background-color:transparent;resize:none;outline:none;cursor:pointer;color:var(–newRedditTheme-bodyText)}._2JIiUcAdp9rIhjEbIjcuQ-{resize:none;cursor:auto}._2I2LpaEhGCzQ9inJMwliNO,._42Nh7O6pFcqnA6OZd3bOK{display:inline-block;margin-left:4px;vertical-align:middle}._42Nh7O6pFcqnA6OZd3bOK{fill:var(–newCommunityTheme-button);color:var(–newCommunityTheme-button);height:16px;width:16px;margin-bottom:2px}
@keyframes ibDwUVR1CAykturOgqOS5{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._3LwT7hgGcSjmJ7ng7drAuq{–sizePx:0;font-size:4px;position:relative;text-indent:-9999em;border-radius:50%;border:4px solid var(–newCommunityTheme-bodyTextAlpha20);border-left-color:var(–newCommunityTheme-body);transform:translateZ(0);animation:ibDwUVR1CAykturOgqOS5 1.1s linear infinite}._3LwT7hgGcSjmJ7ng7drAuq,._3LwT7hgGcSjmJ7ng7drAuq:after{width:var(–sizePx);height:var(–sizePx)}._3LwT7hgGcSjmJ7ng7drAuq:after{border-radius:50%}._3LwT7hgGcSjmJ7ng7drAuq._2qr28EeyPvBWAsPKl-KuWN{margin:0 auto}
._2cHgYGbfV9EZMSThqLt2tx{margin-bottom:16px;border-radius:4px}._3Q7WCNdCi77r0_CKPoDSFY{width:75%;height:24px}._2wgLWvNKnhoJX3DUVT_3F-,._3Q7WCNdCi77r0_CKPoDSFY{background:var(–newCommunityTheme-field);background-size:200%;margin-bottom:16px;border-radius:4px}._2wgLWvNKnhoJX3DUVT_3F-{width:100%;height:46px}
.Rd5g7JmL4Fdk-aZi1-U_V{transition:all .1s linear 0s}._2TMXtA984ePtHXMkOpHNQm{font-size:16px;font-weight:500;line-height:20px;margin-bottom:4px}.CneW1mCG4WJXxJbZl5tzH{border-top:1px solid var(–newRedditTheme-line);margin-top:16px;padding-top:16px}._11ARF4IQO4h3HeKPpPg0xb{transition:all .1s linear 0s;display:none;fill:var(–newCommunityTheme-button);height:16px;width:16px;vertical-align:middle;margin-bottom:2px;margin-left:4px;cursor:pointer}._1I3N-uBrbZH-ywcmCnwv_B:hover ._11ARF4IQO4h3HeKPpPg0xb{display:inline-block}._2IvhQwkgv_7K0Q3R0695Cs{border-radius:4px;border:1px solid var(–newCommunityTheme-line)}._2IvhQwkgv_7K0Q3R0695Cs:focus{outline:none}._1I3N-uBrbZH-ywcmCnwv_B{transition:all .1s linear 0s;border-radius:4px;border:1px solid var(–newCommunityTheme-line)}._1I3N-uBrbZH-ywcmCnwv_B:focus{outline:none}._1I3N-uBrbZH-ywcmCnwv_B.IeceazVNz_gGZfKXub0ak,._1I3N-uBrbZH-ywcmCnwv_B:hover{border:1px solid var(–newCommunityTheme-button)}._35hmSCjPO8OEezK36eUXpk._35hmSCjPO8OEezK36eUXpk._35hmSCjPO8OEezK36eUXpk{margin-top:25px;left:-9px}._3aEIeAgUy9VfJyRPljMNJP._3aEIeAgUy9VfJyRPljMNJP._3aEIeAgUy9VfJyRPljMNJP,._3aEIeAgUy9VfJyRPljMNJP._3aEIeAgUy9VfJyRPljMNJP._3aEIeAgUy9VfJyRPljMNJP:focus-within,._3aEIeAgUy9VfJyRPljMNJP._3aEIeAgUy9VfJyRPljMNJP._3aEIeAgUy9VfJyRPljMNJP:hover{transition:all .1s linear 0s;border:none;padding:8px 8px 0}._25yWxLGH4C6j26OKFx8kD5{display:inline}._2YsVWIEj0doZMxreeY6iDG{font-size:12px;font-weight:400;line-height:16px;color:var(–newCommunityTheme-metaText);display:-ms-flexbox;display:flex;padding:4px 6px}._1hFCAcL4_gkyWN0KM96zgg{color:var(–newCommunityTheme-button);margin-right:8px;margin-left:auto;color:var(–newCommunityTheme-errorText)}._1hFCAcL4_gkyWN0KM96zgg,._1dF0IdghIrnqkJiUxfswxd{font-size:12px;font-weight:700;line-height:16px;cursor:pointer;-ms-flex-item-align:end;align-self:flex-end;-webkit-user-select:none;-ms-user-select:none;user-select:none}._1dF0IdghIrnqkJiUxfswxd{color:var(–newCommunityTheme-button)}._3VGrhUu842I3acqBMCoSAq{font-weight:700;color:#ff4500;text-transform:uppercase;margin-right:4px}._3VGrhUu842I3acqBMCoSAq,.edyFgPHILhf5OLH2vk-tk{font-size:12px;line-height:16px}.edyFgPHILhf5OLH2vk-tk{font-weight:400;-ms-flex-preferred-size:100%;flex-basis:100%;margin-bottom:4px;color:var(–newCommunityTheme-metaText)}._19lMIGqzfTPVY3ssqTiZSX._19lMIGqzfTPVY3ssqTiZSX._19lMIGqzfTPVY3ssqTiZSX{margin-top:6px}._19lMIGqzfTPVY3ssqTiZSX._19lMIGqzfTPVY3ssqTiZSX._19lMIGqzfTPVY3ssqTiZSX._3MAHaXXXXi9Xrmc_oMPTdP{margin-top:4px}
.ehsOqYO6dxn_Pf9Dzwu37{margin-top:0;overflow:visible}._2pFdCpgBihIaYh9DSMWBIu{height:24px}._2pFdCpgBihIaYh9DSMWBIu.uMPgOFYlCc5uvpa2Lbteu{border-radius:2px}._2pFdCpgBihIaYh9DSMWBIu.uMPgOFYlCc5uvpa2Lbteu:focus,._2pFdCpgBihIaYh9DSMWBIu.uMPgOFYlCc5uvpa2Lbteu:hover{background-color:var(–newRedditTheme-navIconFaded10);outline:none}._38GxRFSqSC-Z2VLi5Xzkjy{color:var(–newCommunityTheme-actionIcon)}._2DO72U0b_6CUw3msKGrnnT{border-top:none;color:var(–newCommunityTheme-metaText);cursor:pointer;padding:8px 16px 8px 8px;text-transform:none}._2DO72U0b_6CUw3msKGrnnT:hover{background-color:#0079d3;border:none;color:var(–newCommunityTheme-body);fill:var(–newCommunityTheme-body)}
._1LHxa-yaHJwrPK8kuyv_Y4{width:100%}._1LHxa-yaHJwrPK8kuyv_Y4:hover ._31L3r0EWsU0weoMZvEJcUA{display:none}._1LHxa-yaHJwrPK8kuyv_Y4 ._31L3r0EWsU0weoMZvEJcUA,._1LHxa-yaHJwrPK8kuyv_Y4:hover ._11Zy7Yp4S1ZArNqhUQ0jZW{display:block}._1LHxa-yaHJwrPK8kuyv_Y4 ._11Zy7Yp4S1ZArNqhUQ0jZW{display:none}
._3Im6OD67aKo33nql4FpSp_{border:1px solid var(–newCommunityTheme-widgetColors-sidebarWidgetBorderColor);border-radius:5px 5px 4px 4px;overflow:visible;word-wrap:break-word;background-color:var(–newCommunityTheme-body);padding:12px}.lnK0-OzG7nLFydTWuXGcY{font-size:10px;font-weight:700;letter-spacing:.5px;line-height:12px;text-transform:uppercase;padding-bottom:4px;color:var(–newCommunityTheme-navIcon)}
._12xlue8dQ1odPw1J81FIGQ{display:inline-block;vertical-align:middle}
._3-SW6hQX6gXK9G4FM74obr{display:inline-block;vertical-align:text-bottom;width:16px;height:16px;font-size:16px;line-height:16px}
._37coyt0h8ryIQubA7RHmUc{margin-top:12px;padding-top:12px}._2XJvPvYIEYtcS4ORsDXwa3{border-radius:100%;box-sizing:border-box;-ms-flex:none;flex:none;margin-right:8px}._2Vkdik1Q8k0lBEhhA_lRKE{height:54px;width:54px}.eGjjbHtkgFc-SYka3LM3M,._2Vkdik1Q8k0lBEhhA_lRKE{border-radius:100%;box-sizing:border-box;-ms-flex:none;flex:none;margin-right:8px;background-position:50%;background-repeat:no-repeat;background-size:100%}.eGjjbHtkgFc-SYka3LM3M{height:36px;width:36px}.j9k2MUR13FjoBBeLo1C1m{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin-top:13px;margin-bottom:2px}._3Evl5aOozId3QVjs7iry2c{font-size:12px;font-weight:400;line-height:16px;margin-right:4px;margin-left:4px}._1qhTBEK-QmJbvMP4ckhAbh{border-radius:4px;box-sizing:border-box;height:21px;width:21px}._1qhTBEK-QmJbvMP4ckhAbh:nth-child(2),._1qhTBEK-QmJbvMP4ckhAbh:nth-child(3){margin-left:-9px}._3nzVPnRRnrls4DOXO_I0fn{margin:auto 0 auto auto;padding-top:10px;vertical-align:middle}._3nzVPnRRnrls4DOXO_I0fn ._1LAmcxBaaqShJsi8RNT-Vp i{color:unset}._2bWoGvMqVhMWwhp4Pgt4LP{margin:16px 0;font-size:12px;font-weight:400;line-height:16px}.tWeTbHFf02PguTEonwJD0{font-size:16px;margin-right:4px}._2AbGMsrZJPHrLm9e-oyW1E{width:180px;text-align:center}._1cB7-TWJtfCxXAqqeyVb2q,.isInIcons2020 .icon._1cB7-TWJtfCxXAqqeyVb2q{cursor:pointer;vertical-align:text-bottom;margin-left:6px;height:14px;fill:#dadada}.isInIcons2020 .icon._1cB7-TWJtfCxXAqqeyVb2q{font-size:12px;vertical-align:middle}.isInIcons2020 .icon.tWeTbHFf02PguTEonwJD0{vertical-align:top}.hpxKmfWP2ZiwdKaWpefMn{background-color:var(–newCommunityTheme-active);background-size:cover;background-image:var(–newCommunityTheme-banner-backgroundImage);background-position-y:center;background-position-x:center;background-repeat:no-repeat;border-radius:3px 3px 0 0;height:34px;margin:-12px -12px 10px}._20Kb6TX_CdnePoT8iEsls6{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin-bottom:8px}._20Kb6TX_CdnePoT8iEsls6 >*{display:inline-block;vertical-align:middle}.t9oUK2WY0d28lhLAh3N5q{margin-top:-23px}._2KqgQ5WzoQRJqjjoznu22o{display:inline-block;-ms-flex-negative:0;flex-shrink:0;position:relative}._2D7eYuDY6cYGtybECmsxvE{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}._2D7eYuDY6cYGtybECmsxvE:hover{text-decoration:underline}._19bCWnxeTjqzBElWZfIlJb{font-size:16px;font-weight:500;line-height:20px;display:inline-block}._2TC7AdkcuxFIFKRO_VWis8{margin-left:10px;margin-top:30px}._2TC7AdkcuxFIFKRO_VWis8._35WVFxUni5zeFkPk7O4iiB{margin-top:35px}._7kAMkb9SAVF8xJ3L53gcW{display:-ms-flexbox;display:flex;margin-bottom:8px}._7kAMkb9SAVF8xJ3L53gcW >*{-ms-flex:auto;flex:auto}._1LAmcxBaaqShJsi8RNT-Vp{padding:0 2px 0 4px;vertical-align:middle}._3_HlHJ56dAfStT19Jgl1bF,.nEdqRRzLEN43xauwtgTmj{padding-right:4px}._3_HlHJ56dAfStT19Jgl1bF{padding-left:16px}._2QZ7T4uAFMs_N83BZcN-Em{font-family:Noto Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:18px;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap}._19sQCxYe2NApNbYNX5P5-L{cursor:default;height:16px;margin-right:8px;width:16px}.isInIcons2020 .icon._19sQCxYe2NApNbYNX5P5-L{margin:-2px 8px 0 0}._3XFx6CfPlg-4Usgxm0gK8R{font-size:16px;font-weight:500;line-height:20px}._34InTQ51PAhJivuc_InKjJ{color:var(–newCommunityTheme-actionIcon)}._29_mu5qI8E1fq6Uq5koje8{font-size:12px;font-weight:500;line-height:16px;display:inline-block;word-break:break-word}._2BY2-wxSbNFYqAy98jWyTC{margin-top:10px}._3sGbDVmLJd_8OV8Kfl7dVv{font-family:Noto Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:21px;margin-top:8px;word-wrap:break-word}._1qiHDKK74j6hUNxM0p9ZIp{margin-top:12px}.Jy6FIGP1NvWbVjQZN7FHA,._326PJFFRv8chYfOlaEYmGt,._1eMniuqQCoYf3kOpyx83Jj,._1cDoUuVvel5B1n5wa3K507{-ms-flex-pack:center;justify-content:center;margin-top:12px;width:100%}._1eMniuqQCoYf3kOpyx83Jj{margin-bottom:8px}._2_w8DCFR-DCxgxlP1SGNq5{margin-right:4px;vertical-align:middle}._1aS-wQ7rpbcxKT0d5kjrbh{border-radius:4px;display:inline-block;padding:4px}._2cn386lOe1A_DTmBUA-qSM{border-top:1px solid var(–newCommunityTheme-widgetColors-lineColor);margin-top:10px}._2Zdkj7cQEO3zSGHGK2XnZv{display:inline-block}.wzFxUZxKK8HkWiEhs0tyE{font-size:12px;font-weight:700;line-height:16px;color:var(–newCommunityTheme-button);cursor:pointer;text-align:left;margin-top:2px}._3R24jLERJTaoRbM_vYd9v0._3R24jLERJTaoRbM_vYd9v0._3R24jLERJTaoRbM_vYd9v0{display:none}._38lwnrIpIyqxDfAF1iwhcV{background-color:var(–newRedditTheme-line);border:none;height:1px;margin:16px 0}.yobE-ux_T1smVDcFMMKFv{font-size:16px;font-weight:500;line-height:20px}._2DVpJZAGplELzFy4mB0epQ{margin-top:8px}._2DVpJZAGplELzFy4mB0epQ .x1f6lYW8eQcUFu0VIPZzb{color:inherit}._2DVpJZAGplELzFy4mB0epQ svg.LTiNLdCS1ZPRx9wBlY2rD{color:inherit;fill:inherit;padding-right:8px}._2DVpJZAGplELzFy4mB0epQ ._18e78ihYD3tNypPhtYISq3{font-family:Noto Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:18px;color:inherit}
.LalRrQILNjt65y-p-QlWH{fill:var(–newRedditTheme-actionIcon);height:18px;width:18px}.LalRrQILNjt65y-p-QlWH rect{stroke:var(–newRedditTheme-metaText)}._3J2-xIxxxP9ISzeLWCOUVc{height:18px}.FyLpt0kIWG1bTDWZ8HIL1{margin-top:4px}._2ntJEAiwKXBGvxrJiqxx_2,._1SqBC7PQ5dMOdF0MhPIkA8{vertical-align:middle}._1SqBC7PQ5dMOdF0MhPIkA8{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}
._2a172ppKObqWfRHr8eWBKV{-ms-flex-negative:0;flex-shrink:0;margin-right:8px}._39-woRduNuowN7G4JTW4I8{border-top:1px solid var(–newCommunityTheme-widgetColors-lineColor);margin-top:12px;padding-top:12px}._3AOoBdXa2QKVKqIEmG7Vkb{font-size:12px;font-weight:400;line-height:16px;-ms-flex-align:center;align-items:center;background-color:var(–newCommunityTheme-body);border-radius:4px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:12px}.vzEDg-tM8ZDpEfJnbaJuU{color:var(–newCommunityTheme-button);fill:var(–newCommunityTheme-button);height:14px;width:14px}.r51dfG6q3N-4exmkjHQg_{font-size:10px;font-weight:700;letter-spacing:.5px;line-height:12px;text-transform:uppercase;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}._2ygXHcy_x6RG74BMk0UKkN{margin-left:8px}._2BnLYNBALzjH6p_ollJ-RF{display:-ms-flexbox;display:flex;margin-left:auto}._1-25VxiIsZFVU88qFh-T8p{padding:0}._3BmRwhm18nr4GmDhkoSgtb{color:var(–newCommunityTheme-bodyText);-ms-flex:0 0 auto;flex:0 0 auto;line-height:16px}
._2FKpII1jz0h6xCAw1kQAvS{background-color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 2px 3px 0 rgba(0,0,0,.2);transition:left .15s linear;border-radius:57%;width:57%}._2FKpII1jz0h6xCAw1kQAvS:after{content:””;padding-top:100%;display:block}._2e2g485kpErHhJQUiyvvC2{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;background-color:var(–newCommunityTheme-navIconFaded10);border:2px solid transparent;border-radius:100px;cursor:pointer;position:relative;width:35px;transition:border-color .15s linear,background-color .15s linear}._2e2g485kpErHhJQUiyvvC2._3kUvbpMbR21zJBboDdBH7D{background-color:var(–newRedditTheme-navIconFaded10)}._2e2g485kpErHhJQUiyvvC2._3kUvbpMbR21zJBboDdBH7D._1L5kUnhRYhUJ4TkMbOTKkI{background-color:var(–newRedditTheme-active)}._2e2g485kpErHhJQUiyvvC2._3kUvbpMbR21zJBboDdBH7D._1L5kUnhRYhUJ4TkMbOTKkI._3clF3xRMqSWmoBQpXv8U5z{background-color:var(–newRedditTheme-buttonAlpha10)}._2e2g485kpErHhJQUiyvvC2._1asGWL2_XadHoBuUlNArOq{border-width:2.25px;height:24px;width:37.5px}._2e2g485kpErHhJQUiyvvC2._1asGWL2_XadHoBuUlNArOq ._2FKpII1jz0h6xCAw1kQAvS{height:19.5px;width:19.5px}._2e2g485kpErHhJQUiyvvC2._1hku5xiXsbqzLmszstPyR3{border-width:3px;height:32px;width:50px}._2e2g485kpErHhJQUiyvvC2._1hku5xiXsbqzLmszstPyR3 ._2FKpII1jz0h6xCAw1kQAvS{height:26px;width:26px}._2e2g485kpErHhJQUiyvvC2._10hZCcuqkss2sf5UbBMCSD{border-width:3.75px;height:40px;width:62.5px}._2e2g485kpErHhJQUiyvvC2._10hZCcuqkss2sf5UbBMCSD ._2FKpII1jz0h6xCAw1kQAvS{height:32.5px;width:32.5px}._2e2g485kpErHhJQUiyvvC2._1fCdbQCDv6tiX242k80-LO{border-width:4.5px;height:48px;width:75px}._2e2g485kpErHhJQUiyvvC2._1fCdbQCDv6tiX242k80-LO ._2FKpII1jz0h6xCAw1kQAvS{height:39px;width:39px}._2e2g485kpErHhJQUiyvvC2._2Jp5Pv4tgpAsTcnUzTsXgO{border-width:5.25px;height:56px;width:87.5px}._2e2g485kpErHhJQUiyvvC2._2Jp5Pv4tgpAsTcnUzTsXgO ._2FKpII1jz0h6xCAw1kQAvS{height:45.5px;width:45.5px}._2e2g485kpErHhJQUiyvvC2._1L5kUnhRYhUJ4TkMbOTKkI{-ms-flex-pack:end;justify-content:flex-end;background-color:var(–newCommunityTheme-active)}._2e2g485kpErHhJQUiyvvC2._3clF3xRMqSWmoBQpXv8U5z{cursor:default}._2e2g485kpErHhJQUiyvvC2._3clF3xRMqSWmoBQpXv8U5z ._2FKpII1jz0h6xCAw1kQAvS{box-shadow:none}._2e2g485kpErHhJQUiyvvC2._1L5kUnhRYhUJ4TkMbOTKkI._3clF3xRMqSWmoBQpXv8U5z{background-color:var(–newCommunityTheme-buttonAlpha10)}
._3Qx5bBCG_O8wVZee9J-KyJ{border-top:1px solid var(–newRedditTheme-line);margin-top:16px;padding-top:16px}._3Qx5bBCG_O8wVZee9J-KyJ ._2NbKFI9n3wPM76pgfAPEsN{margin:0;padding:0}._3Qx5bBCG_O8wVZee9J-KyJ ._2NbKFI9n3wPM76pgfAPEsN ._2btz68cXFBI3RWcfSNwbmJ{font-family:Noto Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:21px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin:8px 0}._3Qx5bBCG_O8wVZee9J-KyJ ._2NbKFI9n3wPM76pgfAPEsN ._2btz68cXFBI3RWcfSNwbmJ.QgBK4ECuqpeR2umRjYcP2{opacity:.4}._3Qx5bBCG_O8wVZee9J-KyJ ._2NbKFI9n3wPM76pgfAPEsN ._2btz68cXFBI3RWcfSNwbmJ label{font-size:12px;font-weight:500;line-height:16px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}._3Qx5bBCG_O8wVZee9J-KyJ ._2NbKFI9n3wPM76pgfAPEsN ._2btz68cXFBI3RWcfSNwbmJ label svg{fill:currentColor;height:20px;margin-right:4px;width:20px;-ms-flex:0 0 auto;flex:0 0 auto}._3Qx5bBCG_O8wVZee9J-KyJ ._4OtOUaGIjjp2cNJMUxme_{-ms-flex-pack:justify;justify-content:space-between}._3Qx5bBCG_O8wVZee9J-KyJ ._4OtOUaGIjjp2cNJMUxme_ svg{display:inline-block;height:12px;width:12px}._2b2iJtPCDQ6eKanYDf3Jho{-ms-flex:0 0 auto;flex:0 0 auto}._4OtOUaGIjjp2cNJMUxme_{padding:0 12px}._1ra1vBLrjtHjhYDZ_gOy8F{font-family:Noto Sans,Arial,sans-serif;font-size:12px;letter-spacing:unset;line-height:16px;text-transform:unset;–textColor:var(–newCommunityTheme-widgetColors-sidebarWidgetTextColor);–textColorHover:var(–newCommunityTheme-widgetColors-sidebarWidgetTextColorShaded80);font-size:10px;font-weight:700;letter-spacing:.5px;line-height:12px;text-transform:uppercase;color:var(–textColor);fill:var(–textColor);opacity:1}._1ra1vBLrjtHjhYDZ_gOy8F._2UlgIO1LIFVpT30ItAtPfb{–textColor:var(–newRedditTheme-widgetColors-sidebarWidgetTextColor);–textColorHover:var(–newRedditTheme-widgetColors-sidebarWidgetTextColorShaded80)}._1ra1vBLrjtHjhYDZ_gOy8F:active,._1ra1vBLrjtHjhYDZ_gOy8F:hover{color:var(–textColorHover);fill:var(–textColorHover)}._1ra1vBLrjtHjhYDZ_gOy8F:disabled,._1ra1vBLrjtHjhYDZ_gOy8F[data-disabled],._1ra1vBLrjtHjhYDZ_gOy8F[disabled]{opacity:.5;cursor:not-allowed}.isInIcons2020 ._3a4fkgD25f5G-b0Y8wVIBe{margin-right:8px}
.c_dVyWK3BXRxSN3ULLJ_t{border-radius:4px 4px 0 0;height:34px;left:0;position:absolute;right:0;top:0}._1OQL3FCA9BfgI57ghHHgV3{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;margin-top:32px}._1OQL3FCA9BfgI57ghHHgV3 ._33jgwegeMTJ-FJaaHMeOjV{border-radius:9001px;height:32px;width:32px}._1OQL3FCA9BfgI57ghHHgV3 ._1wQQNkVR4qNpQCzA19X4B6{height:16px;margin-left:8px;width:200px}._39IvqNe6cqNVXcMFxFWFxx{display:-ms-flexbox;display:flex;margin:12px 0}._39IvqNe6cqNVXcMFxFWFxx ._29TSdL_ZMpyzfQ_bfdcBSc{-ms-flex:1;flex:1}._39IvqNe6cqNVXcMFxFWFxx .JEV9fXVlt_7DgH-zLepBH{height:18px;width:50px}._39IvqNe6cqNVXcMFxFWFxx ._3YCOmnWpGeRBW_Psd5WMPR{height:12px;margin-top:4px;width:60px}._2iO5zt81CSiYhWRF9WylyN{height:18px;margin-bottom:4px}._2iO5zt81CSiYhWRF9WylyN._2E9u5XvlGwlpnzki78vasG{width:230px}._2iO5zt81CSiYhWRF9WylyN.fDElwzn43eJToKzSCkejE{width:100%}._2iO5zt81CSiYhWRF9WylyN._2kNB7LAYYqYdyS85f8pqfi{width:250px}._2iO5zt81CSiYhWRF9WylyN._1XmngqAPKZO_1lDBwcQrR7{width:120px}._3XbVvl-zJDbcDeEdSgxV4_{border-radius:4px;height:32px;margin-top:16px;width:100%}._2hgXdc8jVQaXYAXvnqEyED{animation:_3XkHjK4wMgxtjzC1TvoXrb 1.5s ease infinite;background:linear-gradient(90deg,var(–newCommunityTheme-field),var(–newCommunityTheme-inactive),var(–newCommunityTheme-field));background-size:200%}._1KWSZXqSM_BLhBzkPyJFGR{background-color:var(–newCommunityTheme-widgetColors-sidebarWidgetBackgroundColor);border-radius:4px;padding:12px;position:relative;width:auto}
/*# sourceMappingURL=https://www.redditstatic.com/desktop2x/chunkCSS/IdCard.be678e2cf1e983f23541.css.map*/._2JU2WQDzn5pAlpxqChbxr7{height:16px;margin-right:8px;width:16px}._3E45je-29yDjfFqFcLCXyH{margin-top:16px}._13YtS_rCnVZG1ns2xaCalg{font-family:Noto Sans,Arial,sans-serif;font-size:14px;font-weight:400;line-height:18px;display:-ms-flexbox;display:flex}._1m5fPZN4q3vKVg9SgU43u2{margin-top:12px}._17A-IdW3j1_fI_pN-8tMV-{display:inline-block;margin-bottom:8px;margin-right:5px}._5MIPBF8A9vXwwXFumpGqY{border-radius:20px;font-size:12px;font-weight:500;letter-spacing:0;line-height:16px;padding:3px 10px;text-transform:none}._5MIPBF8A9vXwwXFumpGqY:focus{outline:unset}
/*# sourceMappingURL=https://www.redditstatic.com/desktop2x/chunkCSS/TopicLinksContainer.361933014be843c79476.css.map*/
Hi everyone,I am currently doing a seminar on web development. I have never done web development before so please bare with me – I am a complete noob…I am currently trying to implement the Bootstrap Navwalker (see here: https://github.com/wp-bootstrap/wp-bootstrap-navwalker) in my wordpress files with the latest Bootstrap version 5.0.0. However, there seems to be an issue with the Navwalker when using this Bootstrap version. Everything works the way it should on desktop. However, on small screens or mobile, the dropdown doesn’t drop down (it that makes sense). I am attaching a picture – basically, if I click on the circled button nothing from the nav comes down and I can’t click any sites.I’ve tried looking around on the internet but haven’t found a solution that works yet. I have tried changing all the data attributes in my header.php file to “data-bs-” like it’s suggested here: https://wordpress.stackexchange.com/questions/383286/why-is-my-bootstrap-5-navbar-not-displaying-the-drop-down-menu-on-smaller-screen – didn’t work. I have also tried using this solution with the functions.php and header.php file: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker – didn’t work either.So my question is – could anyone help me here or have any of you used one of these solutions and they worked? I would like to work with Bootstrap 5 if possible because that’s what I just learned 2 weeks ago.This is my current functions.php code:
The 5 Most Popular Front-end Frameworks Compared – SitePointSkip to main contentFree JavaScript Book!Write powerful, clean and maintainable JavaScript.RRP $11.95 There’s a large number of front-end frameworks available today, each with different strengths and weaknesses. This makes it tricky to decide which one you should invest your time in learning, or which is most suitable for your next project.
In this article, I’ll compare five of the most popular front-end JavaScript frameworks out there. I’ll offer a high-level overview of each, examining their main features, tooling, learning curve, and other pros and cons to take into account.
Of course, I won’t be able to tell you which is the best framework: that’s subjective, and depends on factors like your current level of JavaScript experience and what kind of app you’re working on. What I will do, though, is quickly get you up to speed with the main players and help you make an informed decision about which framework you should start digging into more.
How Did I Measure Popularity?
Popularity was determined by framework usage according to the State of JavaScript Survey 2020. The survey was completed by 23,765 respondents and saw the contenders stack up like this:
React: 80%
Angular: 56%
Vue.js: 49%
Svelte: 15%
Preact : 13%
I’ve also taken into account “framework awareness” from the same survey:
React: 100%
Angular: 100%
Vue.js: 99%
Ember: 88%
Svelte: 86%
And I’ve cross-referenced these results with framework usage according to the Stack Overflow developer survey, 2020. This was completed by 65,000 respondents, and it pretty much corroborates the findings from the State of JavaScript — although, unfortunately, it doesn’t distinguish between front-end and back-end frameworks.
There are, of course, many other metrics one could draw upon, such as job availability, GitHub stars, npm downloads, GitHub “Used by”, and so on. If you’d like an overview of some of these (for the big three, at least), please consult this GitHub Gist.
For an interactive view of how the frameworks stack up against each other, you can consult this graph from npmtrends.
How Are We Defining Front-end Framework?
The elephant in the room is that the most popular framework on the list (React) defines itself as a “library”.
I don’t want to go too deep down this rabbit hole, as there are complete articles dedicated to explaining the difference between frameworks and libraries. For the purposes of this article, I’ll use the following definition provided by Martin Fowler:
A library is essentially a set of functions that you can call, these days usually organized into classes. Each call does some work and returns control to the client.
A framework embodies some abstract design, with more behavior built in. In order to use it you need to insert your behavior into various places in the framework either by subclassing or by plugging in your own classes. The framework’s code then calls your code at these points.
In my opinion, React conforms more to the behavior of a framework than a library. And while it technically isn’t one, developers normally adopt a number of tools and packages from its ecosystem to make it function as such.
1. React
Initially released by Facebook in 2013, React is far and away the most popular front-end JavaScript framework available today. React is used in production by companies such as Facebook, Netflix and Airbnb, and it has a huge developer following — meaning that it’s easy to find help and resources online.
The main purpose of React is to compose interactive user interfaces from reusable components. It uses JSX (a syntax extension to JavaScript) for templating, and implements a one-way data flow model to populate components with data. Whenever component data changes, React uses its virtual DOM to quickly and efficiently update the page.
Developer tooling is good. The React team has built and maintains a CLI (Create React App) to quickly and easily scaffold out a new project, as well as a developer tools extension for both Chrome and Firefox. There are very many third-party packages available to accomplish a wide array of tasks (such as routing, dealing with forms, and animation), as well as several React-based frameworks, such as Next.js and Gatsby.
React subscribes to a “Learn once, write anywhere” philosophy. It can power mobile apps using React Native, and it can render on the server using Node. This means excellent SEO support, which will only get better as something called server components makes its way down the pipeline.
One of the main criticisms of React is that it is too unopinionated: it’s only concerned with the view layer of your application and leaves everything else to the developer. Some people like the freedom this offers, but others — especially new developers — can become overwhelmed by the unstructured approach to coding a React app this encourages.
React has a moderate learning curve. It encourages the use of various functional programming paradigms (such as immutability and pure functions), meaning that developers would do well to have a basic grasp of these concepts before attempting to build anything serious.
If you’re comfortable with React’s unopinionated approach and the fact that it leaves a sizable part of the development process to the developer, then it’s an excellent choice for data-driven apps of any size.
2. Angular
Angular is Google’s offering in the front-end framework space. It started life in 2010 as AngularJS (or Angular 1) and was an immediate hit, primarily because it was the first framework that enabled developers to build what we now refer to as single-page applications.
To address performance concerns and the challenges of building large-scale JavaScript applications, Google rewrote AngularJS from the ground up and, in 2016, released Angular 2 (nowadays just Angular). There was no easy migration path between the two, and consequently AngularJS and Angular became two separate frameworks. AngularJS is now end-of-life and shouldn’t be used for new projects.
As for Angular, it’s something of a heavyweight in the front-end framework world. It’s used by companies such as Google and Microsoft in production, so is definitely well battle tested. There are also many resources available online (such as the excellent Tour of Heroes tutorial) and there are a good number of Angular-related questions on Stack Overflow.
Unlike React, which only handles the view layer, Angular offers a complete solution for building single-page client applications. Angular components can implement a two-way data binding, which allows them to listen for events and update values simultaneously between parent and child components. Templates are chunks of HTML that permit the use of special syntax to leverage many of Angular’s features. TypeScript is the primary language for Angular development, making the framework particularly suited to enterprise-grade applications.
Tooling is good. Angular offers a highly polished CLI to initialize, develop, scaffold, and maintain Angular applications. There are also Chrome and Firefox Dev Tools extensions available for debugging Angular applications. Out of the box, Angular has a solution for handling many common tasks, such as forms and routing, but there’s still a rich ecosystem of third-party libraries.
In my opinion, Angular has the steepest learning curve of all the frameworks listed here. Developers will need to be familiar with TypeScript, as well as concepts like decorators and dependency injection, to be able to work effectively with the framework. For this reason, it’s not a good choice for new developers. Rather, it lends itself more to building large-scale apps as part of a team.
If you’d like a full rundown of the differences between React and Angular, please see “React vs Angular: An In-depth Comparison”.
3. Vue.js
Please note that these stats are for Vue v2. Version 3 is available, but has to be installed as vue@next.
Third on our list is Vue.js, a Model–view–viewmodel (MVVM) front-end framework used for building user interfaces and single-page applications. It was written by Evan You and saw its first release in 2014. Vue has a very dedicated following of developers (it has more GitHub stars than React, for example), which is possibly due to the fact that it slotted so nicely into the gap left by AngularJS when this was rewritten to become Angular.
Vue is developed and maintained by a core team of some twenty developers, and although it’s not directly backed by one of the internet giants, it’s used in production by companies such as Alibaba, Gitlab and Adobe. Vue has arguably the best documentation of any of the frameworks on the list, and its forums are a great resource for getting help with coding issues. Vue is also popular in the PHP world and ships as part of the Laravel framework.
One of Vue’s selling points is that it’s designed from the ground up to be incrementally adoptable. This means that you can sprinkle Vue into regular web pages to enhance their functionality, or you can go all in and use it to build a full-blown single-page app. Vue.js uses an HTML-based template syntax which allows you to effortlessly bind attributes to the underlying data model. It also offers single file components which keep template, JavaScript code and scoped CSS in the same file.
Tooling around Vue is superb. There’s an official CLI to scaffold and develop Vue apps, and there’s a devtools extension available for both Chrome and Firefox to aid in debugging. In sharp contrast to React, Vue offers official packages for routing and state management, which presents a pleasingly standardized way of doing things. There’s also a wide range of third-party tools, as well as frameworks based upon Vue, such as Nuxt.js and Gridsome (Vue’s answer to React’s Next.js and Gatsby).
The barrier to entry for working with Vue is low, partly due to its incremental approach to building apps, and partly due to the fact that it’s based on HTML, CSS and JavaScript — technologies that should be familiar to any developer.
Vue is an excellent choice for apps of all sizes. It’s suitable for less experienced devs, as well as those that prefer a little more structure and guidance from their framework.
4. Svelte
Released by Rich Harris in 2016, Svelte is a relative newcomer to the framework scene and takes a different approach to building web apps than anything else on this list. Its website states:
Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don’t pay the performance cost of the framework’s abstractions, and you don’t incur a penalty when your app first loads.
In other words, it eschews the concept of a virtual DOM in favor compiling your code into small, vanilla JavaScript modules during build time, which will update the DOM whenever the state of your app changes. As you can imagine, this makes for fast apps with a small footprint. Svelte also handles state management natively and offers reactivity out of the box.
Unfortunately, tooling is currently a bit of a pain point. Originally, Sapper (an app framework built on top of Svelte) was used to build Svelte apps with a predefined structure and equip them with slightly more advanced features such as routing and server-side rendering. However, in November 2020, Svelte’s creator announced that version 1.0 of Sapper would never be released and that SvelteKit is now the single recommended way to start building apps with Svelte. There are also browser devtools extensions available for Chrome and Firefox, as well as various third-party modules, although nowhere near as many as for the more established frameworks.
Although Svelte’s learning curve is very low, the community is still small and it hasn’t yet gained same traction as the top three frameworks mentioned here. But it is being used in production by companies such as IBM and the New York Times, and it’s definitely a framework worth keeping an eye on in the coming months and years.
Svelte is a good choice for smaller projects, due largely to its immaturity. This is changing, though. SvelteKit is in public beta, and the community is continuing to grow and thrive. Although Svelte is currently something of a newcomer, you should watch this space …
5. Ember.js
I’m featuring Ember as the final framework in this article because it’s been around since the early days of front-end frameworks. It was initially released in 2011, but maintains continuing popularity among developers:
It’s almost a decade old and dates back well before React, Vue, Svelte and all the others. The framework has never been on the forefront of the frontend hype train but quietly enabled teams to ship steadily and sustainably — among them Qonto and CLARK, two of Europe’s Top 50 FinTechs in 2020
Similar to Angular, Ember takes more of a batteries-included approach to app development and comes with everything you need to build a modern front-end JavaScript application. This ranges from a routing solution, to the data layer, to a fully-featured, modern test harness built into every application by default. It follows a six-week release cycle (when a new minor version released) and has a strong commitment to stability. This could be a real plus point to those developers who can’t afford to rewrite their apps on a continual basis to avoid being left behind by the faster-moving frameworks.
A wide array of tooling has sprung up around Ember, from the Ember CLI — the official way to create, build, test, and serve Ember apps — to the Ember Inspector, the officially supported browser add-on that enables you to inspect Ember objects in your application. There’s also a number of third-party libraries available, and the CLI provides a common format (aka Ember Addons) to distribute them with.
Ember’s community isn’t as large as those of React and others, but it’s members are very engaged and has forums and a Discord server where you can ask for help with coding problems. Ember is the most opinionated of the frameworks listed here, and it adopts the “convention over configuration” approach. This, coupled with the fact that devs will need to be familiar with more advanced concepts — such as serializers and adapters — gives it a moderate to steep learning curve.
Ember probably isn’t the best choice for beginners or for smaller projects. It has a lot of moving parts and doesn’t offer much flexibility in how you structure things. But it does shine when used to build rich, complex front-end apps as part of a team.
Conclusion
So there we have it, my comparison of the five most popular front-end frameworks on the market today. While this wasn’t an exhaustive look at the features of each framework, I hope it’s given you an insight into which of the big players might be a good fit for your next project, or a good candidate for you to further explore.
If you’ve got any questions or comments, why not come join us in the SitePoint forums to discuss.
Imagine the excitement of landing a web design job at a government agency. It’s a fresh start and a chance to apply your skills towards public service. Feels pretty good, right? Now imagine that, a few months into this new adventure, a global pandemic takes hold. Suddenly, you’re charged with building a website that puts…
Learn Remotion: Create Animated Video with HTML, CSS & ReactSkip to main contentFree JavaScript Book!Write powerful, clean and maintainable JavaScript.RRP $11.95 Creating a video with text, animations, colors, and shapes traditionally requires specialist software and potentially years of motion graphic training. What if you could use your existing toolset, training, and background in web development to do the same?
Remotion allows JavaScript developers to reuse the skills and knowledge they’ve built up to create complex animated videos using HTML, CSS, and React JS. If you can render text with React, animate a CSS style, or organize HTML content, you can now create and edit your own videos using solely code, with no video editing applications or software required.
In this article, I’ll go through the process of using Remotion and talk you through my discoveries as we go along.
You can find the complete code for this article on GitHub.
Remotion: What, and Why?
Remotion is a video creation toolkit for React created by Jonny Burger. This toolkit allows anyone with a basic understanding of React, HTML or CSS to create animated videos using code.
In the video creation space there’s currently a high barrier to entry due to the required software and training needed to use and master these tools. By utilizing JavaScript developers’ existing toolkits, this opens the video creation space to a wider user base. As videos become code, we can leverage existing patterns to allow for more effective video creation — such as automated generation based on parameters or build pipelines.
Getting Started
Thankfully, Remotion has a quick and easy setup process with a Yarn and npm starter kit. For this example, we’ll be sticking with npm as the build and run tool. Before we get started, you’ll need to have Node and npm installed. (For assistance, you can follow this guide to installing Node and npm.) Also check the Remotion installation guide if you’re on Linux, as you may need to install additional tools. After getting Node and npm set up, let’s create a new project by running this code:
npm init video
This will prompt you for a project name, which is also used as the directory name. In our case, it will be my-video. Once entered, we can move into the my-video directory and start the default video project by running the start script as follows:
cd my-video
npm start
After running the start command, the browser should automatically open. If not, open the browser and navigate to http://localhost:3000/. This feature allows you to watch and debug the video you’re creating. The player has controls that include a play button, which allows you to preview the video content. It may also be useful to start by looking at the code for the demo example, which Remotion provides as a guide for how to build your own video.
Hello, World!
We’re going to create our own video animating the text “Hello, World!”, to get to grips with the components and processes supplied in Remotion.
First of all, let’s delete the existing example code (everything in the src folder), as we want to start afresh. Then, let’s create a Demo directory under the src directory, which will hold and manage all our video work for this project. Inside the Demo directory, create a Demo.js file:
import {Composition, interpolate, Sequence, useCurrentFrame, useVideoConfig} from ‘remotion’;
import Title from ‘./Title’;
import Hello from ‘./Hello’;
import “./demo.css”;
const Demo = () = > {
return (
{}
);
};
export const DemoVideo = () = > {
return (
)
}
The Demo file exports our video code. As you can see, we can create a Demo component that will hold all the visual elements in our video. We can then export a component that renders the Composition of our video. The Composition component allows us to define some basic properties such as the width and height of the video clip, the FPS (frames per second), and the feature that will be rendered. We also import some utils and hooks from Remotion and some additional components that we will create soon.
Currently our Demo component is empty, but let’s add some elements to our video:
const Demo = ({titleText, titleColor}) = > {
const frame = useCurrentFrame();
const videoConfig = useVideoConfig();
const totalOpacity = interpolate(
frame,
[videoConfig.durationInFrames – 25, videoConfig.durationInFrames – 15],
[1, 0],
{
extrapolateLeft: ‘clamp’,
extrapolateRight: ‘clamp’,
}
);
return (
);
};
We’ve added a lot to the file, so let’s break this all down.
Firstly in our render section, we can see from the file that we can now return a div with opacity styles, allowing us to fade elements in and out at the start and end of the video. For the opacity value, we use a Remotion helper. The interpolate function allows you to better define animations and map the animation values to the current frame and the video duration. In this example, we pass in the current frame. The function will get called on each frame generated. The input range is calculated from the duration of the video and the output value ranges from 0 to 1, as this is the range for the opacity CSS value. As the Demo component is re-rendered for each frame, the interpolate function is called each time and will return the appropriate opacity value.
Next, we can begin rendering different visual elements on the video screen. In this example, we want the text “Hello, World!” to fade into view then disappear and the text “This is my first Remotion video” to then appear afterwards. To do so, we can render multiple Sequence components.
A Sequence component is another Remotion feature that allows us to define how and when a component renders in a video and for how long. This is great for building complex videos where you want to add timed or layered elements, such as this example. Each Sequence will also show in the browser player and be titled based on the child component name. This allows you to monitor the video you’re generating and the effects you’re adding to it in real time.
Remotion also provides some useful React hooks, and in this example we make use of the useCurrentFrame and useVideoConfig hooks. useCurrentFrame will return the current frame that the video is on, which is useful for animations and implementing actions based on where the current position of the video playback is. useVideoConfig will return an object with different values, such as:
width: the width of the video — useful for positioning elements in the video
height: the height of the video — useful for positioning elements in the video
FPS: frames per second — which can be used to determine the speed of animation or element movement
durationInFrames: the total length of the video in frames — which can be used to calculate animations or times for Sequence show and hide.
In our case, as mentioned, firstly we want our Hello component, the text “Hello, World!”, to appear at the start of the video and remain on screen for half of the time. We do this by using the videoConfig.duration value, which we’ve calculated from the useVideoConfigHook.
For the second Sequence, we want our Title component text, “This is my first Remotion video”, to appear after 35 frames and stay on screen for the full duration of the video. To achieve this, for From we enter 35, and for durationInFrames we enter Infinity.
To style our demo component, we can use CSS along with inline styles. When using CSS, we want to apply styles to the whole video, so let’s create a demo.css file that will hold any styles that cover the whole video area. In our example, we want to make the background white and align out items with Flexbox:
.main-container {
flex: 1;
background-color: white;
}
Now let’s delve deeper into these elements we’re rendering.
Rendering React Components in an Animation
The Hello component is going to be a basic React component that renders an H1 tag with some inline styles applied and the text “Hello, World!” This is the simplest form of a component we can render. For simplicity’s sake, we can use inline styles. But because this is React, you could also import styles from a CSS file and use a class name, styled-components, CSS modules, or any styling pattern you’re already familiar with as an alternative. Let’s create the Hello component. Inside the Demo folder, create a new file Hello.js:
const Hello = () = > {
return (
Hello, World!
);
};
export default Hello;
Now, let’s take a look at a more complex example. In the Demo folder, create a new file called Title.js and add in the component code below:
import {spring, useCurrentFrame, useVideoConfig} from ‘remotion’;
const Title = ({titleText, titleColor, bottom}) = > {
const videoConfig = useVideoConfig();
const frame = useCurrentFrame();
const text = titleText.split(‘ ‘).map((t) = > ` ${t} `);
return (
{text.map((t, i) = > {
return (
{t}
);
})}
);
};
export default Title;
We have a lot going on here, so again let’s break down what’s going on.
Remotion has first-class support for TypeScript. This is not required, but it can make the development process better, as you’ll get more detailed autocomplete suggestions in your IDE. However, to make this example more beginner friendly, we’ll just use normal JavaScript.
Our component takes in two props — titleText and titleColor — which will be used later in our render method. This shows that, using React, we can still pass props around the application, therefore making our video elements reusable and dynamic. You may have noticed that, in our Demo component, we passed props in from the Composition component. This shows the power of React in action. We can pass in props from the very top of the React application, making the video responsive, and meaning you could change one block of text to make a new video or to change the whole video context.
After we’ve accessed our props in the Title component, we call the Remotion hooks again to get the videoConfig and frame data. The Title component then breaks the text prop passed and renders it one word at a time using a combination of a map and CSS transform. Here we have the opportunity to use another built-in helper function. Spring takes in values to help generate a smooth output for the animation value. We pass the main video config’s FPS to control the speed of the animation. The frame value controls when the animation starts, and finally we pass in additional configuration options to control the smoothness of the animation.
After we have all our video components created and ready to go, we need to finally create an index.js file in the root of the src folder and add the following content:
import {registerRoot} from ‘remotion’;
import { DemoVideo } from ‘./Demo/Demo’;
registerRoot(DemoVideo);
The index file imports the registerRoot function from Remotion, which allows us to render the video content. Think of this as the ReactDOM render function but for Remotion. Then we pass our DemoVideo component to registerRoot, which will visualize the rendered video in either development or build modes.
We’re now importing the Demo video that will get rendered by Remotion.
Now that we have all of these features combined, we have a fully animated video that provides one example of the different components and helper functions supplied by Remotion.
We can run the video from the root of the project with the following command:
./node_modules/.bin/remotion preview src/index.js
Or, you can update the start script in the package.json file:
– “start”: “remotion preview src/index.tsx”,
+ “start”: “remotion preview src/index.js”,
Then run the animation using npm start.
Building the StarWars Animation
Now we have a basic understanding of Remotion and the different components on offer, we can challenge ourselves and have a little bit more fun. Let’s build our own version of the iconic Star Wars title intro screen. We want to be able to render a sparkly star background with bright yellow text that scrolls up the screen. We can use the knowledge we have from our “Hello, World!” example as a starting off point.
Let’s start by creating the files we need. In the src folder, create a starWarsIndex.js file and a StarWars folder. In the StarWars folder, create a further four files: starWars.js, starWars.css, starsBackground.js, starsBackground.css.
When you’re done, the src folder should look like this:
.
├── Demo
│ └── Files from “Hello, World!” demo
├── index.js
├── StarWars
│ ├── starsBackground.css
│ ├── starsBackground.js
│ ├── starWars.css
│ └── starWars.js
└── starWarsIndex.js
Creating the Scrolling Text
First, we start with a StarWarsVideo component, which will render a Composition component to define the video properties. As the scrolling text is longer, we define a higher durationInFrames number.
Add the following to src/starWarsIndex.js:
import {registerRoot, Composition, Sequence} from ‘remotion’;
import {useEffect, useState} from ‘react’
import { LoremIpsum } from ‘lorem-ipsum’;
import Stars from ‘./StarWars/starsBackground’;
import StarWars from ‘./StarWars/starWars’;
const StarWarsVideo = () = > {
const [textBlocks, setTextBlocks] = useState([]);
useEffect(() = > {
setTextBlocks([
lorem.generateSentences(5),
lorem.generateSentences(5),
lorem.generateSentences(5),
])
}, [])
return (
);
};
registerRoot(StarWarsVideo);
We also need to define some React state. In this Star Wars example, we’re going to make use of React state and props to generate random text each time we reload the video. Using the lorem-ipsum npm module we can make the text responsive and different every time it’s generated.
Let’s install the module:
npm i lorem-ipsum
Then, in the same file add:
const lorem = new LoremIpsum({
sentencesPerParagraph: {
max: 8,
min: 4
},
wordsPerSentence: {
max: 16,
min: 4
}
});
const Video = ({ textBlocks }) = > {
return (
)
}
const StarWarsVideo = () = > { … };
registerRoot(StarWarsVideo);
For the Sequence components, we can layer up two main components for the video. The Stars component will render the starry background, and the StarWars component will render the scrolling yellow text. The star background is using standard CSS animation and transforms to display stars. The StarWars component is where we start getting back into Remotion-based animations. We can use the Spring helper function to control the top position, rotate, and translate CSS transform properties to animate the scrolling of the text based on the current time in the video.
Add the following to src/starWars.js:
import React from ‘react’;
import ‘./starWars.css’;
import {spring, useCurrentFrame} from ‘remotion’;
const StarWars = ({ textBlocks }) = > {
const frame = useCurrentFrame()
const fps = 6000;
const top = spring({
frame,
from: 0,
to: -6000,
fps,
})
const rotate = spring({
frame,
from: 20,
to: 25,
fps,
})
const translateZ = spring({
frame,
from: 0,
to: -2500,
fps,
})
return (
Episode IV
A New Hope
{
textBlocks.map((block, index) = > {
return (
{block}
)
})
}
)
}
export default StarWars;
Note that we’re rendering out the textBlocks prop, which will be our random text each time we generate the video.
All that remains now is to create the Stars component. Add the following to src/starsBackground.js:
import React from ‘react’;
import ‘./starsBackground.css’;
const Stars = () = > {
return (
);
}
export default Stars;
Also add the following styles to src/starsWars.css:
.fade {
position: relative;
width: 100%;
min-height: 60vh;
top: -25px;
z-index: 1;
}
.star-wars {
display: flex;
justify-content: center;
position: relative;
height: 800px;
color: #feda4a;
font-family: ‘Pathway Gothic One’, sans-serif;
font-size: 500%;
font-weight: 600;
letter-spacing: 6px;
line-height: 150%;
perspective: 400px;
text-align: justify;
}
.crawl {
position: relative;
top: 9999px;
transform-origin: 50% 100%;
}
.crawl > .title {
font-size: 90%;
text-align: center;
}
.crawl > .title h1 {
margin: 0 0 100px;
text-transform: uppercase;
}
The src/starsBackground.css is too large to list here. Please grab its contents from the GitHub repo and add it to your own project.
This will result in a fully functional Stars Wars intro video, created using only code, and no video editing software.
The last step to get the StarWars example running is to add the following script to the package.json file:
“start:starwars”: “remotion preview src/starWarsIndex.js”,
And there we have it — a StarWars intro, fully coded in React.
If you want to insert the actual StarWars text, grab it from here and alter the useEffect method call in src/starWarsIndex.js:
useEffect(() = > {
setTextBlocks([
– lorem.generateSentences(5),
– lorem.generateSentences(5),
– lorem.generateSentences(5),
+ “It is a period of civil war. Rebel spaceships…”,
+ “Pursued by the Empire’s sinister agents…”
])
}, [])
Awesome!
Conclusion
We’ve made two examples showcasing the power of Remotion, each of varying complexity. However, this is just scratching the surface of how capable Remotion is. Below are some of the other features that Remotion provides that we didn’t cover.
Don’t forget, all of the code is available on GitHub.
Data Fetching
To add a reactive element to your videos, you can fetch data to help populate the content at build time. Remotion provides hooks to handle the fetching of data, such as continueRender. delayRender can also be used in circumstances to pause the rendering of the video content until the data has been fetched. These features could be used to generate videos based on data imputed into a database. Or they can pull data from the server — for example, creating an intro video for a blog post and pulling the blog’s title and hero image from a server.
Parameterized Rendering
From the examples we used earlier, we could control the flow of props getting passed into video elements. This allows the videos to be responsive. However, this requires code changes each time. With parameterized rendering, you can pass the data in as part of the build command. This means that you could, as part of a CI/CD flow, generate videos depending on passed-in data — for example, auto-generating onboarding videos with the person’s name and title passed in as props.
Asset Imports
You don’t need to create elements only using CSS. You can also import other assets such as images, existing videos, and audio files into your project.
There are many more additional features, and new features are being released regularly in Remotion. Remotion is a fully developed project and is making big steps in the JavaScript-based video space. This is a very powerful tool with a realm of possibilities yet to uncover.
If you’ve used Remotion to build something cool, let me know on Twitter.