Snippets in React, from basics to complex it's all about finding beauty in the code.

Joined August 2020
12 Photos and videos
Pinned Tweet
Alternating table's row colors with #reactjs: rows.map((r, i) => <tr style={{backgroundColor: i % 2 ? '#00008040' : 'white'}} > { r.map(value => <td> { value } </td>) } </tr> #100DaysOfCode #CodeNewbie #programming #FrontEndDev #TypeScript
1
27
17
Anonymous authentication with @MongoDB & @Realm: const login = await() => { const app = new Realm.App({ id: "APP_ID" }) const credentials = Realm.Credentials.anonymous() const user: Realm.User = await app.logIn(credentials) } #100DaysOfCode #TypeScript

4
Inserting one document with @MongoDB & @realm import * as Realm from "realm-web" const mongo = app.services.mongodb("myCluster") const col = mongo.db("myDB").collection("myCol") col.insertOne({ attribute: "value" }) #100DaysOfCode #noBackend #serverless #CodeNewbies

1
React Snippets retweeted
New Pure CSS/HTML drawing. Made for Chrome. And this one you can alter without even using DevTools! No JS, no SVG. Inspired by video game character customization screens, and 90s couture. diana-adrianne.com/purecss-c…
79
332
1,643
Format dates in a readable compact text with #TypeScript: const formatData = (time: string) => new Date(time) .toString() .substring(0, 24) .replace(/2020/, '') #hourofcode #programming #CodeNewbie #WomenInSTEM #100DaysOfCode #PrimeDay2020 #js #DEVCommunity
4
4
const tsThought = myThoughts.find(({ language }) => language === #TypeScript ) const engThought = myThoughts.find(({ language }) => language === #English ) tsThought.clarity > engThought.clarity // true #softwaredevelopment #100DaysOfCode #DEVCommunity #WomenWhoCode
2
5
React Snippets retweeted
Stop overthinking that variable name. Call it Bob for now. You can change it later... ...or save yourself that hassle and just give it a short but descriptive name
29
5
156
Transforming #csv to #json const { promises: fs } = require('fs') const csv = require("csvtojson") const parse = async() => { const data = await csv().fromFile(csvFile) fs.writeFile(jsonFile, JSON.stringify(data)) return } #100DaysOfCode #code #CodeNewbie #womenintech
1
1
Adding an arrow indicator with #ReactJS & #TypeScript const trend = 0.55 <p> { trend }% <span style={{ marginLeft: -5, fontSize: '1.15rem', lineHeight: '0.9rem', color: trend > 0 ? '#089404' : '#FF7F50' }}> { trend > 0 ? '⇧' : '⇩' } </span> </p> #100DaysOfCode
3
3
3
Full Dashboard:
Full component at:
Stacked bar chart with #reactjs, #TypeScript & #recharts. <BarChart data={tweets}> { stats.map(s => <Bar dataKey={s} stackId="a" fill={colorMapper(s)} /> )} <CartesianGrid /> <XAxis /> <YAxis /> <Tooltip/ > </BarChart> #100DaysOfCode #FrontEnd
2
5
Graphing charts with #ReactJS #TypeScript & #recharts <LineChart data={data}> { metrics.map((m, i) => <Line type='monotone' dataKey={m} stroke={colorMap(m)} />)} <CartesianGrid/> <XAxis/> <YAxis /> <Tooltip/> </LineChart> #100DaysOfCode #js #FrontEnd
3
3
4
Using position absolute for #ReactJS Dashboards. <p> 27 <span style={{ position: 'absolute' }}> 0.4 </span> <span style={{ position: 'absolute', marginTop: 20 }}> 0.1% </span> </p> #100DaysOfCode #TypeScript #softwaredevelopment #programmig
4
10
Modal with #Bulma, #ReactJS & #TypeScript interface iModal { isActive: boolean, children: any } const Modal = ({ isActive, children }: iModal) => <div className={`modal ${isActive ? 'is-active' : ''}`} > { children } </div> #100DaysOfCode #FrontEnd #Software #programming
10
8
Sorting an array of objects by a property called name: const sortedName = persons.sort( ({ name: a }, { name: b }) => a > b ? 1 : -1 ) Ordenando un arreglo de objectos usando la propiedad "name". #100DaysOfCode #TypeScript #js #reactjs #programming #programacion #Software
5
3
const wordCounter = sentences.reduce((d, i) => [...d, ...i.split(' ')], [] as string[] ).reduce((d, i) => ({ ...d, [i]: d[i] 1 || 1 }), {} as { [key: string]: number } ) #100DaysOfCode #TypeScript #js #reactjs #programming #programacion #coders
2
1
React Snippets retweeted
We're looking for a product designer to help us build the figma editor. It's a great role for "an engineer with strong design skills or a designer who was once an engineer". Come work on a great product with great people. jobs.lever.co/figma/491848e6… Lots of other roles too

4
21
105
const formatHour = () => `${hour % 12 || 12} ${hour < 12 ? 'am' : 'pm'}` #100DaysOfCode #javascript #programming #programacion #reactJS #TypeScript
2
4