New website: home about serenata-website

[cuducos]

That's awesome ; )

Suggestion: we could have a next branch in which we could collaborate in the coding of this new version. What do you think?

[jtemporal]

can you create the branch? I don't know the best way to do it :)

Also through github's interface you can do it just typing the name of the new branch in the box:

If you click on create should also work 😉

[thulioph]

I think that we can discuss some topics, before start coding, they are:

Components and Structure

• If someone has metrics about the Google Analytics, please share with us. It's great that we know details about which browsers and screens our users have using.
• If we think of components, it will be easy to reuse our code. Seeing fast, I saw some parts like:
  • The header and footer have the same height and background-color, just changing the information.
  • The box of each post on Medium.
  • The cards under the call to action banner.
• We can explore some little interactions, to a great experience like the last posts on Medium with a different hover, or the current goal percentage filling animated, etc..

Libraries

• Most of the bootstrap code is related to the grid system, we can remove them and rewrite the grid to Flexbox with/or Grid Layout.
• We don't need to use jQuery to toggle or make an ajax call, just with vanilla javascript, we do that.

Questions

• Have we a responsive version of the website?
• The other pages, will continue with the same layout?
• Instead of the related projects like (Jarbas and Rosie) are displayed on the bottom, why we don't put then above the blog posts?
• The inforgraphic image on the current layout, has a lot of useful information to the user, why we remove it now? What do you think about using this graphic with updated information? Maybe an API call to update the data, I don't know..
• We have a new link to Projects page, what we want to display here?
• The Histories menu, was changed to Leitura?
• I don't see the Explore page on the new layout, it was removed?

It's my initial contribution, some ideas and doubts, and a lot of motivation to do a good work. I running the project on my machine and works fine.

Thanks!

Cc: @anaschwendler and @cuducos.

[anaschwendler]

Here it is: https://github.com/datasciencebr/serenata-website/tree/next
So the idea is to work on that branch, am I right? @cuducos @jtemporal @guidiego

[thulioph]

Anyone already started? I have interesting to contribute, if I can help. _o/

[thulioph]

Sorry, but I decided to start the implementation of homepage grid in different positions 😋.

You can follow the results below:

Pen

• https://s.codepen.io/thulioph/debug/EbXKeJ/jVMpogLQXvnk

Screenshots

• Smarthones (375x667)

• Tablets (768x1024)

• Desktops (1280x800)

• Large desktops (1920x1080)

This version hasn't fidelity yet and is just to display an idea. If I'm wrong, please let me know.

[cuducos]

Anyone already started? I have interesting to contribute, if I can help.

AFAIK no one has got started yet but we'd be honered to have you as guest : )

If you have draft anything yet just open a PR to next branch and we can code review and discuss the implementation. Also feel free to discuss your idea in a dedicated isse, just open one telling what you're willing to do ; )

[anaschwendler]

Hi @thulioph no one has started AFAIK too.

I'll give some infos about the website as it is right now:

• We use Jekyll (ruby gem for static websites) to run the project
• For css, we use something like functional css because it is easier to change things along the way (it permitted us to build the website pretty quick in the other time)
• For the pages inside, we use the Jekyll structure as it is.

If someone have doubts about running, changing something, I can explain better in a video call :)

[cuducos]

If someone has metrics about the Google Analytics, please share with us. It's great that we know details about which browsers and screens our users have using.

Last week (considering the Fantástico effect_)

Last month (5/Oct-4/Nov) (discarding the Fantástico effect_)

If we think of components, it will be easy to reuse our code.

Yep! Combining that with @anaschwendler's suggestion of keep the website with Jekyll, we can easily achieve that with Jekyll's layout or even old-schools includes.

Most of the bootstrap code is related to the grid system, we can remove them and rewrite the grid to Flexbox with/or Grid Layout.

Sure thing! Love that.

We don't need to use jQuery to toggle or make an ajax call, just with vanilla javascript, we do that.

Sute thing! Love that too.

About the questions you've made I'm tagging @tatianasb — maybe she has something to add.

[anaschwendler]

Most of the bootstrap code is related to the grid system, we can remove them and rewrite the grid to Flexbox with/or Grid Layout.

I really appreciate that! We can totally use flexbox

We don't need to use jQuery to toggle or make an ajax call, just with vanilla javascript, we do that.

I don't know whow it works, but for it is ok :)

And still about the questions, I think that the best person to answer them is @tatianasb too

[cuducos]

I really appreciate that! We can totally use flexbox

Specially considering the boom of mobile users, I would rank CSS native grid layout higher — it gives us more flexibility to in terms of responsiveness.

[tatianasb]

Have we a responsive version of the website?

Not yet but sure will.

The other pages, will continue with the same layout?

I will post them soon (next week at least 2 more pages) and yes, they'll have a similar layout but not all of them.

Instead of the related projects like (Jarbas and Rosie) are displayed on the bottom, why we don't put then above the blog posts?

'Cause they have a place on top already (Projects).

The inforgraphic image on the current layout, has a lot of useful information to the user, why we remove it now? What do you think about using this graphic with updated information? Maybe an API call to update the data, I don't know..

Infographics will have another place specially for them. But I'm open to suggestions.

We have a new link to Projects page, what we want to display here?

JARBAS & ROSIE will be there on a sub-menu.

The Histories menu, was changed to Leitura?

Yes. But the layout as it is now won't exist anymore, there's a new one on it's way.

I don't see the Explore page on the new layout, it was removed?

Temporarily.

Hope I cleared a few things out.
Thank you very much for you help and contribution.
Russa.

[anaschwendler]

thanks @tatianasb !

@thulioph if there is still doubts we can make a meeting to explain better :)

Thanks!

[thulioph]

Ok @cuducos, I'll start a new branch and move the discussion to the PR.

[anaschwendler]

Hi @cuducos me, @jtemporal and @guidiego were talking about it.

Its a great idea, we could also tag the release, can you create the branch? I don't know the best way to do it :)

[jtemporal]

my two cents on the matter:

Today the site is published under the gh-pages branch. IMHO we show fork the master in two branches:

• one called old (if we'd like to keep the old site code intact safe somewhere in case we need it easily for whatever reason)
• the second called new or next as @cuducos suggested so that we can work on the new version without screwing up the master.

If we don't see the point on keeping an "old" version considering this is git and everything is on revert away. We can easily keep the old on on air since it is served from the gh-pages just please be careful not to use jgd 😉

thumbs up for the second branch next ;P

[cuducos]

If we don't see the point on keeping an "old" version considering this is git and everything is on revert away.

It worth it to keep master with the current source files specially in case we want to update something (a typo?) in the current website.

can you create the branch? I don't know the best way to do it :)

Create the branch locally (git checkout -b next) and then push it to GitHub (git push origin next) should work I guess…

[anaschwendler]

It worth it to keep master with the current source files specially in case we want to update something (a typo?) in the current website.

I agree with that point, nice @cuducos !

I'll try to create the branch later, and then start the things with @guidiego, that voluteered to the task :)

[anaschwendler]

Now we have the fonts and sizes: https://drive.google.com/file/d/0B8bAgfLq2cp7X25fcEthX2FybWM/view?usp=sharing

I think that we are alright now!

[thulioph]

Thanks, @cuducos for the information about analytics.

Analytics

• This information will help us, to decide which technologies we are enabled to work with.
• The project needs to be supported by the most used browsers like Chrome, Firefox and Safari.
• If we considering the Fantástico effect, we have a lot of access provided by mobile devices, alerting us that the responsive design is accessibility too.

I think that we can start work on something that not depends on the entire layout pages, like the Grid. If It's ok, while the other pages aren't finished, I can work to propose a fluid grid structure that works on the most of the resolutions (smartphones, tablets, and desktops). Normally, I use the Codepen to share the progress.

What do you think? @anaschwendler @tatianasb.

Thanks!

[cuducos]

Many thanks, @thulioph : ) That's awesome!

Regarding the progress, I'd rather have a Git branch and PRs to that branch to review and feedback than a Codepen link: I like to review not the code or the end result itself but the architecture, that is to say, how we write maintainable CSS (including SASS or LESS or whatever) and not only how we write CSS that works.

That said surely links for early drafts, tests and mote atomic stuff can be put on Codepen for review and feedback.

BTW I couldn't access the link you posted in the last comment:

[cuducos]

Closed by inactivity.