{"componentChunkName":"component---src-templates-page-tsx","path":"/page/10","result":{"pageContext":{"searchData":[{"id":"cjjg9ui0t303s010375m42b9w","title":"Turn a Browser Window into a Notepad with This One-Liner","slug":"/turn-a-browser-window-into-a-notepad-with-this-one-liner","avatar":"https://s3.amazonaws.com/contentkit/static/cjjg9ui0t303s010375m42b9w/OYIaJ1KK_400x400(1).png","date":"July 1, 2020"},{"id":"cjiy7xl9o17w701039gvl18a5","title":"Creating a Collaborative Editor with Draftjs for Fun","slug":"/draft-js-collaborative-editor","avatar":"https://s3.amazonaws.com/contentkit/static/cjiy7xl9o17w701039gvl18a5/draft-js.png","date":"June 28, 2020"},{"id":"cjeqgfsdsnmx90167n7j290kt","title":"How To Include SASS In Your React Project","slug":"/sass-react-webpack","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfsdsnmx90167n7j290kt/parcel-bundler.png","date":"May 1, 2020"},{"id":"cjiy4tseq0tnw0103bc5s7sxj","title":"How to Add a Loading Indicator to Material Ui's Component","slug":"/creating-a-material-ui-button-with-spinner-that-reflects-loading-state","avatar":"https://s3.amazonaws.com/contentkit/static/cjiy4tseq0tnw0103bc5s7sxj/material-ui.png","date":"January 28, 2020"},{"id":"cjkq4u7470ihr0157ad175b12","title":"Connecting to AWS Lambda via WebSockets","slug":"/connecting-to-aws-lambda-via-websockets","avatar":"https://s3.amazonaws.com/contentkit/static/cjkq4u7470ihr0157ad175b12/MQTT.js.png","date":"January 12, 2020"},{"id":"cjeqgfnhknnpe0199zbfwwkd8","title":"6 Really Cool APIs to Have Fun With","slug":"/cool-apis-to-have-fun-with","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfnhknnpe0199zbfwwkd8/scale-api.png","date":"January 1, 2020"},{"id":"cjeqgftvknnr30199dvw266qh","title":"Installing Node Canvas in AWS Lambda","slug":"/node-canvas-aws-lambda","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgftvknnr30199dvw266qh/aws-lambda.jpg","date":"December 31, 2019"},{"id":"cjn5fv8kl0pfj0124wwebufms","title":"GoLang Cheatsheet","slug":"/golang-cheatsheet","avatar":"https://s3.amazonaws.com/contentkit/static/cjn5fv8kl0pfj0124wwebufms/golang.png","date":"October 13, 2019"},{"id":"cjn15y8740liw0175u3s707eh","title":"Scheduled Jobs & Work Queues With Postgresql","slug":"/scheduled-jobs-work-queues-with-postgresql","avatar":"https://s3.amazonaws.com/contentkit/static/cjn15y8740liw0175u3s707eh/kxHkAenZ_400x400.jpg","date":"October 8, 2019"},{"id":"cjmym86fh0jy1013398nfzuqu","title":"Creating a Bot to Refill Parking Meters Using AWS Lambda","slug":"/creating-a-bot-to-refill-parking-meters-using-aws-lambda","avatar":"https://s3.amazonaws.com/contentkit/static/cjmym86fh0jy1013398nfzuqu/prwHMlRn_400x400.jpg","date":"October 7, 2019"},{"id":"cjmsaqt6l09le01046qeukpp9","title":"The USPS Tracking API: How To Track Packages","slug":"/usps-tracking-api","avatar":"https://s3.amazonaws.com/contentkit/static/cjmsaqt6l09le01046qeukpp9/usps.png","date":"October 3, 2019"},{"id":"cjeqgfuyenmy20167rycnmiql","title":"Stormpath vs Firebase - A Side-By-Side Comparison","slug":"/stormpath-vs-firebase-a-side-by-side-comparison","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfuyenmy20167rycnmiql/m3cEA33V_400x400.jpg","date":"September 2, 2019"},{"id":"cjeqgfv88nnrt01997wxd4rnl","title":"Sending emails with Firebase Cloud Functions","slug":"/firebase-functions-sending-emails","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfv88nnrt01997wxd4rnl/firebase.jpg","date":"September 2, 2019"},{"id":"cjeqgfqjknnq20199oe3zwi37","title":"Deploying To DigitalOcean From Travis","slug":"/deploying-to-digitalocean-travis","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfqjknnq20199oe3zwi37/digitalocean.jpeg","date":"August 25, 2019"},{"id":"cjkvpbr6p06z50181fg7xvsc3","title":"Circumventing AWS Lambda's Bundle Size Limit","slug":"/circumventing-aws-lambdas-bundle-size-limit","avatar":"https://s3.amazonaws.com/contentkit/static/cjkvpbr6p06z50181fg7xvsc3/b2lWK7c0_400x400.png","date":"August 15, 2019"},{"id":"cjiy45h7m0iba0111f5imt5em","title":"A Quick Way to List All Unicode Characters (Javascript)","slug":"/unicode-characters-javascript","avatar":"https://s3.amazonaws.com/contentkit/static/cjiy45h7m0iba0111f5imt5em/unicode.png","date":"July 29, 2019"},{"id":"ci1rxc41tm8yi7nd156pz9dom","title":"Kibana Rest API","slug":"/kibana-rest-api","avatar":"https://s3.amazonaws.com/contentkit/static/ci1rxc41tm8yi7nd156pz9dom/elastic.png","date":"July 24, 2019"},{"id":"cjeqgfjgennmw0199wha3j6u0","title":"Airtable As A Database For Middleman [Tutorial]","slug":"/airtable-middleman-database","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfjgennmw0199wha3j6u0/airtable-books.png","date":"June 1, 2019"},{"id":"cjeqgfj5qnnmr0199vzd85xuo","title":"Building A Multiplayer Game With Three.Js + WebSockets","slug":"/multiplayer-game-threejs","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfj5qnnmr0199vzd85xuo/three.jpg","date":"June 1, 2019"},{"id":"cjeqgfi8hnnml0199f1jyo1p5","title":"The Best Sketch Plugins","slug":"/the-best-sketch-plugins","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfi8hnnml0199f1jyo1p5/sketch.png","date":"June 1, 2019"},{"id":"d9920hsu8y7365frf2c6fxrx2","title":"Configuring Vault by Hashicorp in AWS EC2","slug":"/configuring-vault-by-hashicorp-in-aws-ec2","avatar":"https://s3.amazonaws.com/contentkit/static/d9920hsu8y7365frf2c6fxrx2/vault.png","date":"April 15, 2019"},{"id":"cjeqgfvsfnns00199mlbff48i","title":"Best Zapier Alternatives","slug":"/best-zapier-alternatives","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfvsfnns00199mlbff48i/zapier-alternative-workato.png","date":"January 31, 2019"},{"id":"cjn3l18390lyt0158i8qxs5dc","title":"Running A Simple Node Web Server On AWS EC2","slug":"/running-a-simple-node-web-server-on-aws-ec2","avatar":"https://s3.amazonaws.com/contentkit/static/cjn3l18390lyt0158i8qxs5dc/aws.png","date":"October 11, 2018"},{"id":"cjeqgfr4snmwz01673m8l4i51","title":"Graph.Cool vs Firebase","slug":"/graphcool-vs-firebase","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfr4snmwz01673m8l4i51/graphcool.png","date":"October 7, 2018"},{"id":"cjklurup00k0201739mflg9sz","title":"Accessing Redis on an Aws EC2 Instance from the Outside\t","slug":"/accessing-redis-on-an-aws-ec2-instance-from-the-outside","avatar":"https://s3.amazonaws.com/contentkit/static/cjklurup00k0201739mflg9sz/logo.jpeg","date":"August 9, 2018"},{"id":"cjkfzvvxt08up0191l38aadq4","title":"Using PDFtk in AWS Lamba","slug":"/using-pdftk-in-aws-lamba","avatar":"https://s3.amazonaws.com/contentkit/static/cjkfzvvxt08up0191l38aadq4/pdftk.png","date":"August 4, 2018"},{"id":"cjeqgfqsgnnq70199l4vc6vim","title":"Configuring WebSockets on Elastic Beanstalk/EC2","slug":"/websockets-aws-elasticbeanstalk-ec2","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfqsgnnq70199l4vc6vim/aws.png","date":"July 15, 2018"},{"id":"cjit96q2yk0is0111qpbmw66s","title":"Getting Started With Gmail API","slug":"/gmail-api-quickstart","avatar":"https://s3.amazonaws.com/contentkit/static/cjit96q2yk0is0111qpbmw66s/gmail.png","date":"June 28, 2018"},{"id":"cjeqgfo23nmwd0167ynqe7xi8","title":"5 Tips For Using NextJs","slug":"/5-tips-for-using-nextjs","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfo23nmwd0167ynqe7xi8/bHjpwZem_400x400.png","date":"June 1, 2018"},{"id":"cjhxixcyhw4ze01035butoukz","title":"React unstable_deferredUpdates","slug":"/react-unstable_deferredupdates","avatar":"https://s3.amazonaws.com/contentkit/static/cjhxixcyhw4ze01035butoukz/OYIaJ1KK_400x400(1).png","date":"June 1, 2018"},{"id":"cjeqgflpnnnoy01993y7aez8a","title":"Simple Web Scraping With Javascript","slug":"/simple-web-scraping","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgflpnnnoy01993y7aez8a/developer-tools-scraping.png","date":"May 1, 2018"},{"id":"cjeqgfk9lnnn101994ll4ursr","title":"Easy: Add Firebase Facebook Login To Your React App","slug":"/firebase-facebook-login-react","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfk9lnnn101994ll4ursr/firebase.png","date":"May 1, 2018"},{"id":"cjeqgfiqrnmtj0167dmz5g5dg","title":"The 5 Best Static Site Web Hosts","slug":"/the-5-best-static-site-web-hosts","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfiqrnmtj0167dmz5g5dg/digital-ocean.png","date":"May 1, 2018"},{"id":"cjeqgfmi2nmvs01670pgebekn","title":"Tips and Tricks For Using NightmareJs","slug":"/nightmare-js","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfmi2nmvs01670pgebekn/nightmare.png","date":"May 1, 2018"},{"id":"cjeqgfkqennn60199707yp1fb","title":"Why You Should Create Your Next React Web App With Firebase","slug":"/firebase-react-tutorial","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfkqennn60199707yp1fb/firebase.jpg","date":"May 1, 2018"},{"id":"cjeqgfpr6nnpx019978qzmaok","title":"How to Flush Data From Heroku Redis","slug":"/heroku-redis-flushall","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfpr6nnpx019978qzmaok/3wgIDj3j_400x400.png","date":"April 1, 2018"},{"id":"cjeqgfm8xnnp30199vxndhkgh","title":"5 Ways To Style React Components","slug":"/5-ways-to-style-react-components","avatar":null,"date":"April 1, 2018"},{"id":"cjeqgflz7nmvm0167yo7wsjg3","title":"Delete Spreadsheet Rows For Google Sheets","slug":"/delete-rows-google-sheets","avatar":null,"date":"April 1, 2018"},{"id":"cjeqgfp84nnps0199dvru09ll","title":"Make An Uptime Monitoring Microservice In Under 50 Lines of Code","slug":"/twilio-uptime-monitoring-node-tutorial","avatar":null,"date":"April 1, 2018"},{"id":"cjeqgfri4nnqd0199zsv6a9fl","title":"Hexo - The Best Static Site Generator? ","slug":"/deploy-a-hexo-blog","avatar":null,"date":"April 1, 2018"},{"id":"cjeqgfoygnnpn0199f31dgk9m","title":"Airtable As A Minimum Viable Database For Your ReactJs Project","slug":"/airtable-reactjs","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfoygnnpn0199f31dgk9m/airtable-screenshot.png","date":"March 2, 2018"},{"id":"cjeqgfn6pnmw0016793f81hpx","title":"The Advanced Guide To ReactJs Checkboxes","slug":"/reactjs-checkboxes","avatar":null,"date":"January 20, 2018"},{"id":"cjeqgfe8znnly01991jo5xkxx","title":"Minimum Viable GraphQL QuickStart","slug":"/minimum-viable-graphql-quickstart","avatar":"https://s3.amazonaws.com/contentkit/static/cjeqgfe8znnly01991jo5xkxx/graphcool-schema.png","date":"January 1, 2018"},{"id":"cjeqgfgegnnmb0199jp3hv2xx","title":"How To Add A Contact Form To Your Ghost Blog","slug":"/ghost-blog-contact-form","avatar":null,"date":"November 1, 2017"},{"id":"cjeqgfmvxnnp90199bdti4r8n","title":"PHP Scraping Tutorial - Scrape Reddit With Goutte","slug":"/php-scraping-tutorial-scrape-reddit-with-goutte","avatar":null,"date":"October 7, 2017"},{"id":"cjeqgfpz1nmwp0167c5j46eij","title":"Cannot read property 'loose' of undefined","slug":"/cannot-read-property-loose-of-undefined","avatar":null,"date":"August 25, 2017"},{"id":"cjeqgftlanmxg0167zipvfzp1","title":"Airtable API Example & Tutorial - Generating Charts","slug":"/airtable-api-example-tutorial","avatar":null,"date":"January 31, 2017"},{"id":"cjeqgfphbnmwk0167ldz2mv2q","title":"React onClick Example and Tutorial","slug":"/react-onclick-example-and-tutorial","avatar":null,"date":"January 2, 2017"},{"id":"cjeqgfq8ynmwu0167z6c51ynp","title":"React Tables - How To Render Tables In ReactJS","slug":"/reactjs-tables","avatar":null,"date":"January 2, 2017"},{"id":"cjeqgfuoznmxu0167ayt2zkc3","title":"How To Add A Class in ReactJS","slug":"/reactjs-add-class","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfu6gnnrb0199nyrddra0","title":"Fetching Github Blame with the GraphQL API V4","slug":"/github-blame-graphql-api-v4","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfsmsnnqo0199o2x7dl4x","title":"How To Add Meta Descriptions to Middleman Pages","slug":"/middleman-meta-descriptions","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfs2wnnqi0199rco2vvz2","title":"Zapier Webhook Post Example & Tutorial","slug":"/zapier-webhook-post-example-tutorial","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfvhunmy90167t6ouqfmb","title":"Setting Up A Job Queue For A Node App [Tutorial]","slug":"/job-queue-node","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgftbcnnqy0199nc1f92te","title":"NextJs vs Create-React-App - A Side-By-Side Comparison","slug":"/nextjs-vs-create-react-app","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgft2pnnqt01990ty8fmeu","title":"How To Create A Modal In ReactJS [Tutorial]","slug":"/reactjs-modal","avatar":null,"date":"March 14, 2018"},{"id":"cjeqgfugpnnrj0199x7anb33t","title":"How To Use Twilio With ReactJS","slug":"/reactjs-twilio-example-tutorial","avatar":null,"date":"March 14, 2018"}],"page":10,"offset":50,"total":57,"nodes":[{"id":"cjeqgfu6gnnrb0199nyrddra0","title":"Fetching Github Blame with the GraphQL API V4","slug":"github-blame-graphql-api-v4","published_at":null,"created_at":"2018-03-14T02:16:43","excerpt":"Github API V3 was REST; V4 is GraphQL.","image":null,"posts_tags":[],"date":"March 14, 2018","html":"
Github API V3 was REST; V4 is GraphQL.
\nBelow you'll find a code snippet that fetches Github blame.
\nlet owner = 'facebook'\nlet name = 'react'\nlet path = 'packages/react/index.js'\nlet token = 'MY_PERSONAL_GITHUB_TOKEN'\nfetch('https://api.github.com/graphql', {\n method: 'POST',\n headers: {\n 'Authorization': `bearer ${token}` \n },\n body: JSON.stringify({\n query: `query {\n repository(owner:\\\"${owner}\\\", name:\\\"${name}\\\") {\n defaultBranchRef {\n target {\n ... on Commit {\n blame(path: \\\"${path}\\\") {\n ranges {\n startingLine\n endingLine\n age\n commit {\n id\n commitUrl\n commitResourcePath\n committedDate\n message\n messageBody\n oid\n url\n }\n }\n }\n }\n }\n }\n }\n }`\n })\n}).then(resp => resp.json())\n .then(resp => {\n console.log(resp)\n})
","avatar":null},{"id":"cjeqgfsmsnnqo0199o2x7dl4x","title":"How To Add Meta Descriptions to Middleman Pages","slug":"middleman-meta-descriptions","published_at":null,"created_at":"2018-03-14T02:16:41","excerpt":"The ability to tweak meta descriptions and titles to improve click-through rates is a key part of S","image":null,"posts_tags":[],"date":"March 14, 2018","html":"The ability to tweak meta descriptions and titles to improve click-through rates is a key part of SEO. Fortunately, it takes about 30 seconds to add meta descriptions and titles in the Middleman static site generator.
\nAdd the following to layout.erb between the head tags:
\n\" name=\"description\" />
\nThen specify a description in the YAML frontmatter. Remember that the upper limit for meta descriptions is 160 characters.
\n---\ntitle: On the Origin of Species\ndate: '1859-11-24 00:00:00'\ntags:\n- evolution\ndescription: The scientific theory that \npopulations evolve over the course of \ngenerations through a process of \nnatural selection.\n---
\nYou can confirm that the meta description is working by viewing the source.
","avatar":null},{"id":"cjeqgfs2wnnqi0199rco2vvz2","title":"Zapier Webhook Post Example & Tutorial","slug":"zapier-webhook-post-example-tutorial","published_at":null,"created_at":"2018-03-14T02:16:41","excerpt":"In this tutorial, I'll show you how to post form data using Zapier's Webhooks. ","image":null,"posts_tags":[],"date":"March 14, 2018","html":"In this tutorial, I'll show you how to post form data using Zapier's Webhooks.
\nIntegrating simple html forms with Zapier has proven useful for me.
\nAs an example, we'll create an email newsletter optin form that collects email addresses and pushes them to Zapier via cURL and then adds them to a Google Sheet.
\nLet's start with the cURL request and then later consider how it interfaces with Zapier.
\nPut simply, cURL is just a library that lets you make HTTP requests in PHP.
\nPHP supports libcurl, a library that allows you to connect and communicate to servers with various protocols. libcurl currently supports:
\nYou can check if cURL is enabled on your server by checking your info.php. If you don't have cURL, it's easy to install on linux via the command line:
\n$ sudo apt-get install curl\n$ sudo service apache2 restart\n$ sudo apt-get install php5-curl\n$ sudo service apache2 restart
\nHere's what our HTTP request to Zapier looks like:
\n<?php\nfunction zapier($url, $json, $headers) {\n $ch = curl_init();\n curl_setopt($ch, CURLOPT_URL, $url);\n curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\n curl_setopt($ch, CURLOPT_TIMEOUT, 10);\n curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');\n curl_setopt($ch, CURLOPT_POST, 1);\n curl_setopt($ch, CURLOPT_POSTFIELDS, $json);\n curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);\n $output = curl_exec($ch);\n echo $output;\n curl_close($ch);\n}\n$url = ''; // add your Zapier webhook url \n$json = json_encode($_POST);\n$headers = array('Accept: application/json', 'Content-Type: application/json');\n// call the zapier() function\nzapier($url, $json, $headers); ?>\n
\nHere's the cURL request to Zapier. The $url variable below is just the endpoint Zapier provides when you setup the webook for the first time (more on this later). Formally, $url will be set to something like https://hooks.zapier.com/hooks/catch/11111/xoxoxo/
\nFor the purpose of this example, let's drop this code is in a file called post.php.
\nThe zapier() function that takes the $url, $json, and $headers as arguments.
\nIf you want to quickly prove to yourself that the cURL request works, follow these quick steps:
\n$json = json_encode($_POST);
to $json = json_encode( array( \"animal\" => \"turtle\" ) );
$url
Finally, open the command line, cd into the folder where you've copied post.php, and execute the php script with:
\nphp /your-path/post.php
\nYou should see an output in the command line that looks like:
\n{\"status\": \"success\", \"attempt\": \"320eab3z-103b-430c-a78f-f84a8a0z30f0\", \"iz\": \"f767lfv8-1495-4616-a67c-604z3z396bcb\", \"request_iz\": \"hfBza0sLiPLu8AlM\"}
\n(some values changed to protect the innocent).
\nCreate a simple form as follows and point it to the post.php
you just made:
<form method=\"post\" action=\"/path/to/post.php\">\n<input type=\"email\" name=\"email\">\n<input type=\"submit\" value=\"Submit\">\n</form>
\nYou can also remove the action attribute (action=\"http://...\"
) and just post the form to itself (and add your curl script at the top of the page).
When you post the form, it will send over the $_POST
array:
$_POST = array(\"email\" => \"name@example.com\");
\nwhich with the php function json_encode returns the JSON representation of our array:
\n{\"email\":\"name@example.com\"}
\nLastly, cURL makes the HTTP request to Zapier delivering that JSON payload.
\nGo to the github repo for this project or type git clone https://github.com/unshift/zapier-webhook-example in terminal.
\nCreate a new zap. Use \"Webooks by Zapier.\"
\n\nSelect Catch Hook.
\n\nCopy your custom webhook URL and paste it in like so:
\n$url = 'https://hooks.zapier.com/hooks/catch/10532156/d6ba34/';
\n","avatar":null},{"id":"cjeqgfvhunmy90167t6ouqfmb","title":"Setting Up A Job Queue For A Node App [Tutorial]","slug":"job-queue-node","published_at":null,"created_at":"2018-03-14T02:16:45","excerpt":" Many web apps will need a job queue at some point in their development.","image":null,"posts_tags":[],"date":"March 14, 2018","html":"Many web apps will need a job queue at some point in their development.
\nA job queue enables you to uncouple long-running or resource-intensive tasks from the request/response lifecycle.
\nCreating PDFs, sending emails, and processing audio or video are tasks that are best handled by a job queue. A queue also enables you to balance load and triage tasks.
\nOne of the best job queue solutions for Node is kue by Automattic.
\nWith Kue, you can quickly deploy a job queue microservice with a rest API and simple UI.
\n\nKue uses Redis as a database to store jobs along with Node's built-in event emitters.
\nStarting from scratch:
\nmkdir jobs-queue && cd jobs-queue\ntouch index.js\nnpm init
\nInstall kue:
\nnpm i kue --save
\nIn index.js:
\nconst kue = require('kue')\nconst queue = kue.createQueue({\n redis: process.env.REDIS_URL\n})\nvar data = {\n title: 'my-job',\n message: 'lorem ipsum'\n}\nvar task = queue.create('task', data)\n .delay(60 * 1000) // 1 minute\n .priority('high')\n .save()\nqueue.process('task', (job, done) => {\n console.log(\"message\", job.data.message)\n done()\n})
","avatar":null},{"id":"cjeqgftbcnnqy0199nc1f92te","title":"NextJs vs Create-React-App - A Side-By-Side Comparison","slug":"nextjs-vs-create-react-app","published_at":null,"created_at":"2018-03-14T02:16:42","excerpt":"NextJs is a new project with a lot to offer.","image":null,"posts_tags":[],"date":"March 14, 2018","html":"NextJs is a new project with a lot to offer.
\nThe comparison between NextJs and create-react-app is an apt one. What NextJs brings to the table is great defaults. Like Create-React-App, NextJs is opinionated. It makes choices for you about what an ideal React setup should look like.
\nOne of the biggest pain points in starting a new javascript App is the tooling. Webpack, babel, and the like can be a pain to setup, especially with the aggressive release cycle of open source javascript projects. As of this writing you're probably already using Webpack syntax that's been deprecated.
\nHere are the biggest differences between Create-React-App and NextJs.
\nCreate-React-App uses babel, webpack, and eslint but \"hides\" this tooling and bundles it together in react-scripts.
\nBut Create-React-App doesn't lock you in; when you're ready to depart from training wheels you can unmask these dependencies and then configure them. NextJs, on the other hand, provides great defaults with the option to configure tooling if you want to. For example, you can override (or extend) NextJs's webpack configuration by adding a webpack.config.js file. Or you can add an express server if you don't want to use NextJs' server.
\nThe biggest selling point of NextJs is server-side rendering out of the box.
\nPeople will tell you that Google crawls javascript and that it's sufficient to serve up an almost-empty html document with
along with a massive bundle.js.\nIt's true that Google crawls javascript. But this just isn't a good approach for apps that are content-focused and need to expose their content to search. Do you think a web app like Yelp or Reddit would ever resort to client side rendering for the bulk of their content? They would drop off the map in search.
\nNextJs can be a pain with styling. Out of the box, NextJs uses styled-jsx, which is OK. But what if you want to use SASS or styled-components? You're in for a few hours of frustration.
\nInitializing a new NextJs project creates two directores ./pages and ./components.
\nPages are like container React components. But they have more significance than simply wrapping other components. Page components are literally rendered into pages with a little help from react-router. That is, http://localhost:3000/about points to ./pages/about.js. This approach has strengths and limitations. One of the limitations is that you can only make a client-side fetch request in top-level page components.
\n","avatar":null}]}}}