Skip to content

Instantly share code, notes, and snippets.

View sparrow's full-sized avatar

Volodymyr Vorobiov sparrow

90 followers · 0 following
View GitHub Profile
@sparrow
sparrow / getInitialProps.js
Created September 18, 2020 09:40
This code snippet is an example of using getInitialProps to enable server-side rendering for a React application with Next.js. This code snippet is from the article originally published on RubyGarage’s blog: https://rubygarage.org/blog/how-to-integrate-ssr-for-react-app
function Page({ stars }) {
return <div>Next stars: {stars}</div>
}
Page.getInitialProps = async (ctx) => {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
return { stars: json.stargazers_count }
}
@sparrow
sparrow / getServerSideProps.js
Created September 18, 2020 09:35
This code snippet is an example of using getServerSideProps to enable server-side rendering for a React app with Next.js. This code snippet is from the article originally published on RubyGarage’s blog: https://rubygarage.org/blog/how-to-integrate-ssr-for-react-app
function Page({ data }) {
// Render data...
}
// This gets called on every request
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://.../data`)
const data = await res.json()
@sparrow
sparrow / getStaticPaths.js
Last active September 18, 2020 09:36
This code snippet is an example of using getStaticPaths to enable static generation for a React application page with Next.js. This code snippet is from the article originally published on RubyGarage’s blog: https://rubygarage.org/blog/how-to-integrate-ssr-for-react-app
// This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get posts
const res = await fetch('https://.../posts')
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => `/posts/${post.id}`)
// We'll pre-render only these paths at build time.
@sparrow
sparrow / getStaticProps.js
Created September 18, 2020 08:52
This code snippet is an example of using getStaticProps to pre-render a React application page. This code snippet is from the article originally published on RubyGarage’s blog: https://rubygarage.org/blog/how-to-integrate-ssr-for-react-app
function Blog({ posts }) {
// Render posts...
}
// This function gets called at build time
export async function getStaticProps() {
// Call an external API endpoint to get posts
const res = await fetch('https://.../posts')
const posts = await res.json()
@sparrow
sparrow / static_generation.js
Last active September 18, 2020 09:42
This code snippet is an example of using static generation to pre-render a React app with Next.js. This code snippet is from the article originally published on RubyGarage’s blog: https://rubygarage.org/blog/how-to-integrate-ssr-for-react-app
function About() {
return <div>About</div>
}
export default About
@sparrow
sparrow / ic_arrow_back_24dp.xml
Created October 17, 2019 11:56 — forked from DenysZP/ic_arrow_back_24dp.xml
An example of creating your own icon based on the standard.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<!--standard icon-->
<path
android:fillAlpha="0.2"
android:fillColor="#FF000000"
@sparrow
sparrow / update_spec.rb
Last active April 4, 2019 12:32
Test that verifies the logic of graphql mutation for project updating. This code snippet is from the article originally published on RubyGarage’s blog: https://rubygarage.org/blog/graphql-and-trailblazer-tutorial
require 'support/schemas/projects/update'
RSpec.describe GraphqlsController, type: :controller do
let(:user) { create :user }
let!(:project) { create :project, user: user }
describe 'POST #create' do
let(:mutation) do
'
mutation($id: ID!, $title: String!) {
@sparrow
sparrow / install-yarn
Created November 1, 2018 07:20
This code snippet shows one of the way how to install Yarn.
npm install -g yarn
@sparrow
sparrow / filtersDemoAngular.js
Created March 6, 2018 08:45
This is a JavaScript code snippet that we used for our blog post https://rubygarage.org/blog/things-vue-takes-from-react-and-angular at RubyGarage. This is an example of filter syntax implementation in Angular.
<span>{{ message | uppercase }}</span>
@sparrow
sparrow / filtersDemoVue.js
Created March 6, 2018 08:44
This is a JavaScript code snippet that we used for our blog post https://rubygarage.org/blog/things-vue-takes-from-react-and-angular at RubyGarage. This is an example of filter syntax implementation in Vue.
<span>{{ message | uppercase }}</span>