SaraVieira

import React, { useState, useEffect } from 'react'
import breakpoint from 'styled-components-breakpoint'
import { Col, Row, Grid } from '../grid'

const GridDebugger = () => {
  const [showGrid, toggleShowGrid] = useState(false)

  const handleKey = ev => {
    if (ev.key === 'g' && ev.ctrlKey) {
      console.log('lol')

SaraVieira

import React from 'react'
import { MDXProvider } from '@mdx-js/tag'
import { Global, css } from '@emotion/core'

const code = ({ className, children }) => {
  if (className === 'language-cssx') {
    return (
      <Global
        styles={css`
          ${children}

SaraVieira

~/Downloads/my-default-starter
❯ yarn develop
yarn run v1.13.0
$ gatsby develop
error We encountered an error while trying to load your site's gatsby-config. Please fix the error and try again.


  TypeError: {(intermediate value)(intermediate value)} is not a function
  

SaraVieira

Hello 👋

This is going to be a very special ReactJSGirls event that will happen together with BerlinJS.

This event will focus all in wellness, burnout prevention and self care.

We will have some lightning talks and a session of desk yoga so that we all do our share of stretches everyday even if we are sitting on a desk every day.BerlinJS

Our instructor will be:

SaraVieira

Name: Your Brain doesn't have a fix flag

Depression and anxiety are enormous problems in our work and world in general. But they are topics that are not discussed enough and topics that we feel are kind of shameful. In this talk Sara will expose her personal mental health issues that she had for a long time so you don’t ever feel embarrassed again. She will go through what she learned in this horrible horrible journey of putting a fix flag on her brain in the hope that it helps as many people as possible.

Name: The Dream of Styleguide Driven Development

React is awesome! We probably all here agree on that. You have heard of all types of driven development but react emerged a new type, styleguide driven development became a reality with components. This type of development focuses on Developer/Designer collaboration and on assertive components. With the use of React, Styled Components and Snapshot testing we were able to almost remove style regressions.

SaraVieira

import App from './components/app';
import { h, render } from 'preact';
import { default as renderToString } from 'preact-render-to-string';
import { ServerStyleSheet } from 'styled-components'

if(typeof window === undefined) {
    const sheet = new ServerStyleSheet()
    const html = renderToString(sheet.collectStyles(<App />))
    const styleTags = sheet.getStyleTags() // or sheet.getStyleElement()
}

SaraVieira

You can run either of the following snippets in your terminal to generate a markdown list of your VS Code extensions.

code-insiders --list-extensions | awk '{ print "* [" $1 "](https://marketplace.visualstudio.com/items\?itemName\=" $1 ")" }'

npx https://gist.github.com/elijahmanor/7f9762a4c2296839ad33e33513e88043

NOTE: You can append | pbcopy to either of the above commands to pipe the output to your Mac's copy/paste buffer.

SaraVieira

{
  getUsers(people: 3) {
    name {
      first
      last
    },
    location {
      city
    }
  }

SaraVieira

async getUsers(people = 10) {
  const user = await this.get(`/?results=${people}`);

  return user.results;
}

SaraVieira

getUsers: async (_, { people }, { dataSources }) =>
  dataSources.RandomUser.getUsers(people)