Skip to content

Instantly share code, notes, and snippets.

View ixahmedxi's full-sized avatar
👨‍🔧
Orbitkiting and Noodleing

Ahmed Elsakaan ixahmedxi

👨‍🔧
Orbitkiting and Noodleing
View GitHub Profile
@ixahmedxi
ixahmedxi / gulpfileBrowserSync.js
Last active February 23, 2018 09:46
Gulp BrowserSync
const gulp = require('gulp')
const browserSync = require('browser-sync').create()
gulp.task('browser-sync', () => {
browserSync.init({
server: {
baseDir: "./"
}
})
})
@ixahmedxi
ixahmedxi / sassBrowserSyncGulp.js
Created February 23, 2018 09:47
Gulp Browser Sync with sass compiling
const gulp = require('gulp')
const browserSync = require('browser-sync').create()
gulp.task('browser-sync', ['sass'], () => {
browserSync.init({
server: {
baseDir: "./"
}
})
@ixahmedxi
ixahmedxi / compileSassGulp.js
Created February 23, 2018 09:48
Compile Sass with gulp
const gulp = require('gulp')
const sass = require('gulp-sass')
gulp.task('sass', () => {
return (
gulp.src('src/styles/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/'))
)
})
@ixahmedxi
ixahmedxi / webpackSassCompile.js
Created February 23, 2018 09:49
Webpack sass compiling
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: require('path').resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.scss$/,
@ixahmedxi
ixahmedxi / react-classpoint.js
Last active February 23, 2018 18:24
React component that changes className when in view
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Waypoint from 'react-waypoint'
class ClassPoint extends Component {
constructor(props) {
super(props)
this.state = { active: false }
this.onEnter = this.onEnter.bind(this)
this.onLeave = this.onLeave.bind(this)
export type TConfigMode = 'development' | 'production'
import * as dotenv from 'dotenv'
import * as fs from 'fs'
export class ConfigService {
private readonly envConfig: { [key: string]: string }
constructor(mode: 'development' | 'production') {
this.envConfig = dotenv.parse(fs.readFileSync(`${mode}.env`))
}
@ixahmedxi
ixahmedxi / component.tsx
Created September 25, 2023 23:23
React resizable panel
import { AnimatePresence, motion } from "framer-motion";
import { PropsWithChildren } from "react";
import useResizeObserver from "use-resize-observer";
const ignoreCircularReferences = () => {
const seen = new WeakSet();
return (key: string, value: Record<string, unknown>) => {
if (key.startsWith("_")) return;
if (typeof value === "object" && value !== null) {
if (seen.has(value)) return;
@ixahmedxi
ixahmedxi / tsup.config.ts
Created December 2, 2023 13:38
tsup multi entrypoint
import fs from 'fs';
import path from 'path';
import { defineConfig } from 'tsup';
// INFO: This is the only place you need to update when adding new entry folders
const entryFolders = ['primitives', 'ui'];
function getAllFilesInDirectory(dirPath: string): string[] {
return fs.readdirSync(dirPath).reduce<string[]>((allFiles, file) => {
import path from 'path';
import { fileURLToPath } from 'url';
import comments from '@eslint-community/eslint-plugin-eslint-comments/configs';
import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import nextPlugin from '@next/eslint-plugin-next';
import eslintConfigPrettier from 'eslint-config-prettier';
import hooksPlugin from 'eslint-plugin-react-hooks';
import reactRecommended from 'eslint-plugin-react/configs/recommended.js';