Snippets in React, from basics to complex it's all about finding beauty in the code.
Joined August 2020
- Tweets 34
- Following 122
- Followers 23
- Likes 24
12 Photos and videos
Pinned Tweet
12 Oct 2020
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
14 Oct 2020
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
14 Oct 2020
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
12 Oct 2020
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
13 Oct 2020
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
13 Oct 2020
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
12 Oct 2020
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
12 Oct 2020
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
12 Oct 2020
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
12 Oct 2020
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
11 Oct 2020
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
11 Oct 2020
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
10 Oct 2020
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
9 Oct 2020
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
9 Oct 2020
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
9 Oct 2020
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
9 Oct 2020
const formatHour = () =>
`${hour % 12 || 12} ${hour < 12 ? 'am' : 'pm'}`
#100DaysOfCode #javascript #programming
#programacion #reactJS #TypeScript
2
4