kamleshchandnani

Bundling Design Systems/Component Libraries

First of all you need to decide who will be your target consumers based on the following:

1. They have the same environment(webpack config, babel config) setup as you where you built your design system(this is mostly possible if you use monorepos/same configs where all the teams share the same environment).

2. They don't have the same environment which is the case when you work in bigger teams and you want to distribute your design system as any other npm package which is already built and can be used directly.

If your use case falls under case no. 1 then you can just compile the source babel src -d build and leave the bundling to the consumer projects tools(webpack/rollup)

kassens

'use strict';

// To be used with jscodeshift: https://github.com/facebook/jscodeshift

export default function transformer(file, api) {
  const j = api.jscodeshift;

  if (!file.source.includes('graphql`')) {
    return;
  }

augbog

Frontend Technical Interview Prep

EDIT: Well this has been linked now so just an FYI this is still TBD. Feel free to comment if you have suggestions for improvements. Also here is an unrolled Twitter thread of a lot of the tips I talk about on here.

I've been doing frontend for a while now and one thing that really gripes me is the interview. I think the breadth of knowledge of a "Frontend Engineer" has been so poorly defined that people really just expected you to know everything. Many companies have made this a hybrid role. The Web is massive and there are many MANY things to know. Some of these things are just facts that you learn and others are things you really have to understand.

Every time I interview, I go over the same stuff. I wanted to create a gist of the TL;DR things that would jog my memory and hopefully yours too.

Lots of these things are real things I've been asked that caught me off guard. It's nice to have something you ca

nadavrot

High-Performance Matrix Multiplication

This is a short post that explains how to write a high-performance matrix multiplication program on modern processors. In this tutorial I will use a single core of the Skylake-client CPU with AVX2, but the principles in this post also apply to other processors with different instruction sets (such as AVX512).

Intro

Matrix multiplication is a mathematical operation that defines the product of

bvaughn

// This is an example of how to fetch external data in response to updated props,
// If you are using an async mechanism that does not support cancellation (e.g. a Promise).

class ExampleComponent extends React.Component {
  _currentId = null;

  state = {
    externalData: null
  };

morajabi

import React, { Component } from 'react'

class ErrorBoundary extends Component {
  state = {
    error: null,
    hasError: false,
    showError: false,
  }

  componentDidCatch(e) {

Mohamed3on

1. Install prettier
2. Make a .prettierignore file, and add directories you'd like prettier to not format, for example: **/node_modules
3. Run prettier --write "**/*.js" *Don't forget the quotes.
4. Optional: if you want to format JSON/SCSS files too, replace js with json/scss.

praveenpuglia

I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.

Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)

Shadow DOM

Heads Up! It's all about the V1 Spec.

In a nutshell, Shadow DOM enables local scoping for HTML & CSS.

sibelius

// @flow
import React from 'react';
import hoistStatics from 'hoist-non-react-statics';
import RelayStore from './RelayStore';
import ErrorView from './components/common/Error';
import LoadingView from './components/common/LoadingView';

import type {
  Environment,
  ClassicEnvironment,

Mohamed3on

Studying for a Tech Interview Sucks, so Here's a Cheat Sheet to Help

This list is meant to be a both a quick guide and reference for further research into these topics. It's basically a summary of that comp sci course you never took or forgot about, so there's no way it can cover everything in depth. It also will be available as a gist on Github for everyone to edit and add to.

Data Structure Basics

Array

Definition:

• Stores data elements based on an sequential, most commonly 0 based, index.
• Based on tuples from set theory.