• Client-Side: \ The form of our product is a web app because we would also provide a dashboard for displaying data and for some further purpose including data filtering and comparison. Hence, we would definitely use HTML5 for structuring the web, CSS3 for styling the web, and JavaScript for building the front-end logic. As for frameworks, we would use React because it is component-based that can keep our front-end code clean and organized. The virtual DOM of React also provides better efficiency in time when rendering the page. Furthermore, React has a greater number of users than Vue and Angular, thus have active communities for problem-spotting and problem-solving. We would also incorporate Bootstrap into our web app to provide an aesthetic user interface and thus to improve the user experience. The fact that Boostrap supports responsive site would also ease our workload if future adaptation for mobiles is needed.

Frontend:

• For our web app frontend, we decided to use TypeScript as our programming language because it supports all functionality of JavaScript and supports optional typing to the language, which can help us take advantage of OOP.
• We chose ReactJS as our frontend library because its state management would be very handy for our single-page app. React is also component-based, which can help us improve the modularity and extensibility of the project.
• Aside from the standard web technology HTML/CSS, we will useBootstrap to style UI components and make our web app responsive to different screen sizes.

We have a lot of experience in JavaScript, writing our services in NodeJS allows developers to transition to the back end without any friction, without having to learn a new language. There is also the option to write services in TypeScript, which adds an expressive type layer. The semi-shared ecosystem between front and back end is nice as well, though specifically NodeJS libraries sometimes suffer in quality, compared to other major languages.

As for why we didn't pick the other languages, most of it comes down to "personal preference" and historically grown code bases, but let's do some post-hoc deduction:

Go is a practical choice, reasonably easy to learn, but until we find performance issues with our NodeJS stack, there is simply no reason to switch. The benefits of using NodeJS so far outweigh those of picking Go. This might change in the future.

PHP is a language we're still using in big parts of our system, and are still sometimes writing new code in. Modern PHP has fixed some of its issues, and probably has the fastest development cycle time, but it suffers around modelling complex asynchronous tasks, and (on a personal note) lack of support for writing in a functional style.

We don't use Python, Elixir or Ruby, mostly because of personal preference and for historic reasons.

Rust, though I personally love and use it in my projects, would require us to specifically hire for that, as the learning curve is quite steep. Its web ecosystem is OK by now (see https://www.arewewebyet.org/), but in my opinion, it is still no where near that of the other web languages. In other words, we are not willing to pay the price for playing this innovation card.

Haskell, as with Rust, I personally adore, but is simply too esoteric for us. There are problem domains where it shines, ours is not one of them.

A major part of our project includes visualizing the data through graphs and charts. We chose to use d3.js since it provides a wide selection of well-designed graphics and animations. As a library, it is also easy to use and be included in our UI. JavaScript which our team has experience with was also selected to integrate graphics from d3.js into the UI, as well as to integrate the UI with the backend system. Along with JavaScript, HTML5 and CSS 3 are also selected mostly for styling and formatting the webpage. These three languages are widely used which means that more support will be available, making the implementation process easier.

The key to our product relies on explainability and user experience when using our product. With this is mind, it is important to build a clean, readable web interface that a user will be able to navigate easily and quickly debug their security issues. The stack chosen for the interface of our product includes: JavaScript + React, CSS, HTML, Material UI and D3.js.

React provides us with simplicity to allow us to deliver the MVP as soon as possible. React also has multiple open source libraries to ease our development. Being able to reuse React components will help in developing the product fast as well as making the user interface modular. Since we're using React, we will also be using JavaScript, HTML, and CSS to create the frontend.

To design the UI, using a minimal approach would be the best solution. The Material UI library provides us with minimal and aesthetically pleasing React Components which would make our frontend look pleasing to the user.

Finally, our UI will consist of displaying information from our Machine Learning model in a dashboard type view. To display data in tasteful manner, we have chosen to use the D3.js library. This library is the most popular data visualization library for React with over 80k stars on Github. D3 also provides seamless compatibility with React and has a variety of features which would make the data we produce visually pleasing.

As our team will be building a web application, HTML5 and CSS3 are one of the standardized combinations to implement the structure and the styling of a webpage. Material-UI comes with all sorts of predesigned web components such as buttons and dropdowns that will save us tons of development time. Since it is a component library designed for React, it suits our needs. However, we do acknowledge that predesigned components may sometimes cause pains especially when it comes to custom styling. To make our life even easier, we also adopted Tailwind CSS. It is a CSS framework providing low-level utility classes that will act as building blocks when we create custom designs.

Am I the only one to think that libraries like Bootstrap, Vuetify, Materialize, Foundation are too much sometimes ?

Most of the time you are loading all the library and using 10% of it. And on that 10% you are modifying 90% of it.

I feel like using grid and pure CSS / JS are enough and cleaner.

Things were very hard, before 2012 but when internet came to so many people it opens a lot ways. And now people could learn coding easily from their houses. So guys if you are a newbie who wants to learn coding with your phone then you should download these apps. Sololearn Curiosity codehub Encode

7 Awesome CSS3 Techniques You Should give a Try

1. Vertically Align With Flexbox Earlier developers used to face a lot of difficulties aligning a text or any other element vertically center. But now, after the introduction of the new CSS3 specification Flexbox, things have become much easier.

2. Responsive CSS Grid Do not make your grid an exception make it responsive too, like everything else in your design.

There are so many ways through which you can make your grid responsive with CSS Grid. And the best part of using it is, you will be able to create a more flexible grid that gives you the desired look, no matter what the device size is.

1. Text Animations You might have created background animations with CSS, but now it also influences how users interact and engage with the text elements of a website. From hover adjustments to making words float in the air, CCS3 has made it all possible.

2. Columns layout Usually, column-based layouts are created by using Javascript, which is quite complicated and time-consuming. But CSS has brought a way around to ease up the task of developers and web designers.

3. Screen Orientation Many people think that screen orientation and device orientation both work for the same purpose. But that’s not the case. The orientation of the screen is a bit different from the device.

Even if a device is not capable of detecting its orientation, a screen always can. And if the device is capable also, then it’s good to have control over the screen orientation so that you can maintain or change the interface of your website.

1. Comma Separated Lists There is no doubt that Bullet lists are very commonly used in writing to convey any information more precisely and clearly. But one thing that most people struggle with is to add commas on every point of the lists.

2. Animated Checkbox Well, most of the people are very much aware of the CSS background and text animations. But, not many know about checkbox animations.

Yes, apart from background and texts, you can also make your checkbox section look visually appealing. Isn’t it great?

This post is a bit of an obvious one, as we have a web application, we obviously need to have HTML and CSS in our stack. Though specifically though, we can talk a bit about backward compatibility and the specific approaches we want to enforce in our codebase.

HTML : Not much explanation here, you have to interact with HTML for a web app. We will stick to the latest standard: HTML 5.

CSS: Again if we want to style any of our components within he web, we have to use to style it. Though we will be taking advantage of JSS in our code base and try to minimize the # of CSS stylesheets and include all our styling within the components themselves. This leaves the codebase much cleaner and makes it easier to find styles!

Babel: We understand that not every browser is able to support the cool new features of the latest node/JS features (such as redue, filter, etc) seen in ES6. We will make sure to have the correct Babel configuration o make our application backward compatible.

Material UI (MUI): We need to make our user interface as intuitive and pretty as possible within his MVP, and the UI framework used by Google will provide us with exactly that. MUI provides pretty much all the UI components you would need and allows heavy customization as well. Its vast # of demos will allow us to add components quickly and not get too hung up on making UI components.

We will be using the latest version of create-react-app which bundles most of the above along many necessary frameworks (e.g. Jest for testing) to get started quickly.