git-commit-show / landing-page Goto Github PK
View Code? Open in Web Editor NEWThe new landing page UI.
Home Page: https://gitcommit.show
The new landing page UI.
Home Page: https://gitcommit.show
Fixing position and managing size and responsiveness of all the mountains in the webpage at every devices. Device width minimum could be 350px to maximum laptop screen width to 1800px.
Take reference from figma.
Figma
I've also uploaded full mountain picture with name main-mountain.png in img folder just in case if anyone wants to delete those two separate mountains and add image of one full mountain.
Key items that needs to be updated
Join Live Now
to Join Live on __event-date__
Here's a guide by google to add structured data of type event.
This can help the event appear in relevant cards by google and other search engine to understand the page in a better way.
Here's a guide on what needs to be included : https://developers.google.com/search/docs/data-types/event
When we hover any button, the color should become dark not light.
And, animation should be like 16th button in this link.
Buttons link
Issues related to carousel are mentioned below:-
Add a subtle animation for all buttons.
The animation should be a color change as implemented here
Note: we should not change any button style, only the animation needs to be added. (Same shadows as before)
Carousel needs to be tested for padding and alignment on all screen. It has inconsistencies in padding
The red bar on top of the text, above the countdown should be aligned left.
Check the figma design
Currently list of talks on landing home page is huge. Can we make it more digestible by adding some filters.
How? Add some badges with following filters (on clicking them, the user should see only the talks related to that filter)
On mobile, footer is adding a lots of scroll. Let's simplify that by removing complete "Git Commit Show 2019" block (keep it on for desktop screen though)
http://gitcommit.show is coming as a link but gitcommit.show is appearing as a normal text.
Take reference from FIGMA:
[Official design] (https://www.figma.com/proto/Pcgl4BjxXUY9oveLTPmpVS/Git-Commit-Show?node-id=1%3A2&viewport=369%2C-177%2C0.6467553377151489&scaling=min-zoom)
After expanding screen width from certain pixels, the positioning and sizes of mountains and it's elements changed.
Need resizing of mountains and elements according to the size of the screen so that everything matches and will be at right place.
As from our official design:
Official Figma Design
The text and countdown timer should look like this:
But It is like this now:
Need some resizing and positioning. Also check for this at every screen size and make it responsive.
As per designs, timezone should be mentioned right below the schedule heading
As per designs carousel videos should have title and description below each video
Earlier the domain had 301 redirect to blog post which had alll the details about event. As we moved to this new website and pointed the domain to GitHub servers where it's hosted, now users who had visited the old website do not get to see this new website rather when they hit the domain gitcommit.show they are redirected to old website (blog).
This happens because browsers usually cache the 301 url redirection info (for an year or indefinitely). So even if the domain is pointed to new ip, users keep redirecting to the old redirected url.
Change title from "about git commit show" to "git commit show"
While clicking on the Masterclass poster the embedded video is not playing automatically in chrome browser in laptop and in any browser in mobile devices. It's working in Mozilla Firefox though.
Here are the two methods of JS which I've tried:
Rough code pen
Rough code pen 2
Here are some of the references you can use to learn:
Here are some solutions I found why It's not happening:
Stackoverflow
Stack overflow
Stack overflow
Move "Apply to appear on the show" button to its original postion as in Figma design
Scroll all the way to bottom and then scroll right. On phone, it is reproducible.
Description
We should add a license to this repository. This way, people will know what and what not they can do with this repository, permissions, notices, etc.. I suggest adding the MIT license.
Additional Context
Spacing or gap between the heading GIT COMMIT SHOW 2020 and its content is too much. It needs to be matched with the Figma design
Test social share preview, how does it look when shared on twitter, reddit, linkedin, whatsapp etc. On gitcommit.show
On schedule page, detect user timezone and change the time to their timezone.
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.