Hello,

hi Guys. I just want to know which must have js libraries do i need to get for a modern website.
I thought about a parallax lib to make my site more lively, but i couldnt find a good one.

 

So..., just link your choices for a modern js libs down below 👍😉

Edited November 8, 20187 yr by Random9

None at all.

The less JS you use the better. Parallax in particular is yuk

57 minutes ago, Random9 said:

I just want to know which must have js libraries do i need to get for a modern website.

Um, not really sure, what are you trying to achieve? Modern != Library Used. @rbrtsmith would be better to answer what the current methods are for JavaScript development.

2 hours ago, fisicx said:

None at all.

The less JS you use the better. Parallax in particular is yuk

So i think that a CMS would be a nightmare in your eyes. Do you mean that i should code my own parallax functions?

12 hours ago, fisicx said:

None at all.

The less JS you use the better. Parallax in particular is yuk

Absolute nonsense on the first point.
Most of the web is now built with JavaScript and the big players on the web- Facebook, Instagram, Google etc all make very heavy use of the language because it is necessary.  Say you have a website that lists some properties for sale.  Do you really want to have to reload the page when somebody wants to filter that page?  You need JavaScript to avoid that.  When they search you can filter the results as they type etc.

The most popular library used these days is React, I use it on every project I work on.  There is a reason it is used on almost if not all the websites done at BBC, Sky with close to 750,000 weekly downloads from NPM https://www.npmjs.com/package/react.  It's very good but it's a framework that allows you to build large-scale front-end applications in a clean way that is much easier to write automated tests against than native DOM.

It does however require a good understanding of JavaScript, it's not something like jQuery where you can copy and paste in plugins from Stack Overflow.

Parallax I'm generally not a huge fan of, but it can be done in a good way when applied in the right place etc.

Does someone know how the tablet is animated on this site:

 

https://www.inovanet.de

 

...usually it should be scrollmagic but there are there is only vertical pinning as far as i know 🤔

21 hours ago, NOCK said:

For web applications I totally hear you. For normal websites, I'm still in the camp that you should be writing server side code and enhancing with JS. I actually do spend some days browsing without JS, and other people do too. The number of simple brochure websites that don't work without JS enabled is truly staggering, especially when many of them could have been written the traditional way.

For me, it comes down to using the 'right tool for the job'.

JS is widely used on the server side too.  There's no reason why a properly written React website won't work without JS turned on as you can do server side rendering.  Read up on universal or isomporphic JavaScript.  Those that do have JS turned on will have an improved experience as you can push data to the UI without the page being refreshed etc. 

Gatsby is a popular React based platform for building brochure style websites in this manner.   A well architected Gatsby site will outperform the equivalent website built with more traditional tools.

I actually wouldn't use PHP for anything personally now.  Having JS on both sides has big benefits like sharing the same modules both for the client and server i.e. form validation.  You also avoid context switching and JS is really fast when it comes to high traffic.  Some jobs it is not great at such as heavy number crunching... but neither is PHP.  I'd look to something like Go or Elixir for that kind of specific job (Microservice architecture where you use a number of technologies each for specific jobs) . This would be over-engineering for a small brochure site.  So in that case I'd just go with JS.

PHP is still a good language / tool and if it's one you feel comfortable with then go with it, but don't be under the illusion that JS is only used to make small enhancements to the client; it isn't.  It's by far the most widely used language in modern web architecture now.

Edited November 10, 20187 yr by rbrtsmith

9 minutes ago, rbrtsmith said:

JS is widely used on the server side too.  There's no reason why a properly written React website won't work without JS turned on as you can do server side rendering.  Read up on universal or isomporphic JavaScript.  Those that do have JS turned on will have an improved experience as you can push data to the UI without the page being refreshed etc. 

Gatsby is a popular React based platform for building brochure style websites in this manner.   A well architected Gatsby site will outperform the equivalent website built with more traditional tools.

Do you know a solution for my last question?

13 minutes ago, Random9 said:

Do you know a solution for my last question?

It could be built with that or any number of plugins, it could have been written from scratch - that's how I'd build something like that

I built this website about 3 years ago https://wasabiweb.se/sv/ and the animations were mostly done by hand IIRC.   If you took some time to learn JS and the DOM it wouldn't be so difficult to build something like this.  You essentially want a function that executes on a scroll event that measures the viewport position relative to a hook and use that value to position the node that wraps the tablet.

I like the navbar, how did you done that?

 

p.s. I am more the copy paste king

Edited November 10, 20187 yr by Random9

13 hours ago, Random9 said:

p.s. I am more the copy paste king

Welcome to the club! The coding behind the scenes on my sites looks like a modified car out of Mad Max.

On 11/10/2018 at 12:28 PM, Random9 said:

I like the navbar, how did you done that?

 

p.s. I am more the copy paste king

What aspect of the navbar do you like?

I encourage you to dedicate some time to learning JavaScript and CSS in more depth, it will allow you to be far more creative, ship websites that have much better performance, lower bug density etc

I like that your nav bar is animated from bigger to more compact. 

Do you use a CMS?

Edited November 12, 20187 yr by Random9

16 minutes ago, Random9 said:

I like that your nav bar is animated from bigger to more compact. 

Do you use a CMS?

Yeah so that is just like the function for parallax you render some CSS properties based on the scroll position of the page so in this case the opacity and height gets transformed.  It was fairly straightforward so there was no need for a library.

For this website CMS was used and it's called Craft although this has no influence on the UI and a true CMS shouldn't, it should manage content/data and nothing else.  I know WordPress does more but I don't think that is a good thing.

In the work I do some of our content comes from a CMS, a lot of it is dynamic and comes from various real-time services so say you was doing a football website you'd want to CMS some blurb about different teams, but for results and tables etc you'd get that data from a service such as Opta as you would not want to manually keep updating that 24/7.  Most modern web applications use a combination - but managed content would just come back as data usually JSON and is not embedded into the markup like Wordpress does.

Edited November 12, 20187 yr by rbrtsmith

I just started building a website using a wordpress raspi server but elementor and inserting the plugins was to boring.
I more like backend developing where you understand what you do. Now i code everthing in atom/notepad++.

39 minutes ago, Random9 said:

I just started building a website using a wordpress raspi server but elementor and inserting the plugins was to boring.
I more like backend developing where you understand what you do. Now i code everthing in atom/notepad++.

If you enjoy this stuff then I encourage you to take some Node JS courses to learn more about it's ecosystem etc.  https://frontendmasters.com/ is a great resource to learn more about all this.  Don't be fooled but the name frontend masters, there's plenty of NodeJS material on here.  It's not free but the best stuff rarely is.

On 11/12/2018 at 3:43 PM, rbrtsmith said:

If you enjoy this stuff then I encourage you to take some Node JS courses to learn more about it's ecosystem etc.  https://frontendmasters.com/ is a great resource to learn more about all this.  Don't be fooled but the name frontend masters, there's plenty of NodeJS material on here.  It's not free but the best stuff rarely is.

Which js libriaries or own js effects do you use to make a website more lively for example parallax, ...?

11 hours ago, Random9 said:

Which js libriaries or own js effects do you use to make a website more lively for example parallax, ...?

Honestly I feel like I have already answered this... I just write code to do what I want, as I explained above all parallax involves is transitioning the X or Y position of content based on the scroll position, it's not a trick or hack.  If you learn JavaScript and the DOM then you won't need to go searching for scripts you'll just be able to write what you want.  It's not some effect or hack if that's what you're implying.

You should also be only adding things to enhance the user experience.  So many websites try to be clever with animations and they just end up distracting and/or annoying the user.

There are some decent animation libraries such as https://greensock.com/gsap but it's not copy+paste, you have to know JavaScript to leverage this library.