A fun site that shows random memes from Reddit.
The site is live at https://mcecode.github.io/meme-party/.
This was supposed to be a short local project, but after a while, I decided that it would be a good avenue to try to use and learn Git, webpack, GitHub, and SCSS, among other technologies. As such, I now plan to update/refactor the code and add features whenever I can (see Todo section below).
You're going to need node and npm for this project, to check if you have them just type node -v
and/or npm -v
in your command line, if you see it respond with a version (e.g. v12.18.0
) then you should be good to go.
If you don't have them yet, npm comes with node, so you can just download node at nodejs.org or use something like nvm or nvm-windows, depending on your system.
Once you have that, fork, download, or clone this repo and choose what you want to do with it.
Just run the following commands in the project directory:
# install dependencies
$ npm install
# to build for development
$ npm run build:dev
# to build for production
$ npm run build:prod
then, you can just open ./build-dev/index.html or ./build-prod/index.html in your browser.
It's often useful to have a dev server in development, so I set this project up with webpack-dev-server. If you want to use HTTPS or set a custom port, you'll have to create a .env file in the project's root directory to load up the HTTPS dev certs and/or your other preferences.
If you want to specify a custom port, just put the following in your .env file:
PORT=your port number preference
To use your own local dev cert, just add:
SSL_KEY=/path/to/your.key
SSL_CRT=/path/to/your.crt
SSL_PEM=/path/to/your.pem
If you don't have one, you can create a cert using mkcert.
If you don't want to generate a cert yourself but would still like to use HTTPS then just put:
SSL=true
and webpack-dev-server will generate one for you, though that might cause some problems because the generated certificate is a self-signed one.
Finally, if you don't want to mess with all of that, you don't have to, the dev server will just default to HTTP and port 5000.
Once you finish tinkering with that, just run the following commands:
# install dependencies
$ npm install
# run dev server
$ npm start
it'll tell you where your local server is running so you can open it in your browser.
I also enabled Hot Module Replacement (HMR) so you can use that too. If you don't have a clue what that is, as I did, please refer to the official guide.
If you like my webpack settings and would just like to reuse them for your own project, you can do that too.
For your reference, here are some pertinent defaults that I set in the configs which are not mentioned above:
- main entry point is ./src/main.js
- template for emitted index.html is ./src/ejs-template/index.ejs
- title tag text content are set in html-webpack-plugin options
- only SCSS files can be used for styling
- file-loader is only set to process and emit PNG, JPG, WOFF, and WOFF2 files
Other details can be seen by looking at the configs themselves at ./webpack.config.js or by running the following commands:
# view configs during production builds
$ npm run log:prod
# view configs during development builds
$ npm run log:dev
# view configs when running dev server
$ npm run log:serve
Of course, you can extend, modify, and build on top of the configs I set here if you want to.
A tentative list of things I'd like to implement to better the project (though I'm not quite sure how to do some of them).
- UI/UX
- fix stiff scrolling and layout problems seen in iPhone Safari version <=12
- General
- add and maintain docs style / guiding / delimiting comments in source code and configs
- use a formatter and/or linter
- JS
- break up ./src/main.js into modules
- use a class-based, event-driven approach
- create HTML components with js instead of with ejs
- use css-modules with css-loader to assign classes to HTMLElements
- SCSS
- break up ./src/main.scss into modules
- reduce media query use
- webpack
- follow the DRY principle in configs
- Performance
- for browsers that need them, dynamically insert and load web API polyfills from polyfill-library
- create two JS bundles:
- untranspiled/unpolyfilled, to be loaded by newer browsers
- transpiled/polyfilled, to be loaded by older browsers
- UI/UX
- make
Main.hideButton
andMain.moreButton
circular with larger horizontal writing - use simplebar for scrollbar styling
- make it look more consistent across browsers and devices
- create a ./src/scss-global/_reset.scss file
- make bigger screen experience more similar with standard screen experience
- make landing page feel less cramped in smaller devices
- Put guiding messages wherever appropriate
- make
- Pages
- use client-side routing for per page URLs and history navigation
- create a custom 404 page
- add SEO meta tags and repo image
- add credits and GitHub link
- Accessibility
- make keyboard-only navigation experience better
- put the focus on the right HTMLElements at the right time
- transfer focus to next meme loaded instead of keeping it on
Main.moreButton
- make keyboard-only navigation experience better
- Functionality
- allow users to choose the subreddit where memes come from
- allow users to choose how many memes to load at a time
- add NSFW and spoiler indications to memes
- SCSS
- use CSS grid and/or flexbox for layout
- use autoprefixer autoplacement for CSS grid polyfill
- create two CSS files:
- unpolyfilled/unprefixed, to be loaded by newer browsers
- polyfilled/unprefixed, to be loaded by older browsers
- JS
- use @babel/plugin-proposal-class-properties to allow:
- making internal methods and properties private with
#
- creating a getter for private properties
- creating public methods using the class fields' syntax,
method = () => {}
, to bindthis
- making internal methods and properties private with
- use @babel/plugin-proposal-class-properties to allow:
- The code in this project is licensed under the terms of the MIT license (see LICENSE file).
- npm packages used are under their own licenses.
- Memes from Reddit are provided by the awesome Meme API.
Fonts were downloaded from Google Fonts using google-webfonts-helper.
- Zilla Slab Highlight is licensed under SIL Open Font License (OFL).
Images were processed using Meme-Creator and TinyJPG.
- sad-pepe.png is licensed under personal use.
- doge.png is licensed under personal use.
- green-mnm.png is licensed under Creative Commons (Attribution 3.0 Unported).
- Other images taken from the internet are used and edited under Fair use.
That's it! Thanks for reading. Feel free to fork or reach out with an issue or a pull request, though I am still learning how those work.