lmcjt37 / curated-tv-and-film Goto Github PK
View Code? Open in Web Editor NEWA curated list of iconic TV and movie moments from modern filmography
Home Page: https://lmcjt37.github.io/curated-tv-and-film/
License: MIT License
A curated list of iconic TV and movie moments from modern filmography
Home Page: https://lmcjt37.github.io/curated-tv-and-film/
License: MIT License
Similar to #138 where we are trying to improve the layout of the header for mobile.
If we can show/hide the search by initially only showing a magnifying icon, then upon selection animating the input into visibility.
This is a simple example - https://codepen.io/CBeghin/pen/HeuiF
If you feel that the design could be improved as a whole then I would suggest one of the following instead - https://tympanus.net/Development/SearchUIEffects/index9.html (This was my favourite)
The tests use Jest.
Currently only the simplest App.js
test exists from boilerplate CRA.
Would be good to improve tests throughout.
A new sort filter has been added, but the content should probably start off alphabetised correctly anyway.
Maybe a script could be created to be added to a process. The script would use the same implementation as what is defined for the sorting method.
The Github icons for the footer links cause the alignment to be out.
The links could do with being made a little more obvious too.
There appears to be a lot of white space around the TV and Film sections.
Could do with either changing the placement of how information is shown or adding more information.
The search should be restricted to only the title.
Adding the description seemed like a good idea at the time but the search becomes too ambiguous. Also, would you know what is written in the descriptions you are looking for anyway as the content is uniquely added?
Year could be added to the search as a sub-task.
Following improvements from #20, it would make sense to add a section on how you can run tests if you want to also improve these during development.
Most of the current images show black letter boxing.
These should be replaced with better images for the respective show or film.
Add a section for displaying any contributors to this project
The videos should represent scenes from the film or tv show references.
They shouldn't be credits (unless easter eggs), movie trailers, tv show intros, fan videos.
Add the ability to filter the library by various criteria.
Some example criteria: tv/film, year, animated, action.
May require tag types to be added to the content.js
.
The filter selection should be swapped from a checkbox to radio buttons.
This will allow you to select one option at a time, and prevent there from being no content on the screen.
When movies filter is selected it should still show the year selection.
The images are slow to load on both mobile and desktop.
The images need resizing and compressing so that it will improve load times.
Latest updates to the inputs in the header has broken the year choice from showing.
ERROR: The key you are authenticating with has been marked as read only.
fatal: Could not read from remote repository.
Breakdown the project into components for easier visibility.
Starting areas:
Create a simple web page to view and filter the suggested titles
Change all image URLs to static assets so that we gain uniformity.
This will enable us to have more recognisable images from each of the entries to make it easier to find what you want.
The Readme is missing a 'getting started' section to help new users get up and running with the development of this project.
A simple logo which can be added to the header, repo and favicon.
When you click on the header title, the scroll to top just jumps there which is clunky.
An easing should be applied to smooth this out.
The header clearance isn't perfect for desktop or mobile.
Too much whitespace on desktop between header and first image.
Header overlaps first image on mobile.
Whilst implementing the pre-commit hooks using husky and lint-staged, I came across the link for imagemin-lint-staged https://github.com/okonet/lint-staged#minify-the-images-and-add-files-to-commit
This will help minimise the images hopefully, and could be added to the pre-commit maybe.
We need some linting to force everyone to use the same code styling.
Create PRs for any suggested Movie or TV scenes which are considered, in your opinion, a should watch.
Please refer to https://github.com/lmcjt37/curated-tv-and-film/blob/master/CONTRIBUTING.md for more information.
When you remove tv shows in the filters, a year input is revealed.
This doesn't work.
Would be my preference to remove the eslint + prettier plugin and implementation and swap for the pre-commit - https://prettier.io/docs/en/precommit.html#option-1-lint-staged-https-githubcom-okonet-lint-staged.
When implementing this, the pipeline step should be removed also, and the readme updated to reflect this change.
Improve workflow times by re-using the workspace through the various steps. Exampe config can be found in the following links:
persist_to_workspace - https://circleci.com/docs/2.0/configuration-reference/#persist_to_workspace
attach_workspace - https://circleci.com/docs/2.0/configuration-reference/#attach_workspace
On mobile the header overlaps the top content.
When you carry out a search, the results reflect the search as it you type.
When you delete characters the same should be true.
With the change made to make the images static assets, the references are incorrect when deployed and therefore not resolving to appear on the production page.
Previous PR's have added assets for use in the project.
These need implementing in the readme, header and favicon.
Add viewport to prevent scaling and zooming when viewing app on mobile.
From memory this is all that's needed and can simply be added to the index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The web app is currently very simple and could do with a facelift to make it more friendly.
Some suggestive tasks:
We currently have filters for tv and films.
Even more would be better.
Adding a footer to the bottom of the page to show some meta.
The information comes from IMDB and Youtube typically, so we should have an 'Acknowledgements' section in the readme.
We could also add a link in the page footer to this section.
Create PRs for any suggested TV show or series scenes which are considered, in your opinion, a should watch
Improve the look of the page with some sort of theming?
Add config for running Circle CI.
Steps required:
Header section takes up quite a lot of space when showing the title, search and filters.
Adding a dropdown for the filters would free up some space and you can show only when needed.
An additional feature of the app could be to list suggestive titles.
How this would work needs defining, as we filter the list as you type. But this feature could require you to commit a search to allow it to work.
Otherwise another solution would be to add suggestions in the content for each title.
Example: https://tastedive.com/
The curated TV and film web page on mobile device browser isn't properly handled
Create a separate sort button which functions the same way as the filter.
Use an icon such as https://fontawesome.com/icons/sort-alpha-down?style=solid
The implementation could be a duplication of the filter bar, or a DRY-er approach would be to re-use the filter bar component somehow.
It isn't obvious that you click the image to view the scene.
Maybe a separate link should be added to the cards, or a link on the title, or both.
If you reach a message 'No search result' this affects the content stored in state so that it's not searchable.
At this point, if you delete characters from your search. This isn't reflected in the search results.
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.