CKschneid

@CKschneid·7 public vizzes

exploring redux form

This example demonstrates a basic React form built with `redux-form`, showing how form state is managed through Redux. The code defines a `SimpleForm` component that uses the `Field` component to bind text inputs for name and email, while the `reduxForm` HOC wraps the component with form configuration. A container component handles the submitted JSON data via a callback. The example highlights the `formReducer` integration in the root reducer, illustrating the library’s core pattern of connecting form fields to Redux state and submitting values as structured JSON.

Feb 5, 2017

Loading thumbnail…

practicing with reselct and redux. this example takes data about a golf tournament and uses reselect to augment the data.

This example demonstrates a golf tournament leaderboard that uses reselect’s `createSelector` to derive player statistics from raw Redux store data, including per-round scores, total strokes, and the last hole played. The visualization renders table rows from augmented player objects, showing performance relative to par using course hole data. It relies on reselect’s memoized selectors (like `playersWithStrokesPerRound` and `playersWithTotalStrokes`) and lodash’s `last` utility, with the source data mimicking PGATour.com’s 2017 Sony Open leaderboard. The code highlights how to compose selectors to compute derived data without mutating the original state.

Feb 2, 2017

Loading thumbnail…

firebase with redeux/react

This example shows how Redux acts as an intermediary between React and Firebase, managing live post data through asynchronous actions. It uses the Firebase JavaScript API to connect to a `fbredux` database, with `Posts.on('value')` listening for real-time updates and dispatching `FETCH_POSTS` actions to the Redux store. The code also demonstrates how to create and delete posts via `Firebase.push()` and `Firebase.child().remove()`, respectively, with each operation returning a thunk that receives `dispatch` as an argument. The data source is a Firebase Realtime Database, while the rendering approach relies on React’s unidirectional data flow through Redux state.

Jan 29, 2017

Loading thumbnail…

Gist 3413ee69199762ea0375292e47168e84

This example shows a Redux-based offline-first data visualization for a rail system, persisting station directory data to localStorage and using a service worker to cache assets for offline use. The code uses `localforage` for asynchronous storage, `axios` for fetching JSON station data, and `throttle` from Lodash to limit state saves. It demonstrates a fetch-then-cache strategy where API responses are stored locally, while the service worker intercepts network requests to serve cached resources or fall back to offline behavior. The visualization itself is not shown, but the data flow centers on storing and retrieving station directory JSON to support the application’s offline functionality.

Jan 27, 2017

Loading thumbnail…

Gist 6cd6fea1125bc0e25597996d418bc20d

This example shows a React application that displays a Google Map centered on a specific location, with markers loaded from an external JSON file and rendered using the `react-google-maps` library. It also includes a separate "Places" component that fetches employee data from another JSON file via `axios` and lists their first names. The map uses the `GoogleMapLoader` and `GoogleMap` components, with custom marker icons, while the places list demonstrates asynchronous data fetching and state management. The visualization combines geographic positioning with a simple text-based list, illustrating how to integrate map and non-map data in a single React interface.

Jan 3, 2017

Loading thumbnail…

simple implementation of a google map using the react-google-map library

This example shows a simple interactive map centered on a fixed coordinate, with a marker placed at that location. It demonstrates the core usage of the react-google-maps library by rendering a `GoogleMap` component inside a `GoogleMapLoader`, which attaches the map to a full-size container div. The map’s zoom is set to 15, and the `options` prop disables the street view and map type controls. Markers are rendered from an array passed via `this.props.markers`, in addition to a hardcoded marker at the given latitude and longitude, illustrating how to compose map elements with React props.

Dec 13, 2016

Loading thumbnail…

CSS Animated Starfield

This example demonstrates a purely decorative, CSS-animated starfield that brings a static header image to life. The animation adds a subtle twinkling effect to the stars by fading them in and out while slightly scaling their size, creating a gentle shimmering ambiance. The code relies exclusively on CSS keyframes and the `-webkit-animation` property, with each star's position and animation delay defined by its unique ID. The background image and texture are layered using CSS `background` properties, while the foreground cover element is positioned absolutely. No JavaScript libraries are used; the effect is achieved solely through HTML and CSS.

Mar 22, 2015