GithubHelp home page GithubHelp logo

reactiflux.com's People

Contributors

ansh4195 avatar bartosz-szczecinski-gft avatar btmpl avatar dylangarcia avatar gabegreenberg avatar ghardin137 avatar huv1k avatar huynhtrankhanh avatar john-d-pelingo avatar kyleamathews avatar kyleshevlin avatar louis-young avatar markerikson avatar martialis39 avatar mattmattvanvoorst avatar mattvanvoorst-contentful avatar nickmccurdy avatar puremana avatar quicksnap avatar rahsheen avatar raswonders avatar s3b4s avatar schaefferarnold avatar sonicrida avatar thegame8714 avatar thisraptori avatar totaldis avatar upvalue avatar vcarl avatar zachgibson avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

markerikson koba04 quicksnap kyleamathews tryingtoimprove vinhphu3000 btmpl kyleshevlin michelebertoli kingsj ntcuong reactjs-facebook alainlompo alvinlee001 ellwarco fullstackenviormentss fadysamirsadek upvalue enterstudio senayyakut harendranathv john-d-pelingo dr-data paiji-th doc22940 puremana calebyang93 rba54344445 rafaelalmeidatk bimbayi yue-design anshul758 aeworxet willypraditya huuums schaefferarnold frenchgap wimpywarlord vcarl alib6 ansh4195 isabella232 rohanp07 louis-young rhernandog mahdikhashan ethicalsecurity-agency seanpm2001 atharv0003 raswonders anandku06

reactiflux.com's Issues

Backfill Q&A transcripts

We're doing pretty badly on posting transcripts the past few months — Sentry is the only one we have since March. These take about half an hour per transcript to create, and I'd love some help on them.

  • /transcripts/nikhil-nandagopal.md (Q&A start)
  • /transcripts/erin-fox.md (Q&A start)
  • /transcripts/ali-spittel.md (Q&A start)
  • /transcripts/ahmad-awais.md (Q&A start)
  • /transcripts/justin-samuels.md (Q&A start) (oop this was audio-only, no transcript or recording)
  • /transcripts/netlify-team.md (Q&A start)
  • /transcripts/eve-porcello.md (Q&A start)
  • /transcripts/guillermo-rauch.md (Q&A start) (also audio-only)
  • /transcripts/jenn-creighton.md (Q&A start)
  • /transcripts/max-stoiber.md (Q&A start)
  • /transcripts/yarn-team.md (Q&A start)

Use Formik for forms

Our custom Form utility is a bit complex even though it's only used in two places so far. I'm experimenting with using Formik instead and I find it easier to use.

Horizontal scrollbar appears for a small range of browser widths

I noticed a small range of browser widths for which there's a horizontal scrollbar.

It looks like breakpoint at which the logotype is made smaller should be changed.

I'm seeing the scrollbar starting at the 1020px breakpoint when the logotype becomes larger, and it remains until about 1053px wide.

Split up subjects by learning stage

Blocked by #245 and #246. Once we have a list of subjects and topics that we feel good about recommending as "what a senior developer needs to know", we should segment it into a series of roadmaps that are small enough and precisely sequenced to be actionable.

Stages:

  • Learn to program
  • Get a job
  • Get a freelance client
  • Become a senior engineer

Q&A Page

This is the most important page of the website at this point besides the landing page because we'll use it on twitter often and promoting Q&A's internally.

Schedule Page
It needs to reflect this document: https://paper.dropbox.com/doc/Reactiflux-QA-Schedule-7QAfGzEqfKjtN9UmhYYM9

Should be able to display upcoming/past Q&A's with markdown.

Transcript Page
We should display the transcripts on their own page using markdown: https://github.com/reactiflux/q-and-a/blob/master/ben-alpert_react-core.md

Page will need some sort of sidebar navigation I think?
reference: http://docs.graphene-python.org/en/latest/

reactiflux.com does not update job proposals list

Last job proposal at https://www.reactiflux.com/jobs is dated 'September 23rd 2020' while there were already a lot of proposals after that time, according to #job-board channel.

https://reactistory.com:8443/api/job?type=hiring&range=180&limit=50&after=758124439879024681 (specified in current JSON) replies with an empty JSON:

{
  "messages": [],
  "paginate": {}
}

So I assume something's wrong at reactistory.com's side.

Contact link on jobs page throws DOM error

Reproduction

  1. Visit jobs page
  2. Click "How can I get in touch?"

Chrome/Puppeteer

Recording 
{
  "title": "reactiflux/reactiflux.com#236",
  "steps": [
    {
      "type": "setViewport",
      "width": 1869,
      "height": 1367,
      "deviceScaleFactor": 1,
      "isMobile": false,
      "hasTouch": false,
      "isLandscape": false
    },
    {
      "type": "navigate",
      "url": "https://www.reactiflux.com/jobs",
      "assertedEvents": [
        {
          "type": "navigation",
          "url": "https://www.reactiflux.com/jobs",
          "title": "Jobs"
        }
      ]
    },
    {
      "type": "click",
      "target": "main",
      "frame": [],
      "selectors": [
        [
          "button"
        ]
      ],
      "offsetX": 0,
      "offsetY": 0
    }
  ]
}

Behavior

Application error: a client-side exception has occurred (see the browser console for more information).

Target container is not a DOM element.

image

Q&A transcripts should have a more consistent format

We have like 6 different formats for Q&A transcripts. It would be helpful for styling and other functionality (like #20) if they were more consistent.

@gabegreenberg and I have previously talked about it, and think the format of Cheng Lou and Jordan Walke's sessions is what we'd like to use going forward. We need to edit the past transcripts to meet that style and trim any non-question/answer chatter.

  • Andrew Clark
  • Ben Alpert
  • Cheng Lou
  • Christopher Chedeau
  • Dan Abramov
  • Devin Abbott
  • Eric Vicenti
  • Jonathan Carter & Geoffrey Goh
  • Jordan Walke
  • Lee Byron
  • Mike Grabowski
  • Relay Team
  • Ryan Florence

Include more Discord user info in job listings

Some users exclude contact information from their post, assuming that they'll get back a DM on Discord. Unfortunately this means that if multiple users have the same display name, it won't be clear which user to contact based on the jobs site alone. We should include some uniquely identifying info (like user id with # or the user id integer) so users can be contacted even if they have common display names.

Potential "Learning" page revised contents

The "Learning" page really hasn't been touched since like 2016 or something, and a lot of material has changed since then.

I put together a "front end learning resources" list for my day job somewhat recently, and I'm going to dump that material here as a potential replacement for the current contents.

I don't want to replace the existing page right away, because there may be some stuff in there that I've forgotten about and is worth keeping. Also, the two lists are formatted differently. But, here you go:

Recommended Learning Path

You should learn these technologies in the following order:

  1. "How Web Apps Work": a series of posts that lays out the big picture of the core technologies, terms, and concepts used in client/server web apps
  2. JavaScript . If you don't know JavaScript, nothing else will make sense
  3. React . You can use React by itself, or with Redux and/or TypeScript. Learning it separately will minimize the number of new concepts and syntax you have to learn at once.
  4. Redux . Redux can be used separately, but it's most commonly used with React.
  5. TypeScript . Because it adds static types on top of JS, you need to understand JS first. Also, it's easiest to understand React and Redux first, then learn how to use them with static types.

The resources in this page are listed in that order.

You are not required to read every single link and article listed in this page. However, you should try to read through as many of the articles linked in the "Recommended Primary Resources" sections as possible, especially for topics you are not already familiar with. Many of the recommended tutorials do cover the same topics, so feel free to skip past concepts you've already learned.

Links in the "Additional Resources" sections are available as references and reading as needed.

true

How Web Apps Work

Mark's post series that describes the key terms, concepts, technologies, syntax, and data flow used in web apps.

Recommended Primary Resources (should read)

Javascript

Recommended Primary Resources (should read)

General JS

Specific Topics

Additional Resources (read as needed)

General JS

Specific Topics

React

Recommended Primary Resources (should read)

General React

Start with reading the official docs first. However, the React team is in the process of starting a major rewrite of the React docs site to focus on teaching function components and hooks first. That won't be published until mid-2021. Until then, a third party has made a fork of the React docs and converted the tutorials and examples to show function components instead of classes, so I'm going to link that here and suggest reading it.

These other listed tutorials are also excellent and may explain things in a different way.

Project Setup

  • Read: Simple React Development in 2019 (a guide to setting up an app, development environment, and deployment)
  • Use: CodeSandbox.io (an online IDE that uses VS Code's editor, and can let you develop and run your apps completely in the browser)
  • Use: Create-React-App (the official CLI tool for creating a React app with one command. Sets up a project with good default build settings out of the box.)

Specific Topics

Additional Resources (read as needed)

General React

Redux

Recommended Primary Resources (should read)

General Redux

Start with reading the official docs first, and also watch Mark Erikson's "Redux Fundamentals Workshop" videos.

The other tutorials are also excellent and may explain things in a different way.

Mark Erikson's Redux Resources

  • Read: "Idiomatic Redux" concepts and opinion series. A series of blog posts that describes standard Redux development best practices, why they exist, and how Redux is meant to be used. (These are not required reading to get started, but highly recommended once you understand the basics.)
  • Legacy resources (do not cover "Modern Redux", but still informative)

Specific Topics

Additional Resources (read as needed)

TypeScript

Recommended Primary Resources (should read)

Specific Topics

Additional Resources (read as needed)

Node.JS paths are not found

When I was checking the learning page, I found that nodejs links are not found so I changed them to the correct path.
This PR will fix it.

Styled components split

If somebody want to contribute, we can split styled components to separate files and have better distribution of components :) Its good for some beginners who wants to start with open source how i started with reactiflux webpage :)

Add conferences section to /schedule

We'd like to offer a better "community partner" option for upcoming conferences, and I think a heading section on our schedule page would be a great place to do so. It might make sense to do this as frontmatter so we can render it as a horizontal list of icons + blurbs, rather than a vertical paragraph content like the rest of the schedule.

Issue in Navbar responsiveness in mobile view.

While surfing the website, I encountered a navigation bar styling problem (in mobile view).
I'd like to resolve this issue & contribute a few to this project.
So I appeal assign me to this one 👍🏻

how to load the view of the current url when we manual to refresh chrome

Question

brower input http://127.0.0.1:8080/html/metrics/maintain.html, it load Welcome component, when click the /test1 of Link, brower will load Test1 component, /test2 is same , BUT refresh the brower with manual, it will load the view of http://127.0.0.1:8080, the brower still show origin url with 'xxx/maintain.html'.

Anything my want

when we manual refresh the brower, hope it load view with origin url, rather than the view of root url.

const pathname = '/html/metrics/maintain.html';
<Router>
    <div>
      <ul>
        <li><Link to=`${pathname}`>Home</Link></li>
        <li><Link to=`${pathname}/test1`>test1</Link></li>
        <li><Link to=`${pathname}/test2`>test2</Link></li>
      </ul>

      <hr />

      <Route path='/html/metrics/maintain.html' component={App}>
	   <IndexRoute component={Welcome}/>
	   <Route path='/html/metrics/maintain.html/test1' component={Test1}/>
	   <Route path='/html/metrics/maintain.html/test2' component={Test2}/>
	</Route>
    </div>
  </Router>

who can help me? thanks in advance.

Improve page previews

Mark pointed out that the /learning page has a pretty lame preview. We should audit what they look like and make improvements

Links Page

This page will contain relevant community links for people new to react/react native etc.

migrate to the react-router v4

Version

4.0.0

Steps to reproduce

I try to migrate to the react-router v4, where should I start. The most path I need to authenticate and need to redicert. What Should I use else . I installed. I installed last npm i --save react-router-dom@next and npm i --save react-router@next

application.js

import {browserHistory} from 'react-router'
import Routes from './routes'

export class Application extends Component {
    static propTypes = {
        locale: React.PropTypes.string.isRequired,
        messages: React.PropTypes.objectOf(React.PropTypes.string.isRequired).isRequired,
        login: React.PropTypes.func.isRequired,
        redirectToLoginPage: React.PropTypes.func.isRequired,
        isLoggedIn: React.PropTypes.bool.isRequired,
    };

    constructor() {
        super()
    }

    componentDidUpdate = prevProps => {
        if (!prevProps.isLoggedIn && this.props.isLoggedIn)
            browserHistory.push('/')
    }

    authenticate = (nextState, transition, callback) => {
        if (!this.props.isLoggedIn)
            this.props.redirectToLoginPage()
        else
            callback()
    };

    processLoginCallback = (nextState, transition, callback) => {
        if (!this.props.isLoggedIn)
            this.props.login()

        callback()
    };

    render = () =>
        <IntlProvider locale={this.props.locale} messages={this.props.messages}>
            <MuiThemeProvider muiTheme={getMuiTheme(theme)}>
                <Routes authenticate={this.authenticate} processLoginCallback={this.processLoginCallback} />
            </MuiThemeProvider>
        </IntlProvider>;
}

routes.js:

import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from 'react-router-dom'

const Routes = ({authenticate, processLoginCallback}) =>
        <Router history={browserHistory}>
            <Route path='/' component={Root} onEnter={authenticate}>
                <IndexRoute component={Home}/>

                <Route path='home' component={Home} />
                <Route path='devices' component={Devices} />
                <Route path='users' component={Users} />
                <Route path='users/add' component={AddOrEditUser}/>
                <Route path='users/edit/:personId' component={AddOrEditUser}/>
                <Route path='patients' component={Patients}>
                    <Route path='add' component={AddOrEditPatient} />
                    <Route path='edit/:personId' component={AddOrEditPatient} />
                </Route>
                <Route path='plans' component={Plans} />
                <Route path='commissioning' component={Commissioning} />
                <Route path='server-settings' component={ServerSettings} />
                <Route path='about' component={About} />
            </Route>

            <Route path='/login-callback' onEnter={processLoginCallback} />
        </Router>

    Routes.propTypes = {
        authenticate: React.PropTypes.func.isRequired,
        processLoginCallback: React.PropTypes.func.isRequired,
    }

    export default Routes

Expected Behavior

Actual Behavior

Upgrade to Next 13

This would us to use app router with server components, but we should still upgrade even if we continue using pages router.

See #211 and #239

Convert to TypeScript

Since this is a Gatsby site with some interactive pages like Contact and Jobs, there's a bit of logic. It can be tricky to refactor this without tests, though we don't really need to test particularly complex use cases, so I think TypeScript would work pretty well to give us a better promise of stability.

Large TypeScript migrations can be complex, though Airbnb has a new cool called ts-migrate which could make it easier than the traditional file-by-file migration.

Convert to next.js

  • Working local build
    • Home page
    • Transcripts index
    • Each transcript (including blank state) filtered out missing transcripts
    • Q&A schedule
    • Markdown pages
    • Contact page
    • Blog
  • Dockerized deploy
  • DigitalOcean infra setup

I was able to get next export working, which means we can do a drop-in replacement without changing hosting. That may be a future project, but we can keep this PR smaller for the time being!

Update learning and other resources

  • Learning
    • Remove out of date recommendations
      • Anything suggesting ES6 is the latest syntax is probably too confusing
      • Dan's container component article (not useless but generally not recommended by most any more thanks to hooks/redux/etc)
    • Add doc links
    • Updated best practices
  • Get to the point where the site is more of an all-around resource both to learning React stuff and using Reactiflux effectively while following the rules
  • Make sure meta pages are up to date
  • Consider moving useful information from Reactiflux itself (pins, channel descriptions, bot commands) to the website for easier discoverability and permalinking

Optimize fonts

Typefaces is deprecated. We should probably switch to @next/font (depends on #241) or Fontsource.

Alternatively, we could redesign our font stack around font-family: system-ui; to eliminate web fonts entirely.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.