alexeyraspopov

let DataContext = React.createContext();

function DataTable({ children }) {
  return <section className="data-table">{children}</section>;
}

function DataTableHead({ children }) {
  return (
    <header className="data-table-head">
      <div className="data-table-row">{children}</div>

bradtraversy

GENERATORS:

• Text Content Generator - http://www.lipsum.com
• Favicon Generator - http://tools.dynamicdrive.com/favicon
• Data Generator - https://mockaroo.com/
• Mobile Mockup Generator - https://mockuphone.com
• Logo Generator - https://www.logaster.com
• UUID Generator - https://www.uuidgenerator.net/
• Hash Generator - https://passwordsgenerator.net/sha256-hash-generator/
• Ultimate Code Generator - https://webcode.tools/

Kruemelkatze

Theming Ant Design with Sass and Webpack

This is a solution on how to theme/customize Ant Design (which is written in Less) with Sass and webpack. Ant itself offers two solutions and a related article on theming, but these are only applicable if you use Less, the antd-init boilerplate or dva-cli.

What this solution offers:

• use a single sass-file to customize (no duplicate variables for your project and Ant)
• hot reload compatibility
• no dependencies on outdated npm modules
• easy integration with your existing webpack setup (webpack 3+ tested)

gricard

If you enjoyed reading this, I'm intending to do more blogging like this over here: https://cdgd.tech

This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team

Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. All I need to do is npm i -D webpack@next, right?

+ webpack@4.0.0-beta.2

dahjelle

#!/bin/bash

for file in $(git diff --cached --name-only | grep -E '\.(js|jsx)$')
do
  git show ":$file" | node_modules/.bin/eslint --stdin --stdin-filename "$file" # we only want to lint the staged changes, not any un-staged changes
  if [ $? -ne 0 ]; then
    echo "ESLint failed on staged file '$file'. Please check your code and try again. You can run ESLint manually via npm run eslint."
    exit 1 # exit with failure status
  fi
done

jrencz

{
  "plugins": [
    "spellcheck"
  ],
  "rules":
    // Spellcheck
    //
    "spellcheck/spell-checker": ["warn", {
      "skipWords": [
        // own names

birkir

/**
 * Convert 7-bit ASCII to Chuck Norris style binary
 * 
 * @param  string Characters to encode
 * @return string Binary' norris style.
 */
function asciiToChuckNorris(chars) {

	// Variables
	var bits = [],

listochkin

Instructions

If you

• run Mac OS X or Linux
• have iojs installed ($ node -v prints v2.0.1)
• can bulid binary Node packages (npm install ws doesn't fail)

then you can skip all the steps below.

jeffmo

ES7 Class Properties

**~~ NOTE: This is a Stage 0 proposal. ~~**

This proposal has been moved to https://github.com/jeffmo/es-class-properties.

Please direct all future feedback to that repo in the form of directed issues.

jareware

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso