Google jQuery hosting (very short version)
Via this article, use the Google-hosted jQuery instead of serving it yourself:<script type="text/javascript"...
View ArticleEmacs espresso-mode for jQuery
Because js2-mode (20090723b) indents jQuery like this:$(document).ready(function() { $("a").click(function() { alert("Hello World"); }); });instead of this:$(document).ready(function() {...
View ArticleClik here to view.
jQuery flot stacked bar chart example
Flot is a JavaScript plotting library for jQuery. Here are my steps to create a simplified version of thestacked bar chart example from the flot examples page. For more information, see theAPI...
View ArticleA bank style session timeout example using jQuery, Bootstrap, and Flask
This is an example that uses JavaScript to display a session timeout warning modal 10 minutes before session expiration. It also resets the session expiration whenever the user clicks the mouse. It...
View ArticleHow to install grunt on Ubuntu 14.04
Grunt is a JavaScript task runner that can be used to compileSass, runJSHint, or runmany other plugins. It depends on the Node.js package manager,npm.If you use the standard Ubuntu Trusty Tahr...
View ArticleCustomizing Bootstrap (Sass) using Grunt
Update 2015-12-02: I updated the post to use npm instead of Bower to install Bootstrap because it eliminates an extra tool and I hear this is the preferred method.Update 2015-02-22: My co-workers...
View ArticleHow to install gulp.js on Ubuntu 14.10
gulp.js is a JavaScript build tool similar to Grunt. It depends on the Node.js package manager, npm.If you use the standard Ubuntu Utopic Unicorn repository to install nodejs/npm, you might get this...
View ArticleCalling JavaScript from Python to de-CloudFlare scraped content
Yesterday I wrote a script to scrape my own web page because I screwed up the CSV export feature and Product needed the data. One problem was that theCloudFlare CDNobfuscated the email addresses on the...
View ArticleAn example using reduce() in Underscore.js
I never learned how to use reduce in Python since our BDFLrecommended against it. But since JavaScript doesn't have list comprehensions, I'm learning some functional constructs in Underscore.js....
View ArticleSwitching to OS X and front end development
After 7 years, I've yielded to the Dark Side and switched from Ubuntu to OS X on my work laptop. I've also switched from Python and back end web development to JavaScript and front end development. The...
View ArticleModules and import in ES6 for Python developers
td.col2 { width: 500px; } Here's a comparison of Python and JavaScript (ES6) imports. There are a few differences between the two: JavaScript imports are static; Python's are dynamic.JavaScript items...
View ArticleHow to set up Babel 6 with React on Mac OS X (command line only)
Babel is a tool used to compile JavaScript from ES6 to ES5. It is also the official way to compile React's JSX. Here is how to install and set up Babel 6 on OS X to run on the command line to compile...
View ArticleA chained modals example w/ React Bootstrap
This is an example usingReact to create a sequence of chained modals. Each modal has a "Next" button that, when clicked, advances to the next modal. The list of modals is configurable at page load. I...
View ArticleA chained modals example w/ React Router (part 2)
This is an example usingReact and React Router to create a sequence of chained modals. In part 1, I made a basic example where clicking a "Next" button advanced to the next modal in a list. This...
View ArticleSome ES6+ features used in React development
The newest versions of JavaScript,ES2015 (ES6),ES2016 (ES7),ES2017 andbeyond have many features that can be used today viaBabel. Here are a few features I've used in React development.Arrow functions...
View ArticleComparing vanilla React, Redux, and Redux Thunk - Chained modals exercise...
This is a comparison of three methods for building a sequence of modals using: 1) React only 2) React+Redux and 3) React+Redux+Redux Thunk.Inpart 1 andpart 2, I created a configurable sequence of...
View ArticleFlow type cheat sheet
#flow a { color: #337ab7; } #flow a:visited { color: #002540; }Flow is a static type checker for Javascript. This is a list of Flow types generated from the source code in...
View ArticleUsing Firebase, Next.js, React, Redux, styled-components, and Reactstrap to...
Here are some notes on making yet another task manager app usingFirebase,Next.js,React,Redux,styled-components,Reactstrap(Bootstrap 4 alpha),Flow, andPrettier. I realize Hacker News clones are the new...
View ArticleWhat are Redux selectors? Why use them?
Selectors are functions that take Redux state as an argument and return some data to pass to the component.They can be as simple as: const getDataType = state => state.editor.dataType;Or they can...
View ArticleHow to set up a React Apollo client with a Graphcool GraphQL server
Graphcool is a service similar to Firebase except it is used to createGraphQL APIs instead of RESTful ones.Apollo Client is a GraphQL client (alternative toRelay) that can be used with React (and other...
View ArticleWhat does Redux's combineReducers do?
Redux uses asingle root reducer function that accepts the current state (and an action) as input and returns a new state. Users of Redux may write the root reducer function in many different ways, but...
View ArticleCaching a filtered list of results w/ Redux, React Router, and...
.postsum h5 { margin-bottom: 6px; margin-top: 8px; } This post shows how to cache API data for aReact +Redux application using ideas from my library, redux-promise-memo. The example app displays a...
View ArticleClik here to view.
How to useMemo to improve the performance of a React table
These are notes on how I improved the React rendering time of a large table withuseMemo, the React Devtools, and consideration of referential equality of my data.Summary of stepsProfile using the...
View ArticleReact hook to fit text in a div
This is a React hook that iteratively adjusts the font size so that text will fit in a div. checks if text is overflowing by using scrollHeight andoffsetHeight from...
View ArticleHow to remount a React component when a prop changes
To remount a component when a prop changes, use theReact key attribute as described inthis post on the React blog: When a key changes, React will create a new component instance rather than update the...
View ArticleHow to generate static HTML using React, TypeScript, and Node.js
React is used to build web applications that run JavaScript in a user's browser (client side rendering). It can also be used from a Node.js script to generate static HTML (static rendering). I used...
View ArticleHow to download pull request metadata using the GitHub GraphQL API
This is a TypeScript Node.js script to download GitHub pull request information (title, body, comments, etc.) using the GitHub GraphQL API. The data is saved in a JSON file. The GitHub repo is...
View ArticleExample Next.js GitLab CI/CD Amazon ECR and ECS deploy pipeline
I've created an example Next.js project with a GitLab CI/CD pipeline that builds a Docker image, pushes it toAmazon ECR, deploys it to anAmazon ECSFargate cluster, and uploads static assets (JS, CSS,...
View ArticleNext.js Cypress GitLab CI example
This is an example Next.js project that runs a Cypress test in Docker using aGitLab CI pipeline. It also uses theGitLab Container Registry for caching purposes. GitLab...
View ArticleNext.js GitLab CI/CD Docker multi-stage example
This describes an example Next.js project with a GitLab CI/CD pipeline that does the following:installs npm packages and builds static assetsruns ESLint, TypeScript, and Cypressbuilds a Docker image...
View ArticleBuildtime vs runtime environment variables with Next.js and Docker
For a Next.js app, buildtime environment variables are variables that are used when the next build command runs.Runtime variables are variables used when thenext start command runs. Below are ways to...
View ArticleSimple codemod example with jscodeshift
jscodeshift codemods allow refactoring JavaScript or TypeScript code by manipulating the abstract syntax tree. This is an example showing how to rename variables named foo tobar.Install jscodeshiftnpm...
View ArticleAphrodite to CSS Modules codemod
I wanted to convert our React project fromAphrodite toCSS Modules. The biggest impetus was that Aphrodite isn't supported by the newNext.js v13 app directory feature, which I'm excited to try. I like...
View ArticleClik here to view.
Graphene and Relay example GraphQL pagination API and UI
This describes an example GraphQL API usingRelay connections to power a discretely paged Amazon-like pagination UI. Connections are designed for infinite-scroll UIs, however Artsy Engineering...
View ArticleExample Node.js Passport.js SAML app using OneLogin
I put an example Express.js, Passport.js OneLogin SAML SSO authentication app on github here:https://github.com/saltycrane/express-passport-saml-example. I used the...
View ArticleNext.js Relay GraphQL Pokemon example
Here is a quick and dirty Pokemon TCG web UI usingNext.js,Relay, and theTCGdexGraphQL API. Initially this was supposed to be a proof-of-concept of theNext.js rewrites feature, but that doesn't work...
View ArticleNext.js App Router (RSC) projects w/ open source code
Here are some example projects with open source code using Next.js App Router and React Server Components (RSC).Capcode: https://github.com/CapSoftware/Cap/tree/main/apps/website: https://cap.so/via:...
View ArticleHow to use ast-grep with GraphQL
ast-grep is a code search + replace tool that uses the abstract syntax tree (AST). It has language support for TypeScript, Python, and others, but it doesn't support GraphQL out of the box. However,...
View Article