Jump to content
Random9

Which must have js libraries for 2018?

Recommended Posts

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 by Random9

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
5 hours ago, rbrtsmith said:

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.

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'.

Share this post


Link to post
Share on other sites
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 by rbrtsmith

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
Share on other sites
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 by rbrtsmith

Share this post


Link to post
Share on other sites

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++.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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, ...?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By PinkHammer
      I'm not all that great with Javascript and I might just be having a dense but I can't work out how to run an object method from a jQuery event handler.
      var myObject = Object.create(Parser); myObject.init(); myObject.registerEvents(); $("#button").click( myObject.registerEvents ); What the function does is copy the html in a textarea into an iFrame.

      Alternatively finding a way to update the rendering in the iFrame of the changed textarea's HTML.
    • By jwbjnwolf
      Hi, I have a PHP array of all folders in a directory, and creating a list of divs from them all with a specified class.
      I have this jQuery script (CodePen link) that just simply requires me to specify the class of what elements I want to paginate, as well as have a place holder element for the pager below. That works fine. No other things needed.
      But as of right now, this is a very basic script where the pager numbers just keep adding up. What I want to add is the previous/next/first/last buttons as well as say a limit of 5 numbers shown.
      How can I add this to the script or is there any scripts with this already, that work just as simply like this, just dynamically paginating content of a specified class without doing anything more? All I can seem to find are scripts requiring bootstrap, databases, editing the html to differ each item or putting the dynamic content into the javascript file.
      Thanks, Jase
    • By 98sfsdf8
      Hi all,
      I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like:
      - to be able to have images of different heights and widths, not all the same size (as it is now).
      - vertically/horizontally centered.
      Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/
      Thanks!
      HTML:
      <div id="contentwrapper">       <div class="centreme">         <img src="https://picsum.photos/200/200?image=1" id="animation" />         <img class="hidden" src="https://picsum.photos/200/200?image=1" />         <img class="hidden" src="https://picsum.photos/200/200?image=2" />         <img class="hidden" src="https://picsum.photos/200/200?image=3" />         <img class="hidden" src="https://picsum.photos/200/200?image=4" />         <img class="hidden" src="https://picsum.photos/200/200?image=5" />         <div id="bottommark"></div>       </div>     </div> CSS:
      body,       html {         height: 7000px;         margin: 0;         background-color: grey;       }       .hidden {         position: absolute;         top: -9999999px       }       #bottommark {         position: absolute;         bottom: 0;       }       #contentwrapper {         width: 100%;         height: 100%;         position: fixed;       }       .centreme {         position: fixed;         width: 200px;         /* the image width */         height: 200px;         /* the image height */         top: 50%;         left: 50%;         margin-top: -100px;         /* half the image height */         margin-left: -100px;         /* half the image width */       } JS:
      $(document).ready(function() { var a = $(document).height(); var b = a - $("#bottommark").position().top; $(window).scroll(function() { var e = $(document).height(); var f = $(window).scrollTop(); var c = e - $("#bottommark").position().top - f; var d = b / 5; $("span").html(c); if (c > d * 4) { $("#animation").attr("src", "https://picsum.photos/200/200?image=1") } if ((c < d * 4) && (c > d * 3)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=2") } if ((c < d * 3) && (c > d * 2)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=3") } if (c < d * 2 && c > d * 1) { $("#animation").attr("src", "https://picsum.photos/200/200?image=4") } if (c < d) { $("#animation").attr("src", "https://picsum.photos/200/200?image=5") } }) });  
    • By lcot
      I am on the search for a jQuery or even vanillaJS-based plugin that can replicate similar functionality to that of the 'FIND WHAT MATTERS' section of this web HOMEPAGE . It is the 'team grid' section where there are rows of responsive images, and a dropdown container beneath each row that contains dymanic content dependent on which 'accordian item' or image was clicked on.
      You can see a screenshot here: https://monosnap.com/file/M8zQInDm6d3IQ84QOb49Y0JqSlA78F
      The grid is responsive, shrinking from 8 per row, to 3 per row on mobile and the dropdown expands beneath the row of the image, no matter the screen size.
      Does anyone know of any plugin that can achieve this functionality, or am I going to have to develop this by myself?
      Thanks!
    • By Mario89
      I created my first website. Please tell me, what can I change and improve?
      http://mario89.smarthost.pl/
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      59,326
    • Most Online
      4,970

    Newest Member
    veracubano
    Joined
  • Forum Statistics

    • Total Topics
      66,003
    • Total Posts
      454,536
×