Taking Gatsby for a spin

Taking Gatsby for a spin  #webdev #javascript #reactjs #Flexi_IT

  • It’s not that I really need a new tool to create static sites, it’s just that every developer tweeting about Gatsby seems to think it’s the most exciting thing on the web since they learned they could combine the and tag.
  • Here are some of the important features of Gatsby: – – GatsbyJS is based on React which means that you’ll be writing almost everything in JavaScript / JSX.
  • If you already like React, you’ll most definitely enjoy creating static sites with Gatsby.
  • Gatsby comes with plugins to pull in data from several APIs, CMS systems and local files.
  • PRPL + the gatsby offline plugin mean that your site will be considered a PWA, will load insanely fast on any device and scores great in Google lighthouse.

A short write-up on Gatsby, a static site generator based on React
Continue reading “Taking Gatsby for a spin”

Improve Your UX by Dynamically Rendering Images via React

Improve Your UX by Dynamically Rendering Images via React @arwong09  #Reactjs #UX #Startups

  • It’s also how performant it is, how intuitive it is — how much it delights your user.We’ve all been there, discovering a new app or web page for the first time and seeing something like this:With high resolution photos and retina screens, it’s all too often we have to sit and watch images painstakingly render.
  • We accomplish this by using React’s onLoad event; we can make the request to the server for the image files, but not render the image in the DOM until the entire file has been downloaded.the end result: smooth as butterThe end result is an app that loads high resolution images and never keeps the user waiting.
  • The placeholder teases the user and lets them know images are being loaded.
  • Furthermore, we hold off on rendering the images until they have been fully downloaded from the server so our user never has to see images painting from top to bottom in the browser.view live demoShow Me the Code!Rendering the PlaceholderFor our placeholder component (LoadingItem in this example), we simply render the image and apply any animation effects we want:export default function () { return ( ReactCSSTransitionGroup transitionName=”loadingItem” transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300} img className=”feed__loading-item” src={img} / /ReactCSSTransitionGroup )}In the render of our Feed component, we simply render LoadingItem as long as we still have FeedItems being loaded:export default class Feed extends Component { … render() { return ( div className=”feed” … {this.props.items.length this.state.loadedItems.length LoadingItem / } … /div ) }}Dynamically Rendering Images via `onLoad`Our Feed component works as follows:export default class Feed extends Component { constructor(props) { super(props) this.state = { loadedItems: [] } } onLoad(feedItem) { let updatedItems = this.state.loadedItems updatedItems.push({ name: feedItem.name, imgPath: feedItem.imgPath }) this.setState({ loadedItems: updatedItems }) }render() { return ( div className=”feed” h1 i) = FeedItem imgPath={item.imgPath} name={item.name} key={i} / )} {this.props.items.length this.state.loadedItems.length LoadingItem / } div className=”hidden” {this.props.items.map((item, i) = img src={item.imgPath} onLoad={this.onLoad.bind(this, item)} key={i} / )} /div /div ) }}So what’s happening here?
  • When the state updates, the newly loaded item is rendered into the DOM with the image already fully downloaded.That’s it!View live demoView full source code (star the repo if you found this helpful!)

It’s a competitive world out there right now. As we all know, just having a good idea isn’t enough to make your company the next billion dollar IPO. Execution is just as important, and when it comes…
Continue reading “Improve Your UX by Dynamically Rendering Images via React”

Infinite Scrolling in React using Apollo and React-Virtualized — GraphQL Cursor Pagination

Infinite scrolling in #ReactJS using Apollo and React-Virtualized :  #GraphQL #JavaScript

  • How to create Schema for Cursor Pagination in GraphQLOnce you have setup a very basic GraphQL server as mentioned above.Let us proceed into the next steps.First we need to setup the Mongoose Schema/Model that we will use for the MongoDBIn the Medium article I mentioned above, TodoList collection is used, but for this example we use GraphqlPagination collection with the below structure:{ “id” : id_number, “item” : item_text }This is a very simple structure and the schema and model are as mongoose from ‘mongoose’;var Schema = mongoose.Schema;// create a schemavar gpSchema = new Schema({ id: Number, item: String}, graphPageModel = gpSchema);export default graphPageModelIf you want to understand what Schema and Model in Mongoose are, click on the respective links to learn on it.Next, we setup the actual GraphQL schema, which will be used to defined the GraphQL query we use for cursor pagination.Great!
  • so now we have setup the Mongoose Schema and Model and we know how the documents on MongoDB will look like.Setup the GraphQL Schema for our query that will do cursor pagination.The schema was heavily inspired from this query used in GraphQL official documentation.The cursor pagination query we will use is as shown { totalCount edges { cursor node { id item } } pageInfo{ endCursor hasNextPage }}The schema for this is around 200 lines of code, so I will not post it here, but you can have a look at it in this link.But of course, I am not going to leave you hanging there with just the query.
  • Before I break down the query, let us first see what are the inputs I am is basically setting the limit on the number of rows I want GraphQL to retrieve each time$after — This is where we use Cursor to say getting me all the records after this cursor.So putting them together, you can roughly translate the query asHey mainQuery retrieve me $first records $after this cursorExample:- Hey mainQuery retrieve me 10 records after 100 ($after is the cursor which is id field from GraphqlPagination collection in our example).
  • And next time, hey mainQuery retrieve me 10 records after 110, and so on…And this is the magic behind making a cursor pagination query in GraphQL :-)Oh an a very important point to note — GraphQL team suggests to encode the cursor as base64Alright, now you know what is the input we pass, and why we do it like this.3 .
  • Probably we should get on with the query and break it down and explore the resolve function.Part 1 and 2 of the query will be explained together — Node EdgesWe query the GraphqlPagination collection using mongoose to retrieve the documents which are greater than the cursor we provided as input (after) and limit the value based on the input variable first.We use mongoose cursor.

Have you ever noticed when you browse on website and as you keep scrolling down, more content is loaded dynamically to the page? Let us take the best example of Facebook. As you keep scrolling down…
Continue reading “Infinite Scrolling in React using Apollo and React-Virtualized — GraphQL Cursor Pagination”