sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

sandren

Tailwind CSS best practices

Utility classes

1. When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!

2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

3. Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

bbudd

I spent a few hours chasing down just how to get my static assets (css, fonts, images) to load in an Electron app built using electron-forge v6 (https://www.electronforge.io/) and its webpack plugin (https://www.electronforge.io/config/plugins/webpack) while in development mode. There really isn't any documentation available online, either in the electron-forge documentation or in places like blogs or gists or stackoverflow. So I thought I'd put it down here.

Step 1

Load CopyWebpackPlugin npm i -D copy-webpack-plugin

---

Step 2

Use the plugin to move your directories into place.

josephmaxim

A list of communities to share your blog post and products as an indie maker.

Most of this groups have between 10k-14million members. Important: In order to avoid being banned or being labeled as spam, Engage with members first by leaving a like/upvote and comment on their posts. Wait at least a week before posting.

• Business Owners, Entrepreneurs and Start-Ups (FB group)
• SaaS Growth Hacks (FB group)
• Small Business Owners United (FB group)
• Entrepreneur Hustle (FB group)
• Web Design and Development (FB group)
• Online 247 Network Marketing Group (FB group)
• Web Developers (FB group)

randomor

# This file contains the fastlane.tools configuration
# You can find the documentation at https://docs.fastlane.tools
#
# For a list of all available actions, check out
#
#     https://docs.fastlane.tools/actions
#
# For a list of all available plugins, check out
#
#     https://docs.fastlane.tools/plugins/available-plugins

ferrannp

React Native Folder Structure

Motivations

• Sharing what has worked for me in different React Native projects
• Reusing screens in different parts of your app
• Easy to work separately in a feature
• Add an extra level (nested folder) only when necessary
• Don't overuse index.js for everything

levelsio

<!-- Maker Link by @levelsio -->
<!-- MIT License -->

<style>
	body {
		background:#333;
	}
	.levelsio-by {
		font-family:"Helvetica Neue",sans-serif;
		right:0;

jsjaspreet

import fs from 'fs';
import path from 'path';
import { graphql } from 'graphql';
import { introspectionQuery } from 'graphql/utilities';
import schema from './src/schema/index';

(async () => {
  const result = await graphql(schema, introspectionQuery);
  if (result.errors) {
    console.error(

kiok46

modify_color_of_tabs

Change the Color of Custom tabs when they change.

• handleTabNavigation method that changes the state which leads to re-render the UI and hence the colors.

  handleTabNavigation = (route, idx) => {
      if (this.state.storiesTabOpen && idx === 0 || this.state.searchTabOpen && idx === 1){
          this.setState({ searchTabOpen: !this.state.searchTabOpen,

kiok46

NoItemComponent

Display a nice Component when no Items are available to show.

import React, { Component } from 'react';
import { Text, View, Dimensions, StyleSheet } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import Colors from '../constants/Colors';