shane98c / .com Goto Github PK
View Code? Open in Web Editor NEWPortfolio website
Home Page: https://shaneloeffler.com/
Portfolio website
Home Page: https://shaneloeffler.com/
Something I like to do in all of my projects is avoid relative path imports where ever possible.
import {something} from '../../../../something'
versus:
import {something} from '@common/something'
I typically will make two files, a webpack.config.js and a next.config.js that imports the webpack config. The reason there are two is because certain IDEs (webstorm) will find the webpack config automatically and use the aliases to resolve components for you.
const path = require('path');
module.exports = {
resolve: {
alias: {
'@components': path.resolve(__dirname, 'components'),
'@containers': path.resolve(__dirname, 'containers'),
'@common': path.resolve(__dirname, 'common'),
'@pages': path.resolve(__dirname, 'pages'),
'@utils': path.resolve(__dirname, 'utils'),
'@stores': path.resolve(__dirname, 'stores')
},
},
};
and then the next.config.js
const path = require('path')
const webpackConfig = require('./webpack.config')
module.exports ={
webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
config.resolve = webpackConfig.resolve
return config
},
}
To learn more about custom webpack configs -> https://github.com/zeit/next.js/#customizing-webpack-config
I really love styled-system. At first I was super hesitant because I would be doing things similar to how you would use bootstrap, eg add classes like md-center blah blah
and it would be super confusing or overwhelming. But it's not! it's super cool and I love it. I mostly use system-components which essentially uses all the functions that styled-system gives, but you just use it as props.
An example:
<div style={{width: '100%', minHeight: '100vh', border: '1px solid black', background: 'white'}}>A div with styles</div>
<Box width={1} minHeight='100vh' border="1px solid black" bg="white">A box with style props</>
you can also pass in arrays to most of the props which will change the value based on the index to the corresponding breakpoint.
Here is a real example from something I am working on:
<Flex
position={['fixed', 'relative']}
width={['100%', '60px', '220px']}
top={['calc(100% - 60px)', '0']}
overflow="hidden"
style={{ flexShrink: 0 }}
flexDirection={['row', 'column']}
pt={[0, 3, 4]}
pr={[0, 3, 5]}
pl={[0, 3, 4]}
minHeight={['60px', '100%']}
maxHeight={['60px', '100%']}
justifyContent={['center', 'flex-start']}
bg="#1f1f1f"
zIndex={9999999}
>
stuff in here
</Flex>
and I'll often do this ->
const SomeUniqueSetOfProps = (props) => <Box bg="black" px={2} py={3} {...props} />
So rather than doing a new styled-component like I would before, I use either the Box or Flex primitive and then add the style props I want for it, and since I'm passing in props after them on the component, if I need to change it sometime in a one-off situation, it will override, eg:
<SomeUniqueSetOfProps px={4}>the horizontal padding will now be the 4th index instead of the 2nd<SomeUniqueSetOfProps>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.