KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use antialiased method in Playwright Internal
Best JavaScript code snippet using playwright-internal
InterestModal.jsx
Source:InterestModal.jsx 
1import React from 'react'2const InterestModal = () => {3 return (4 <>5 <div className="h-screen flex items-center py-14 justify-start flex-col bg-slate-50">6 {/*-----Header------*/}7 <div className="lg:w-2/4 w-5/6 rounded-t-lg bg-gray-200 text-stone-500 py-2 px-3">8 <button className="bg-transparent transition ease-in-out delay-100 text-slate-400 hover:text-slate-6009 hover:font-semibold font-normal py-3 px-4 rounded">10 X11 </button>12 </div>13 {/*-----body------*/}14 <div className="lg:w-2/4 w-5/6 bg-stone-100">15 <div className="p-4 flex items-start justify-start text-xl text-gray-500 font-semibold 16 sm:text-lg shadow-md">Choose your interests17 </div>18 <div className="overflow-y-scroll shadow-inner h-72 grid grid-cols-3 gap-4 gap-y-7 py-8 px-4">19 <div><input type="checkbox" value="hackathon" name="hackathon" id="hackathon" 20 className="accent-sky-600 mx-2" />21 <label className="text-sm antialiased font-medium22 font-sans md:text-base lg:text-base tracking-wide 23 text-black">Hackathon</label>24 </div>25 <div><input type="checkbox" value="fend" name="fend" id="fend" 26 className="accent-sky-600 mx-2" />27 <label className="text-sm antialiased font-medium28 font-sans md:text-base lg:text-base tracking-wide 29 text-black">Frontend developer</label>30 </div>31 <div><input type="checkbox" value="bend" name="bend" id="bend" 32 className="accent-sky-600 mx-2" />33 <label className="text-sm antialiased font-medium34 font-sans md:text-base lg:text-base tracking-wide 35 text-black">Backend developer</label>36 </div>37 <div><input type="checkbox" value="sql" name="sql" id="sql" 38 className="accent-sky-600 mx-2" />39 <label className="text-sm antialiased font-medium40 font-sans md:text-base lg:text-base tracking-wide 41 text-black">SQL</label>42 </div>43 <div><input type="checkbox" value="nosql" name="nosql" id="nosql" 44 className="accent-sky-600 mx-2" />45 <label className="text-sm antialiased font-medium46 font-sans md:text-base lg:text-base tracking-wide 47 text-black">noSQL</label>48 </div>49 <div><input type="checkbox" value="sdev" name="sdev" id="sdev" 50 className="accent-sky-600 mx-2" />51 <label className="text-sm antialiased font-medium52 font-sans md:text-base lg:text-base tracking-wide 53 text-black">Software developer</label>54 </div>55 <div><input type="checkbox" value="devops" name="devops" id="devops" 56 className="accent-sky-600 mx-2" />57 <label className="text-sm antialiased font-medium58 font-sans md:text-base lg:text-base tracking-wide 59 text-black">Devops</label>60 </div>61 <div><input type="checkbox" value="cysec" name="cysec" id="cysec" 62 className="accent-sky-600 mx-2" />63 <label className="text-sm antialiased font-medium64 font-sans md:text-base lg:text-base tracking-wide 65 text-black">Cyber security</label>66 </div>67 <div><input type="checkbox" value="web3" name="web3" id="web3" 68 className="accent-sky-600 mx-2" />69 <label className="text-sm antialiased font-medium70 font-sans md:text-base lg:text-base tracking-wide 71 text-black">Web 3.0</label>72 </div>73 <div><input type="checkbox" value="iot" name="iot" id="iot" 74 className="accent-sky-600 mx-2" />75 <label className="text-sm antialiased font-medium76 font-sans md:text-base lg:text-base tracking-wide 77 text-black">IOT</label>78 </div>79 <div><input type="checkbox" value="software" name="software" id="software" 80 className="accent-sky-600 mx-2" />81 <label className="text-sm antialiased font-medium82 font-sans md:text-base lg:text-base tracking-wide 83 text-black">Software</label>84 </div>85 <div><input type="checkbox" value="hardware" name="hardware" id="hardware" 86 className="accent-sky-600 mx-2" />87 <label className="text-sm antialiased font-medium88 font-sans md:text-base lg:text-base tracking-wide 89 text-black">Hardware</label>90 </div>91 <div><input type="checkbox" value="arvr" name="arvr" id="arvr" 92 className="accent-sky-600 mx-2" />93 <label className="text-sm antialiased font-medium94 font-sans md:text-base lg:text-base tracking-wide 95 text-black">AR/VR</label>96 </div>97 <div><input type="checkbox" value="ftech" name="ftech" id="ftech" 98 className="accent-sky-600 mx-2" />99 <label className="text-sm antialiased font-medium100 font-sans md:text-base lg:text-base tracking-wide 101 text-black">Fintech</label>102 </div>103 <div><input type="checkbox" value="cpad" name="cpad" id="cpad" 104 className="accent-sky-600 mx-2" />105 <label className="text-sm antialiased font-medium106 font-sans md:text-base lg:text-base tracking-wide 107 text-black">Cross platform app developer</label>108 </div>109 <div><input type="checkbox" value="appdev" name="appdev" id="appdev" 110 className="accent-sky-600 mx-2" />111 <label className="text-sm antialiased font-medium112 font-sans md:text-base lg:text-base tracking-wide 113 text-black">App developer</label>114 </div>115 <div><input type="checkbox" value="uiux" name="uiux" id="uiux" 116 className="accent-sky-600 mx-2" />117 <label className="text-sm antialiased font-medium118 font-sans md:text-base lg:text-base tracking-wide 119 text-black">UI/UX</label>120 </div>121 <div><input type="checkbox" value="startups" name="startups" id="startups" 122 className="accent-sky-600 mx-2" />123 <label className="text-sm antialiased font-medium124 font-sans md:text-base lg:text-base tracking-wide 125 text-black">Startups</label>126 </div>127 <div><input type="checkbox" value="deskapp" name="deskapp" id="deskapp" 128 className="accent-sky-600 mx-2" />129 <label className="text-sm antialiased font-medium130 font-sans md:text-base lg:text-base tracking-wide 131 text-black">Desktop apps</label>132 </div>133 <div><input type="checkbox" value="meta" name="meta" id="meta" 134 className="accent-sky-600 mx-2" />135 <label className="text-sm antialiased font-medium136 font-sans md:text-base lg:text-base tracking-wide 137 text-black">Metaverse</label>138 </div>139 <div><input type="checkbox" value="nft" name="nft" id="nft" 140 className="accent-sky-600 mx-2" />141 <label className="text-sm antialiased font-medium142 font-sans md:text-base lg:text-base tracking-wide 143 text-black">NFT</label>144 </div>145 <div><input type="checkbox" value="bigdata" name="bigdata" id="bigdata" 146 className="accent-sky-600 mx-2" />147 <label className="text-sm antialiased font-medium148 font-sans md:text-base lg:text-base tracking-wide 149 text-black">Big data</label>150 </div>151 <div><input type="checkbox" value="db" name="db" id="db" 152 className="accent-sky-600 mx-2" />153 <label className="text-sm antialiased font-medium154 font-sans md:text-base lg:text-base tracking-wide 155 text-black">Databases</label>156 </div>157 <div><input type="checkbox" value="aws" name="aws" id="aws" 158 className="accent-sky-600 mx-2" />159 <label className="text-sm antialiased font-medium160 font-sans md:text-base lg:text-base tracking-wide 161 text-black">Amazon Web Services (AWS)</label>162 </div>163 <div><input type="checkbox" value="serversp" name="serversp" id="serversp" 164 className="accent-sky-600 mx-2" />165 <label className="text-sm antialiased font-medium166 font-sans md:text-base lg:text-base tracking-wide 167 text-black">Server space</label>168 </div>169 <div><input type="checkbox" value="azure" name="azure" id="azure" 170 className="accent-sky-600 mx-2" />171 <label className="text-sm antialiased font-medium172 font-sans md:text-base lg:text-base tracking-wide 173 text-black">MicrosoftAzure</label>174 </div>175 <div><input type="checkbox" value="gcp" name="gcp" id="gcp" 176 className="accent-sky-600 mx-2" />177 <label className="text-sm antialiased font-medium178 font-sans md:text-base lg:text-base tracking-wide 179 text-black">Google Cloud Platform</label>180 </div>181 <div><input type="checkbox" value="ibm" name="ibm" id="ibm" 182 className="accent-sky-600 mx-2" />183 <label className="text-sm antialiased font-medium184 font-sans md:text-base lg:text-base tracking-wide 185 text-black">IBM Cloud Services</label>186 </div>187 <div><input type="checkbox" value="acc" name="acc" id="acc" 188 className="accent-sky-600 mx-2" />189 <label className="text-sm antialiased font-medium190 font-sans md:text-base lg:text-base tracking-wide 191 text-black">Adobe Creative Cloud</label>192 </div>193 <div><input type="checkbox" value="digiocean" name="digiocean" id="digiocean" 194 className="accent-sky-600 mx-2" />195 <label className="text-sm antialiased font-medium196 font-sans md:text-base lg:text-base tracking-wide 197 text-black">Digital Ocean</label>198 </div>199 <div><input type="checkbox" value="oraclec" name="oraclec" id="oraclec" 200 className="accent-sky-600 mx-2" />201 <label className="text-sm antialiased font-medium202 font-sans md:text-base lg:text-base tracking-wide 203 text-black">Oracle Cloud</label>204 </div>205 <div><input type="checkbox" value="linux" name="linux" id="linux" 206 className="accent-sky-600 mx-2" />207 <label className="text-sm antialiased font-medium208 font-sans md:text-base lg:text-base tracking-wide 209 text-black">Linux</label>210 </div>211 <div><input type="checkbox" value="windows" name="windows" id="windows" 212 className="accent-sky-600 mx-2" />213 <label className="text-sm antialiased font-medium214 font-sans md:text-base lg:text-base tracking-wide 215 text-black">Windows</label>216 </div>217 </div>218 </div>219 {/*------footer--------*/}220 <div className="lg:w-2/4 w-5/6 rounded-b-lg bg-stone-200 221 text-stone-500 py-1 px-3 shadow-md">222 <div className="mb-0 mt-1 flex items-center justify-end bg-stone-200 mx-6 pb-1 pt-2">223 <button className="text-gray-900 transition ease-in-out delay-100 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800">224 Save225 </button>226 </div>227 </div>228 </div>229 </>230 )231}...
Dashboard.js
Source:Dashboard.js
1import React, { Component } from 'react';2import { Loading } from '../';3class Dashboard extends Component {4 state = {5 viewid: 0 // íì´ì§ ì¤ì ì ì¬ì©ëë ìí 0: ë¡ë©, 1: ë©ì¸ íë©´6 }7 constructor(props) {8 super(props);9 this.props.userNoteDataLoad();10 this.state.viewid = 0;11 //console.log(this.props.NotesData);12 }13 loadingCompoment(ThisViewId, callback) {14 setTimeout(() => {15 if (this.props.viewId === ThisViewId) { // ì¬ì©ìê° ë·°ë¥¼ ì´ëíì§ìê³ ê³ì 기ë¤ë¦´ê²½ì°16 if (this.props.api_fetching === false) { // API ì§ìê° ì§íì¤ì´ ìëê²½ì°17 this.setState({ viewid: 1 }); // ë´ë¶ ë·° ìí를 ì¤ì í©ëë¤ 1 : ëìë³´ë ì¶ë ¥18 }else{ //api 모ëì´ ê³ì ì§ì ìíì¼ê²½ì°19 callback(1, this.loadingCompoment.bind(this)); //ë 기ë¤ë¦½ëë¤..20 }21 } //기ë¤ë¦¬ì§ ìê³ ë·°ë¥¼ ì´ííì ê²½ì° ê·¸ë¥ ì¢
ë£í©ëë¤22 }, 1000);23 }24 componentDidMount() {25 // ì§ì ë ìê° ì´íì content state.api ê° ê³ì ì§ì ì¤ì¸ì§ íì¸í©ëë¤26 // ìì
ì ë¤ ëë¸ ìíë©´ íë©´ì¼ë¡ 리 ëëë§ íê²ë©ëë¤ ìì
ì¤ì¼ê²½ì° callbackì¼ë¡ ë¤ì ë¡ë©í¨ì를 í¸ì¶í©ëë¤27 this.loadingCompoment(1, this.loadingCompoment.bind(this));28 //console.log(this.props.NotesData);29 }30 render() {31 let content;32 let LearningCount_0 = [];33 let LearningCount_1 = [];34 let LearningCount_2 = [];35 let LearningCount_3 = [];36 let LearningCount_forever = [];37 let totalLearningCount = 0;38 let totalNotesCount = 0;39 switch (this.state.viewid) {40 case 1:41 if (Object.keys(this.props.NotesData).length > 0) { // ë¨ì´ì¥ 리ì¤í¸ ë°ì´í°ê° ììê²½ì°42 const toDay = new Date(); //íì¬ ìê°43 this.props.NotesData.map((data) => { //ë
¸í¸ 리ì¤í¸ ë°ë³µ44 let noteDate = new Date(data.Learning_Day); // ë
¸í¸ ë§ì§ë§ íìµì¼ì ì ì¥45 noteDate = (toDay.getTime() - noteDate.getTime()) / 1000 / 60 / 60 / 24; // ì¤ë - ë
¸í¸ ë§ì§ë§ íìµì¼ ìê°ì°¨ ê³ì°46 totalLearningCount = totalLearningCount + data.Learning_Count;47 totalNotesCount = totalNotesCount + 1;48 if (data.Learning_Count === 0) {49 console.log(`ë±ë¡ë§í ë¨ì´ì¥`);50 if (noteDate >= 1) {51 console.log(`1ì¼ ì´ì ì§ë¨`);52 LearningCount_0.push(53 <div class="xl:w-80 w-full mt-4 mr-4 h-32 bg-white rounded-lg shadow-sm p-4 transition duration-500 ease-in-out transform hover:-translate-y-2 hover:scale-105">54 <span class="animate-ping absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>55 <span class="absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>56 <h1 class="subpixel-antialiased text-xl font-semibold text-gray-600">{data.name}</h1>57 <hr class="m-2"></hr>58 <h2 class="subpixel-antialiased text-base text-gray-300">{Math.floor(noteDate)}ì¼ ëì ë°©ì¹íìµëë¤</h2>59 <h3 class="subpixel-antialiased text-sm text-gray-300">ì§ê¸ ììíì¸ì!</h3>60 </div>61 );62 }63 } else if (data.Learning_Count === 1) { //2íë
ì¶ì² ë¨ì´ì¥64 console.log(`íë² íìµ ë¨ì´ì¥`);65 if (noteDate >= 1) {66 console.log(`1ì¼ ì´ì ì§ë¨`);67 LearningCount_1.push(68 <div class="xl:w-80 w-full mt-4 mr-4 h-32 bg-white rounded-lg shadow-sm p-4 transition duration-500 ease-in-out transform hover:-translate-y-2 hover:scale-105">69 <span class="animate-ping absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>70 <span class="absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>71 <h1 class="subpixel-antialiased text-xl font-semibold text-gray-600">{data.name}</h1>72 <hr class="m-2"></hr>73 <h2 class="subpixel-antialiased text-base text-gray-300">1íë
íì§ {Math.floor(noteDate)}ì¼ì´ ì§ë¬ìµëë¤</h2>74 </div>75 );76 }77 } else if (data.Learning_Count === 2) { //3 íë
ì¶ì² ë¨ì´ì¥78 console.log(`ëë² íìµ ë¨ì´ì¥`);79 if (noteDate >= 3) {80 console.log(`3ì¼ ì´ì ì§ë¨`);81 LearningCount_2.push(82 <div class="xl:w-80 w-full mt-4 mr-4 h-32 bg-white rounded-lg shadow-sm p-4 transition duration-500 ease-in-out transform hover:-translate-y-2 hover:scale-105">83 <span class="animate-ping absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>84 <span class="absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>85 <h1 class="subpixel-antialiased text-xl font-semibold text-gray-600">{data.name}</h1>86 <hr class="m-2"></hr>87 <h2 class="subpixel-antialiased text-base text-gray-300">2íë
íì§ {Math.floor(noteDate)}ì¼ì´ ì§ë¬ìµëë¤</h2>88 </div>89 );90 }91 } else if (data.Learning_Count === 3) { // 4íë
ì¶ì² ë¨ì´ì¥92 console.log(`ì¸ë² íìµ ë¨ì´ì¥`);93 if (noteDate >= 7) {94 console.log(`7ì¼ ì´ì ì§ë¨`);95 LearningCount_3.push(96 <div class="xl:w-80 w-full mt-4 mr-4 h-32 bg-white rounded-lg shadow-sm p-4 transition duration-500 ease-in-out transform hover:-translate-y-2 hover:scale-105">97 <span class="animate-ping absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>98 <span class="absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>99 <h1 class="subpixel-antialiased text-xl font-semibold text-gray-600">{data.name}</h1>100 <hr class="m-2"></hr>101 <h2 class="subpixel-antialiased text-base text-gray-300">3íë
íì§ {Math.floor(noteDate)}ì¼ì´ ì§ë¬ìµëë¤</h2>102 </div>103 );104 }105 } else if (data.Learning_Count >= 4) { //ì ê¸°ë³µìµ ì¶ì²106 console.log(`ì¸ë²ì´ì íìµ ë¨ì´ì¥`);107 if (noteDate >= 30) {108 console.log(`30ì¼ ì´ì ì§ë¨`);109 LearningCount_forever.push(110 <div class="xl:w-80 w-full mt-4 mr-4 h-32 bg-white rounded-lg shadow-sm p-4 transition duration-500 ease-in-out transform hover:-translate-y-2 hover:scale-105">111 <span class="animate-ping absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>112 <span class="absolute -m-5 h-3 w-3 rounded-full bg-red-400 opacity-75"></span>113 <h1 class="subpixel-antialiased text-xl font-semibold text-gray-600">{data.name}</h1>114 <hr class="m-2"></hr>115 <h2 class="subpixel-antialiased text-base text-gray-300">ë§ì§ë§ íìµì¼ë¡ë¶í° {Math.floor(noteDate)}ì¼ì´ ì§ë¬ìµëë¤</h2>116 </div>117 );118 }119 }120 });121 content = (122 <div class="flex flex-col space-y-8">{/* ì¶ì²íìµ ì½í
ì¸ íì´í */}123 <div>124 <h1 class="subpixel-antialiased text-3xl font-semibold text-gray-600">ì¤ëì ì¶ì² íìµ íë</h1>125 </div>126 {LearningCount_0.length !== 0 && (127 <div>128 <div>129 <h1 class="subpixel-antialiased text-2xl font-semibold text-gray-600">1íë
ì¶ì² ë¨ì´ì¥</h1>130 <h1 class="subpixel-antialiased text-gray-400">ë¨ì´ì¥ ìì±ì´í 1ì¼ì´ì ì§ë ë¨ì´ì¥ ì
ëë¤</h1>131 </div>132 <div class="flex flex-row flex-wrap">133 {LearningCount_0}134 </div>135 </div>136 )}137 {LearningCount_1.length !== 0 && (138 <div>139 <div>140 <h1 class="subpixel-antialiased text-2xl font-semibold text-gray-600">2íë
ì¶ì² ë¨ì´ì¥</h1>141 <h1 class="subpixel-antialiased text-gray-400">1íë
íì§ 1ì¼ì´ì ì§ë ë¨ì´ì¥ ì
ëë¤</h1>142 </div>143 <div class="flex flex-row flex-wrap">144 {LearningCount_1}145 </div>146 </div>147 )}148 {LearningCount_2.length !== 0 && (149 <div>150 <div>151 <h1 class="subpixel-antialiased text-2xl font-semibold text-gray-600">3íë
ì¶ì² ë¨ì´ì¥</h1>152 <h1 class="subpixel-antialiased text-gray-400">2íë
íì§ 3ì¼ì´ì ì§ë ë¨ì´ì¥ ì
ëë¤</h1>153 </div>154 <div class="flex flex-row flex-wrap">155 {LearningCount_2}156 </div>157 </div>158 )}159 {LearningCount_3.length !== 0 && (160 <div>161 <div>162 <h1 class="subpixel-antialiased text-2xl font-semibold text-gray-600">4íë
ì¶ì² ë¨ì´ì¥</h1>163 <h1 class="subpixel-antialiased text-gray-400">3íë
íì§ 7ì¼ì´ì ì§ë ë¨ì´ì¥ ì
ëë¤</h1>164 </div>165 <div class="flex flex-row flex-wrap">166 {LearningCount_3}167 </div>168 </div>169 )}170 {LearningCount_forever.length !== 0 && (171 <div>172 <div>173 <h1 class="subpixel-antialiased text-2xl font-semibold text-gray-600">ì ê¸°ë³µìµ ì¶ì² ë¨ì´ì¥</h1>174 <h1 class="subpixel-antialiased text-gray-400">ê°ë²¼ì´ ë§ìì¼ë¡ ë³µìµ ì´ë ì¸ì?</h1>175 </div>176 <div class="flex flex-row flex-wrap">177 {LearningCount_forever}178 </div>179 </div>180 )}181 { LearningCount_1.length <= 0 && LearningCount_2.length <= 0 && LearningCount_3.length <= 0 && LearningCount_forever.length <= 0 ? (182 <div>183 <h1 class="subpixel-antialiased text-2xl font-semibold text-gray-600">꾸ì¤í íê³ ê³ìë¤ì!</h1>184 <h1 class="subpixel-antialiased text-gray-400">ì í¬ê° ì´í´ë´¤ëë° {totalNotesCount}ê°ì ë¨ì´ì¥ ì¤ì ì¶ì²ëë¦´ê» ìì´ì</h1>185 <h1 class="subpixel-antialiased text-gray-400">ë¨ì´ì¥ì ë ë§ë¤ì´ì ê³µë¶ í´ë³¼ê¹ì?</h1>186 </div>187 ):'ì°ë¦¬ ì´ì¬í í´ë´ì!'}188 </div>189 );190 }else{191 content = (192 <div>193 <h1 class="subpixel-antialiased text-2xl font-semibold text-gray-600">ìë
íì¸ì?</h1>194 <h1 class="subpixel-antialiased text-gray-400">ì§ê¸ì ì¶ì²í ë¨ì´ì¥ì´ ìì´ì ë¨ì´ì¥ 먼ì ì°ë¦¬ ë§ë¤ì´ë´ì!</h1>195 </div>196 );197 }198 break;199 default:200 content = (<Loading />);201 break;202 }203 return (204 <div>205 {content}206 </div>207 );208 }209}...
Fix.jsx
Source:Fix.jsx
1export function Fix() {2 return (3 <div className="bg-slate-light py-20 px-6 md:px-0">4 <div className="max-w-[790px] m-auto">5 <h2 className="font-medium text-mobile-h2 lg:text-desktop-h2 font-ibm-sans tracking-tight text-slate-headline">6 Refactorings + Atomic Habits = ð7 </h2>8 <h3 className="font-light text-slate-headline mt-[40px] antialiased text-mobile-h3 lg:text-desktop-h3 tracking-wide">9 A proven way to make changes easier.10 </h3>11 <p className="mt-6 text-xl leading-9 antialiased font-normal">12 When people say "refactoring", they usually mean "I've rewritten part13 of the code. Hopefully, it's better!"14 </p>15 <p className="mt-6 text-xl leading-9 antialiased font-normal">16 In his book, Martin Fowler defined refactoring as changing the17 structure of the code without changing its observable behavior.18 </p>19 <p className="mt-6 text-xl leading-9 antialiased font-normal">20 There are <strong>refactoring recipes</strong> that you can follow to21 transform your code <strong>safely</strong>. Fowler's published the22 first edition of his book in 1999!23 </p>24 <p className="mt-6 text-xl leading-9 antialiased font-normal">25 These have then been battle-tested for years, in the trenches! They26 will change the way you approach untested and undocumented code.27 </p>28 <p className="mt-6 text-xl leading-9 antialiased font-normal">29 Fixing a bug is not refactoring. Improving a feature is not30 refactoring. But here, you will learn how you can refactor, so fixing31 a bug is easy and improving a feature is safe!32 </p>33 <h3 className="font-light text-slate-headline mt-[40px] antialiased text-mobile-h3 lg:text-desktop-h3 tracking-wide">34 A safer way to change code.35 </h3>36 <p className="mt-6 text-xl leading-9 antialiased font-normal">37 It's about following <strong>precise</strong> steps that maximize the38 safety of your changes. Small, specific moves that do one thing, and39 do it well.40 </p>41 <p className="mt-6 text-xl leading-9 antialiased font-normal">42 It's about being a professional JavaScript developer who can clean43 code while shipping value to customers every single time.44 </p>45 <p className="mt-6 text-xl leading-9 antialiased font-normal">46 I call that:{" "}47 <strong48 style={{49 color: "rgb(255, 0, 115)",50 fontSize: "1.35em",51 fontWeight: "300",52 fontStyle: "italic",53 fontFamily: "IBM Plex Sans",54 paddingLeft: "0.25em",55 verticalAlign: "bottom",56 }}57 >58 Atomic Refactorings59 </strong>60 </p>61 <p className="mt-6 text-xl leading-9 antialiased font-normal">62 In this course, you will learn all the little refactoring moves that63 are useful to tackle any kind of JavaScript application!64 </p>65 <h3 className="font-light text-slate-headline mt-[40px] antialiased text-mobile-h3 lg:text-desktop-h3 tracking-wide">66 Learn faster, retain longer.67 </h3>68 <p className="mt-6 text-xl leading-9 antialiased font-normal">69 I learn best when I can experiment myself. Reading a catalog of70 refactorings is nice, but it really clicked after I spent years71 figuring how to use these on actual code.72 </p>73 <p className="mt-6 text-xl leading-9 antialiased font-normal">74 Among the 61 refactoring moves you could learn, some of them are more75 useful than others. Some are more common to use in JavaScript. You76 also get better results when you learn them in a <u>specific</u>{" "}77 orderâ¦78 </p>79 <p className="mt-6 text-xl leading-9 antialiased font-normal">80 This course spread refactoring moves in different modules. Thus, you81 start with the <strong>simplest and most valuable ones</strong>. The82 essentials!83 </p>84 <p className="mt-6 text-xl leading-9 antialiased font-normal">85 Then, as you progress through the course, you will get more options to86 address technical debt. Larger moves will allow you to transform87 codebases at scale!88 </p>89 <p className="mt-6 text-xl leading-9 antialiased font-normal">90 This course is based on experience working with JS code, front-end,91 and back-end. I'm giving you all the tools you need to hone your92 refactoring skills:93 </p>94 <ul className="mt-6 text-xl text-gray-600 leading-9 antialiased font-normal check">95 <li>a learning path that makes sense</li>96 <li>step-by-step transformation of the code</li>97 <li>recordings of me performing each move on concrete code</li>98 <li>99 interactive playgrounds tailored for each move, where you will100 practice and improve your mastering101 </li>102 <li>cheat sheets and tips for the combo you can use</li>103 </ul>104 <h3 className="font-light text-slate-headline mt-[40px] antialiased text-mobile-h3 lg:text-desktop-h3 tracking-wide">105 You will learn a new habit.106 </h3>107 <p className="mt-6 text-xl leading-9 antialiased font-normal">108 I'm really into personal productivity and habits. Getting Things Done,109 Atomic Habits, Deep Work, etc. I've read and applied all of that!110 </p>111 <p className="mt-6 text-xl leading-9 antialiased font-normal">112 Your journey starts when you get into this course. I want to support113 you all along the way. You won't just be learning moves. You will be114 following a path that I've optimized for turning these lessons into{" "}115 <strong>concrete actions</strong>.116 </p>117 <p className="mt-6 text-xl leading-9 antialiased font-normal">118 Good habits make you do the right things, without you having to think119 about it.120 </p>121 <p className="mt-6 text-xl leading-9 antialiased font-bold">122 You will adopt the habit of refactoring code!123 </p>124 <h3 className="font-light text-slate-headline mt-[40px] antialiased text-mobile-h3 lg:text-desktop-h3 tracking-wide">125 Step up your JavaScript game with professional moves!126 </h3>127 <p className="mt-6 text-xl leading-9 antialiased font-normal">128 Following this course, you'll learn how to:129 </p>130 <ul className="mt-6 text-xl text-gray-600 leading-9 antialiased font-normal star">131 <li>clean up code, as you go</li>132 <li>ship features in time</li>133 <li>134 make it easy to finally put this code under tests, without tests!135 </li>136 <li>137 go back and forth different coding styles, molding JS to your will138 </li>139 <li>be confident in your skills to tame any JavaScript codebase</li>140 </ul>141 <p className="mt-6 text-xl leading-9 antialiased font-normal">142 You won't just read some theory and code. You'll be guided to actively143 create new habits! These moves will become part of your reflexes when144 coding, so you don't even <em>think</em> about them.145 </p>146 <p className="mt-6 text-xl leading-9 antialiased font-normal">147 If dealing with a tangled JavaScript behemoth is your daily life, this148 will make it brighter!149 </p>150 {/* TODO: my intro video to the course*/}151 </div>152 </div>153 );...
product.js
Source:product.js
1import Head from 'next/head'2import Image from 'next/image'3export default function Product() {4 return (5 <>6 {/* Head Html */}7 <Head>8 <title>Product</title>9 <meta name="viewport" content="initial-scale=1.0, width=device-width" />10 </Head>11 {/* Hero */}12 <div className="container mx-auto">13 <div className="images w-full h-full relative mb-28 font-display">14 <Image15 src="/assets/rupixen1.svg"16 width={1563}17 height={363}18 alt="responsive"19 alt="rupixen"20 />21 <div className="content flex flex-col w-3/12 absolute bottom-10 right-10 text-white md:bottom-5 md:right-3 md:w-4/12 sm:bottom-5 sm:right-0 sm:w-5/12">22 <h1 className="antialiased font-bold xl:text-4xl lg:text-2xl md:text-xl sm:text-base">Lonsre</h1>23 <h1 className="antialiased font-semibold xl:text-2xl lg:text-xl md:text-xl sm:text-base">Casual Black Notebook</h1>24 <p className="antialiased font-light md:text-base sm:text-xs">Environtment friendly white paper, cool style, simple and elegant.</p>25 </div>26 </div>27 {/* Product Section */}28 <div className="product-list mb-28">29 <div className="flex flex-col">30 <div className="title flex flex-col items-center justify-center mb-20">31 <Image32 src="/assets/Logo.svg"33 width="114"34 height="54"35 alt="Logo"36 />37 <h1 className="antialiased font-bold text-xl">Our Product.</h1>38 </div>39 </div>40 {/* Card Product */}41 <div className="flex flex-row items-center justify-center p-15">42 <div className="card flex flex-col mr-10">43 <div className="images">44 <Image45 src="/assets/card-1.svg"46 width={207}47 height={191}48 alt="card-1"49 />50 </div>51 <div className="Content mb-5">52 <h1 className="antialiased font-bold text-xl">Pink Notebook</h1>53 <p className="antialiased font-normal text-lg">Whitepaper 90 Pages</p>54 <p className="antialiased font-light text-md">From 20$</p>55 </div>56 <div className="button">57 <a href="#" className="flex flex-row items-center font-bold text-secondary text-xl py-5 bg-black bg-opacity-80 w-full h-full justify-center">58 <div className="flex items-center justify-center">59 <Image60 src="/assets/cart.svg"61 width="25"62 height="25"63 alt="cart"64 />65 </div>66 Buy Now67 </a>68 </div>69 </div>70 <div className="card flex flex-col mr-10">71 <div className="images">72 <Image73 src="/assets/card-2.svg"74 width={207}75 height={191}76 alt="card-2"77 priority78 />79 </div>80 <div className="Content mb-5">81 <h1 className="antialiased font-bold text-xl">Pink Notebook</h1>82 <p className="antialiased font-normal text-lg">Whitepaper 90 Pages</p>83 <p className="antialiased font-light text-md">From 20$</p>84 </div>85 <div className="button">86 <a href="#" className="flex flex-row items-center font-bold text-secondary text-xl py-5 bg-black bg-opacity-80 w-full h-full justify-center">87 <div className="flex items-center justify-center">88 <Image89 src="/assets/cart.svg"90 width="25"91 height="25"92 alt="cart"93 />94 </div>95 Buy Now96 </a>97 </div>98 </div>99 <div className="card flex flex-col mr-10">100 <div className="images">101 <Image102 src="/assets/card-4.svg"103 width={207}104 height={191}105 alt="card-4"106 priority107 />108 </div>109 <div className="Content mb-5">110 <h1 className="antialiased font-bold text-xl">Pink Notebook</h1>111 <p className="antialiased font-normal text-lg">Whitepaper 90 Pages</p>112 <p className="antialiased font-light text-md">From 20$</p>113 </div>114 <div className="button">115 <a href="#" className="flex flex-row items-center font-bold text-secondary text-xl py-5 bg-black bg-opacity-80 w-full h-full justify-center">116 <div className="flex items-center justify-center">117 <Image118 src="/assets/cart.svg"119 width="25"120 height="25"121 alt="cart"122 />123 </div>124 Buy Now125 </a>126 </div>127 </div>128 <div className="card flex flex-col">129 <div className="images">130 <Image131 src="/assets/card-3.svg"132 width={207}133 height={191}134 alt="card-3"135 />136 </div>137 <div className="Content mb-5">138 <h1 className="antialiased font-bold text-xl">Pink Notebook</h1>139 <p className="antialiased font-normal text-lg">Whitepaper 90 Pages</p>140 <p className="antialiased font-light text-md">From 20$</p>141 </div>142 <div className="button">143 <a href="#" className="flex flex-row items-center font-bold text-secondary text-xl py-5 bg-black bg-opacity-80 w-full h-full justify-center">144 <div className="flex items-center justify-center">145 <Image146 src="/assets/cart.svg"147 width="25"148 height="25"149 alt="cart"150 />151 </div>152 Buy Now153 </a>154 </div>155 </div>156 </div>157 </div>158 </div>159 </>160 )...
index.js
Source:index.js
1import React from 'react'2import PostLayout from 'components/PostLayout'3import MarketMeter from 'components/MarketMeter'4import SocialLink from 'components/SocialLink'5import usePost from 'utils/usePost'6const Interview = () => {7 const currentPost = usePost()8 return (9 <PostLayout isInterview meta={currentPost}>10 <div className="flex flex-col md:flex-row mb-20">11 <div12 className=" border-gray-300 border-1 p-8 w-full md:w-1/3"13 style={{ height: 'max-content' }}14 >15 <div>16 <img17 src="/images/investor-series/vaughn-blake.jpeg"18 alt="Vaughn Blake"19 style={{ margin: '0', width: '100%', height: 'auto' }}20 className="m-0 rounded-md"21 />22 </div>23 <p className="uppercase mt-5 font-raleway tracking-widest font-light text-sm">Name</p>24 <p className="antialiased">Vaughn Blake</p>25 <p className="uppercase mt-5 font-raleway tracking-widest font-light text-sm">26 Fund / Group27 </p>28 <b className="antialiased">Blue Bear Capital</b>29 <p className="uppercase mt-5 font-raleway tracking-widest font-light text-sm">Founded</p>30 <b className="antialiased">2017</b>31 <p className="uppercase mt-5 font-raleway tracking-widest font-light text-sm">Location</p>32 <b className="antialiased">Los Angeles, CA//Houston, TX</b>33 <p className="uppercase mt-5 font-raleway tracking-widest font-light text-sm">34 Number of portfolio companies35 </p>36 <b className="antialiased">17</b>37 <p className="uppercase mt-5 font-raleway tracking-widest font-light text-sm">38 Focus Areas39 </p>40 <b className="antialiased">Software; Energy, Infra, Climate</b>41 <p className="uppercase mt-5 font-raleway tracking-widest font-light text-sm">42 Focus Geographies43 </p>44 <b className="antialiased">North America, Europe</b>45 <p className="uppercase mt-5 font-raleway tracking-widest font-light text-sm">Stage(s)</p>46 <b className="antialiased">Seed through Series B</b>47 <div className="flex mt-5">48 <SocialLink to="https://bluebearcap.com/" />49 <SocialLink to="https://twitter.com/vaughnblake" icon="twitter" />50 <SocialLink51 to="https://www.linkedin.com/public-profile/in/vaughn-blake-13050a7?challengeId=AQEkkSGcthJy1AAAAXdAklwveMtc0Yg0P4GFZ7BagjstP34jgwTtNIwig-WS4c7wBKFcm-KbfM1I_bhpJGWqbSCNy3tfHmLkAg&submissionId=d0588538-09e5-5d16-6962-bb5053a6ea5b"52 icon="linkedin"53 />54 </div>55 </div>56 <div className="w-full md:w-2/3 md:ml-10">57 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">58 HOW AND WHY DID YOU GET STARTED IN PRIVATE INVESTING?59 </h3>60 <p className="font-lato antialiased tracking-wide text-black mt-5">61 I began making private investments in the early 2010s, mainly around the62 crypto/blockchain space. I love investing (especially venture) and grew up with an63 investors mindset, having my first public market (stock) portfolio around 2nd grade. My64 dad was an investment banker, then private equity investor and it was something that was65 discussed with me at an early age. It would be difficult to imagine a life where I66 wasnât an investor.67 </p>68 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">69 WHAT IS THE SINGLE MOST IMPORTANT THING YOU VALUE IN AN INVESTMENT OPPORTUNITY?70 </h3>71 <p className="font-lato antialiased tracking-wide text-black mt-5">Asymmetry</p>72 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">73 WHAT ARE THE BEST INNOVATION THEMES THAT YOU SEE IN THE MARKET TODAY?74 </h3>75 <p className="font-lato antialiased tracking-wide text-black mt-5">76 The energy transition, the next phases of the frontier-tech lifecycle, synthetic77 biology, collaboration tools.78 </p>79 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">80 BEYOND ECONOMIC RETURN, WHAT KIND OF IMPACT DO YOU HOPE TO MAKE WITH YOUR PORTFOLIO?81 </h3>82 <p className="font-lato antialiased tracking-wide text-black mt-5">83 Extend and improve upon the worldâs collective quality of life.84 </p>85 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">86 WHAT ARE THE MOST PRESSING CHALLENGES OR PAIN POINTS IN MANAGING YOUR DAY-TO-DAY PRIVATE87 INVESTMENT ACTIVITY?88 </h3>89 <p className="font-lato antialiased tracking-wide text-black mt-5">90 Keeping track of what our actual investor rights are across the portfolio, valuations.91 </p>92 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">93 WHAT IS THE HARDEST INVESTMENT LESSON YOUâVE LEARNED AND/OR THE BIGGEST INVESTMENT94 MISTAKE YOUâVE MADE?95 </h3>96 <p className="font-lato antialiased tracking-wide text-black mt-5">97 Never be thesis-constrained when you recognize a massive opportunity.98 </p>99 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">100 WHAT ARE YOUR FAVORITE INDUSTRY INFORMATION SOURCES AND/OR SERVICES?101 </h3>102 <p className="font-lato antialiased tracking-wide text-black mt-5">103 FT, Axios, Bloomberg, FinTwit.104 </p>105 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">106 WHATâS YOUR FAVORITE NON-BUSINESS INTEREST OR HOBBY?107 </h3>108 <p className="font-lato antialiased tracking-wide text-black mt-5">109 Family, snowboarding, tennis.110 </p>111 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">112 PLEASE LEAVE US A BOOK RECOMMENDATION (BUSINESS OR OTHERWISE).113 </h3>114 <p className="font-lato antialiased tracking-wide text-black mt-5">115 The Book of Illusions, Paul Auster116 </p>117 <h3 className="text-blue antialiased uppercase font-lato font-bold tracking-widest mt-10">118 WHATâS YOUR TAKE ON THE PRIVATE MARKET OVERALL?119 </h3>120 <MarketMeter count={5} />121 </div>122 </div>123 </PostLayout>124 )125}...
textStyle.js
Source:textStyle.js
1import styled from "styled-components"2export const HeadingIntroBig = styled.h1`3 font-weight: 700;4 font-size: 84px;5 line-height: 1.25;6 margin: 0 0 0 0;7 color: #131315;8 -webkit-font-smoothing: antialiased;9 -moz-osx-font-smoothing: grayscale;10`11export const BigHeading = styled.h1`12 font-weight: 800;13 font-size: 48px;14 line-height: 1.25;15 margin: 0 0 0 0;16 color: #131315;17 -webkit-font-smoothing: antialiased;18 -moz-osx-font-smoothing: grayscale;19`20export const HeadingLongTxt = styled.h2`21 font-weight: 400;22 font-size: 48px;23 line-height: 1.25;24 margin: 0 0 0 0;25 color: #131315;26 -webkit-font-smoothing: antialiased;27 -moz-osx-font-smoothing: grayscale;28`29export const HeadingintroTxt = styled.h2`30 font-weight: 400;31 font-size: 32px;32 line-height: 1.25;33 margin: 0 0 0 0;34 color: #131315;35 -webkit-font-smoothing: antialiased;36 -moz-osx-font-smoothing: grayscale;37`38export const Menu = styled.h2`39 font-weight: 500;40 font-size: 24px;41 line-height: 1.25;42 margin: 0 0 0 0;43 color: #131315;44 -webkit-font-smoothing: antialiased;45 -moz-osx-font-smoothing: grayscale;46`47export const H1 = styled.h1`48 font-weight: 800;49 font-size: 32px;50 line-height: 1.25;51 margin: 1em 0 1em 0;52 color: #131315;53 -webkit-font-smoothing: antialiased;54 -moz-osx-font-smoothing: grayscale;55`56export const H2 = styled.h2`57 font-weight: 500;58 font-size: 32px;59 line-height: 1.25;60 margin: 1em 0 1em 0;61 color: #131315;62 -webkit-font-smoothing: antialiased;63 -moz-osx-font-smoothing: grayscale;64`65export const H3 = styled.h3`66 font-weight: 800;67 font-size: 24px;68 line-height: 1.25;69 margin: 1em 0 1em 0;70 color: #131315;71 -webkit-font-smoothing: antialiased;72 -moz-osx-font-smoothing: grayscale;73`74export const H4 = styled.h4`75 font-weight: 600;76 font-size: 20px;77 line-height: 1.25;78 margin: 1em 0 1em 0;79 color: #131315;80 -webkit-font-smoothing: antialiased;81 -moz-osx-font-smoothing: grayscale;82`83export const P = styled.p`84 font-weight: 400;85 font-size: 20px;86 line-height: 1.5;87 margin: 0 0 1em 0;88 color: #131315;89 -webkit-font-smoothing: antialiased;90 -moz-osx-font-smoothing: grayscale;91`92export const Extradetail = styled.p`93 font-weight: 200;94 font-size: 20px;95 line-height: 1.5;96 margin: 0 0 1em 0;97 color: #131315;98 -webkit-font-smoothing: antialiased;99 -moz-osx-font-smoothing: grayscale;100`101export const QuoteText = styled.p`102 font-size: 1.5em;103 font-weight: 600;104 font-stretch: normal;105 font-style: italic;106 line-height: 1.25;107 letter-spacing: -0.48px;108 color: #131315;109 -webkit-font-smoothing: antialiased;110 -moz-osx-font-smoothing: grayscale;111`112export const Button = styled.button`113 margin: 1.9em 0 0 0em;114 padding: auto;115 width: 10em;116 height: 3em;117 background: #21c7f7;118 color: #fbfffe;119 border-radius: 0.2em;120 border: none;121 font-weight: 800;122 font-size: 1.25em;123 cursor: pointer;124 -webkit-font-smoothing: antialiased;125 -moz-osx-font-smoothing: grayscale;126 :hover {127 box-shadow: 0 1em 2em #2c2c2c16;128 }129`130export const Input = styled.input`131 margin: 0;132 padding: 0 1em;133 height: 3em;134 width: 18em;135 border-style: solid;136 border-color: #2c2c2c;137 border-width: 0.1em;138 border-radius: 0.2em;139 font-size: 1.2em;140 -webkit-font-smoothing: antialiased;141 -moz-osx-font-smoothing: grayscale;142 @media (max-width: 450px) {143 width: 12em;144 }145`146export const Label = styled.label`147 margin: 0 0 0.5em 0.1em;148 font-weight: 500;149 font-size: 1.25em;150 line-height: 1.5;151 color: #fbfffe;152 -webkit-font-smoothing: antialiased;153 -moz-osx-font-smoothing: grayscale;154`155export const Caption = styled.p`156 font-weight: 600;157 font-size: 0.75em;158 line-height: 1.5;159 color: #6c6c6c;160 margin: 0;161 -webkit-font-smoothing: antialiased;162 -moz-osx-font-smoothing: grayscale;...
style.composition.js
Source:style.composition.js
1import { rgba } from 'polished';2import { css, keyframes } from 'styled-components';3import * as v from './variables';4export const fontSubpixelRaw = {5 fontSmoothing: 'subpixel-antialiased',6 textRendering: 'optimizeLegibility',7 WebkitFontSmoothing: 'subpixel-antialiased',8 MozFontSmoothing: 'subpixel-antialiased',9 OFontSmoothing: 'subpixel-antialiased'10};11export const fontAntialiasedRaw = {12 fontSmoothing: 'antialiased',13 textRendering: 'optimizeLegibility',14 WebkitFontSmoothing: 'antialiased',15 MozFontSmoothing: 'antialiased',16 MozOsxFontSmoothing: 'grayscale',17 OFontSmoothing: 'antialiased'18};19export const tabFocusRaw = {20 outline: '5px auto -webkit-focus-ring-color',21 outlineOffset: -222};23export const fontSubpixel = css(fontSubpixelRaw);24export const fontAntialiased = css(fontAntialiasedRaw);25export const hoverFocus = (content) => css`26 &:focus,27 &:hover {28 ${content};29 }30`;31export const tabFocus = css(tabFocusRaw);32export const borderTopRadius = (radius = v.borderRadius) => css`33 border-top-right-radius: ${radius}px;34 border-top-left-radius: ${radius}px;35`;36export const borderRightRadius = (radius = v.borderRadius) => css`37 border-bottom-right-radius: ${radius}px;38 border-top-right-radius: ${radius}px;39`;40export const borderBottomRadius = (radius = v.borderRadius) => css`41 border-bottom-right-radius: ${radius}px;42 border-bottom-left-radius: ${radius}px;43`;44export const borderLeftRadius = (radius = v.borderRadius) => css`45 border-bottom-left-radius: ${radius}px;46 border-top-left-radius: ${radius}px;47`;48export const resetFilter = css`49 filter: 'progid:DXImageTransform.Microsoft.gradient(enabled = false)';50`;51export const linkUnderline = (linkHoverColor = v.linkHoverColor) => css`52 /* Horizontal */53 /* https://stackoverflow.com/a/18064496 */54 background: linear-gradient(55 to right,56 ${linkHoverColor} 33%,57 ${rgba(v.color.white, 0)} 0%58 )59 repeat-x bottom;60 background-size: 3px 1px;61`;62export const dontBreakOut = css`63 /* These are technically the same, but use both */64 overflow-wrap: break-word;65 word-wrap: break-word;66 -ms-word-break: break-all;67 /* This is the dangerous one in WebKit, as it breaks things wherever */68 word-break: break-all;69 /* Instead use this non-standard one: */70 word-break: break-word;71 /* Adds a hyphen where the word breaks, if supported (No Blink) */72 -ms-hyphens: auto;73 -moz-hyphens: auto;74 -webkit-hyphens: auto;75 hyphens: auto;76`;77export const pulseKeyframes = (boxShadowWidth = 10) => keyframes`78 0% {79 box-shadow: 0 0 0 0 ${rgba(v.extranetGreen, 0.6)};80 }81 82 70% {83 box-shadow: 0 0 0 ${boxShadowWidth}px ${rgba(v.extranetGreen, 0)};84 }85 86 100% {87 box-shadow: 0 0 0 0 ${rgba(v.extranetGreen, 0)};88 }...
Footer.js
Source:Footer.js
1import Image from 'next/image'2export default function Footer(){3 return (4 <>5 <footer className="flex flex-col font-display bg-gradient-to-t from-primary to-white">6 <div className="content-Subscribe flex flex-col">7 <div className="flex flex-col items-center justify-center mb-4">8 <h1 className="font-bold text-4xl antialiased">Subscribe Us!</h1>9 <p className="font-semibold text-base text-gray-600 antialiased">Get special offers, exclusive product news, and event info straight to your inbox.</p>10 </div>11 <div className="flex flex-row items-center justify-center">12 <input type="textbox" placeholder="E-mail" className="block border-2 rounded-lg border-black border-opacity-50 bg-none py-2 px-5 w-3/12" />13 <a href="#" className="inline-block px-10 py-2 bg-black bg-opacity-90 font-bold text-xl text-primary rounded-lg ml-2 antialiashed md:px-2">Subscribe</a>14 </div>15 </div>16 <div className="container mx-auto flex flex-row p-8 mt-5">17 <div className="flex flex-col mr-10">18 <h1 className="font-bold antialiased text-lg mb-5">Navigate</h1>19 <p className="font-light antialiased opacity-90">Home</p>20 <p className="font-light antialiased opacity-90">Product</p>21 <p className="font-light antialiased opacity-90">Contact</p>22 </div>23 <div className="flex flex-col mr-10">24 <h1 className="font-bold antialiased text-lg mb-5">Order</h1>25 <p className="font-light antialiased opacity-90">Closure Collection</p>26 <p className="font-light antialiased opacity-90">Best Collection</p>27 </div>28 <div className="flex flex-col">29 <h1 className="font-bold antialiased text-lg mb-5">Social</h1>30 <p className="font-light antialiased opacity-90">Twitter</p>31 <p className="font-light antialiased opacity-90">Facebook</p>32 <p className="font-light antialiased opacity-90">Instagram</p>33 </div>34 </div>35 <div className="container mx-auto flex flex-row items-center justify-between border-t-2 border-black border-opacity-50 p-3">36 <Image37 src="/assets/Logo.svg"38 width="114"39 height="54"40 alt="Logo"41 />42 <p>Lonsre @Copyright 2021</p>43 </div>44 </footer>45 </>46 )...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false, args: ['--enable-features=UseSkiaRenderer'] });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: `example.png` });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch({ headless: false });12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: `example.png` });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch({ headless: false, args: ['--enable-features=UseSkiaRenderer'] });20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: `example.png` });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch({ headless: false });28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: `example.png` });31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch({ headless: false, args: ['--enable-features=UseSkiaRenderer'] });36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: `example.png` });
Using AI Code Generation
1const { chromium } = require('playwright-chromium');2(async () => {3 const browser = await chromium.launch({ headless: false, antialiased: true });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: `example.png` });7 await browser.close();8})();9const { chromium } = require('playwright-chromium');10(async () => {11 const browser = await chromium.launch({ headless: false });12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: `example.png` });15 await browser.close();16})();17const { chromium } = require('playwright-chromium');18(async () => {19 const browser = await chromium.launch({ headless: false });20 const context = await browser.newContext({ antialiased: true });21 const page = await context.newPage();22 await page.screenshot({ path: `example.png` });23 await browser.close();24})();25const { chromium } = require('playwright-chromium');26(async () => {27 const browser = await chromium.launch({ headless: false });28 const context = await browser.newContext({ antialiased: true });29 const page = await context.newPage();30 await page.screenshot({ path: `example.png` });31 await browser.close();32})();33const { chromium } = require('playwright-chromium');34(async () => {35 const browser = await chromium.launch({ headless: false });36 const context = await browser.newContext({ antialiased: true });37 const page = await context.newPage();38 await page.screenshot({ path: `example.png` });39 await browser.close();40})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false, args: ['--use-gl=desktop'] });4 const context = await browser.newContext();5 const page = await context.newPage();6})();7const { chromium } = require('playwright');8(async () => {9 const browser = await chromium.launch({ headless: false, args: ['--use-gl=desktop'] });10 const context = await browser.newContext();11 const page = await context.newPage();12})();13const { chromium } = require('playwright');14(async () => {15 const browser = await chromium.launch({ headless: false, args: ['--use-gl=desktop'] });16 const context = await browser.newContext();17 const page = await context.newPage();18})();19const { chromium } = require('playwright');20(async () => {21 const browser = await chromium.launch({ headless: false, args: ['--use-gl=desktop'] });22 const context = await browser.newContext();23 const page = await context.newPage();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch({ headless: false, args: ['--use-gl=desktop'] });28 const context = await browser.newContext();29 const page = await context.newPage();30})();31const { chromium } = require('playwright');32(async () => {33 const browser = await chromium.launch({ headless: false, args: ['--use-gl=desktop'] });34 const context = await browser.newContext();35 const page = await context.newPage();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext({ viewport: null, isMobile: true });5 const page = await context.newPage();6 await page.screenshot({ path: 'example.png' });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch({ headless: false });12 const context = await browser.newContext({ viewport: null, isMobile: true });13 const page = await context.newPage();14 await page.screenshot({ path: 'example.png', antialiased: true });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch({ headless: false });20 const context = await browser.newContext({ viewport: null, isMobile: true });21 const page = await context.newPage();22 await page.screenshot({ path: 'example.png', antialiased: false });23 await browser.close();24})();
Using AI Code Generation
1import { chromium } from 'playwright';2(async () => {3 const browser = await chromium.launch({ headless: false, args: ['--disable-features=LayoutNG'] });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: 'example.png' });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch({ headless: false, args: ['--disable-features=LayoutNG'] });12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: 'example.png' });15 await browser.close();16})();17import { test, expect } from '@playwright/test';18test('basic test', async ({ page }) => {19 const title = page.locator('text=Playwright');20 await expect(title).toBeVisible();21});22import { test } from '@playwright/test';23test('basic test', async ({ page }) => {24 const title = page.locator('text=Playwright');25 await title.isVisible();26});27import { expect } from '@playwright/test';28test('basic test', async ({ page }) => {29 const title = page.locator('text=Playwright');30 await expect(title).toBeVisible();31});32import { test } from '@playwright/test';33test('basic test', async ({ page }) => {34 const title = page.locator('text=Playwright');35 await title.isVisible();36});37import { expect } from '@playwright/test';
Using AI Code Generation
1const { chromium } = require('playwright');2const { createCanvas } = require('canvas');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext({6 viewport: { width: 800, height: 600 },7 });8 const page = await context.newPage();9 const canvas = createCanvas(800, 600);10 const context2D = canvas.getContext('2d');11 await page.screenshot({ path: 'google.png', type: 'png', omitBackground: true, quality: 100, clip: { x: 0, y: 0, width: 800, height: 600 }, antialiasing: 'antialiased', context: context2D });12 await browser.close();13})();14const { chromium } = require('playwright');15const { createCanvas } = require('canvas');16(async () => {17 const browser = await chromium.launch();18 const context = await browser.newContext({19 viewport: { width: 800, height: 600 },20 });21 const page = await context.newPage();22 const canvas = createCanvas(800, 600);23 const context2D = canvas.getContext('2d');24 await page.screenshot({ path: 'google2.png', type: 'png', omitBackground: true, quality: 100, clip: { x: 0, y: 0, width: 800, height: 600 }, antialiasing: 'none', context: context2D });25 await browser.close();26})();27const { chromium } = require('playwright');28const { createCanvas } = require('canvas');29(async () => {30 const browser = await chromium.launch();31 const context = await browser.newContext({32 viewport: { width: 800, height: 600 },33 });34 const page = await context.newPage();35 const canvas = createCanvas(800, 600);36 const context2D = canvas.getContext('2d');37 await page.screenshot({ path: '
Using AI Code Generation
1const {chromium} = require('playwright');2const fs = require('fs');3(async () => {4 const browser = await chromium.launch({5 });6 const context = await browser.newContext();7 const page = await context.newPage();8 await page.screenshot({path: 'google.png'});9 await browser.close();10})();11const {chromium} = require('playwright');12const fs = require('fs');13(async () => {14 const browser = await chromium.launch({15 });16 const context = await browser.newContext();17 const page = await context.newPage();18 await page.screenshot({path: 'google.png'});19 await browser.close();20})();21const {chromium} = require('playwright');22const fs = require('fs');23(async () => {24 const browser = await chromium.launch({25 });26 const context = await browser.newContext();27 const page = await context.newPage();28 await page.screenshot({path: 'google.png'});29 await browser.close();30})();31const {chromium} = require('playwright');32const fs = require('fs');33(async () => {34 const browser = await chromium.launch({
Using AI Code Generation
1const {chromium} = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false, args: ['--enable-features=CanvasAASharpening'] });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: 'google.png' });7 await browser.close();8})();9const {chromium} = require('playwright');10(async () => {11 const browser = await chromium.launch({ headless: false, args: ['--enable-features=CanvasAASharpening'] });12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: 'google.png' });15 await browser.close();16})();17const {chromium} = require('playwright');18(async () => {19 const browser = await chromium.launch({ headless: false, args: ['--enable-features=CanvasAASharpening'] });20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: 'google.png' });23 await browser.close();24})();25const {chromium} = require('playwright');26(async () => {27 const browser = await chromium.launch({ headless: false, args: ['--enable-features=CanvasAASharpening'] });28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: 'google.png' });31 await browser.close();32})();33const {chromium} = require('playwright');34(async () => {35 const browser = await chromium.launch({ headless: false, args: ['--enable-features=CanvasAASharpening'] });
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: 'google.png', fullPage: true });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: 'google.png', fullPage: true });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: 'google.png', fullPage: true });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: 'google.png', fullPage: true });31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: 'google
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const pixel = await page.evaluate(() => {7 const canvas = document.createElement('canvas');8 const ctx = canvas.getContext('2d');9 ctx.webkitImageSmoothingEnabled = false;10 ctx.mozImageSmoothingEnabled = false;11 ctx.imageSmoothingEnabled = false;12 ctx.drawImage(document.querySelector('img'), 0, 0);13 return ctx.getImageData(0, 0, 1, 1).data;14 });15 console.log(pixel);16 await browser.close();17})();18const { chromium } = require('playwright');19(async () => {20 const browser = await chromium.launch();21 const context = await browser.newContext();22 const page = await context.newPage();23 const pixel = await page.evaluate(() => {24 const canvas = document.createElement('canvas');25 const ctx = canvas.getContext('2d');26 ctx.webkitImageSmoothingEnabled = false;27 ctx.mozImageSmoothingEnabled = false;28 ctx.imageSmoothingEnabled = false;29 ctx.drawImage(document.querySelector('img'), 0, 0);30 return ctx.getImageData(0, 0, 1, 1).data;31 });32 console.log(pixel);33 await browser.close();34})();35const { chromium } = require('playwright');36(async () => {37 const browser = await chromium.launch();38 const context = await browser.newContext();39 const page = await context.newPage();40 const pixel = await page.evaluate(() => {41 const canvas = document.createElement('canvas');42 const ctx = canvas.getContext('2d');43 ctx.webkitImageSmoothingEnabled = false;44 ctx.mozImageSmoothingEnabled = false;45 ctx.imageSmoothingEnabled = false;46 ctx.drawImage(document.querySelector('
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
