DEV Community: Neel

Let's Slime the Web

Neel — Tue, 14 Dec 2021 03:43:18 +0000

The capabilities of what a web component can do aesthetically and functionally can be boundless. As an expression of what one can do, a group project team of ours has decided to create a web component that involves a variety of user inputs and visual outputs.

What It Does

The user is prompted a question to sort four statements in chronological order. The user will use up/down arrows to sort the statements in order, and then the question will tell the user what they got right and/or wrong. The user is provided a submit button and a reset button.

If they get at least one statement wrong, an error sound will play along with flaming visuals. If they get all statements correct, a cheer sound will play along with confetti visuals.

How It's Done

The first thing that the group did was design the interface and card layout of the sorting question on a piece of scratch paper. This helps to guide the design process. Based on some questions we posed ourselves in terms of the component's features, we laid out the expected elements, their states, and the properties of the component.

One sticking point was how we should implement dragging the sorting element, as opposed to just using the arrows. We did end up consulting Stack Overflow, which told us that the "draggable" attribute can be used, but based on our current iteration, that has not been implemented.

You can find the sorting question component in its current iteration here: https://github.com/Viable-Slime/slime-the-web

Bringing Classical Music to Streaming...

Neel — Mon, 08 Nov 2021 00:10:10 +0000

If I could build a tech service of any kind, it would be something that would be rather complex and long-term. This is the first thing that came to mind, given my passion for music and how the music industry handles artists.

The app I would build would be a music streaming app specifically for classical music. What would distinguish it from streaming apps like Spotify and Apple Music is that it's metadata system would be built with classical in mind, as this genre requires different parameters for searching and cataloguing than popular music. Such parameters include piece, movement, composer, ensemble, conductor, album, etc. Because the major streaming services' metadata systems are tailored towards popular music (who's metadata only requires artist, album, song), a platform that fixes it is needed.

The plan is for iOS and Android to have their own apps while desktop users will resort to a web-app. This is to ensure that the only requirements for desktop users is to have an up-to-date browser and not have to worry about device compatibility.

For Who?

This app could be used by anyone looking to be a subscriber, who would get access to the entire catalogue of albums and playlists. However, the primary appeal would be towards those classical aficionados who want their own space to experience music. Also, record labels and artists can take advantage of this platform as an alternative revenue stream as opposed to relying on just concerts and record sales. Especially during the COVID lockdowns where we saw venues and record stores take a hit, streaming became the dominant way that people consumed music. For the classical music industry to not take advantage of that and give its listeners an option was a problem.

How would it be used?

When a user logs in, the UI will be so that a play-bar will constantly show at the bottom, which will contain volume controls, track seeking, current track being played, and controls for rewind and skip. The rest of the page displays a menu bar on the left hand side for links to search, browse, view library, etc, and the main contents displayed on the page.

From a user's perspective it can be used to play music on-demand either in the foreground or the background while your phone or desktop computer is off. Because it will be subscriber only, there is no need for in-app advertising between tracks or banner ads anywhere on the app.

Motivations

What drives me to be in the IT industry is the growing focus around using free and open-source software. What initially drew me into the open-source "movement" was my curiosity with the Linux community that started 4 years back (I say community as the only thing in a Linux "operating system" named Linux is the kernel, as everything else is developed by other projects). Their emphasis on open-source not just being a form of licensing but a philosophy of software freedom was so compelling to me. If I were to dedicate my life to something, it would be contributing to and developing open-source tools for tasks that are otherwise being used by proprietary counterparts. This would also be the case if money were not an issue as developing open-source tools means people don't have to pay to use or distribute said software, and most open-source projects like GNOME or KDE need sponsors and donations to run.

An open-source app that would power the above example streaming service would hope to serve as another example of a non-proprietary service being able to compete with proprietary service in the same industry.

How slots are used with JavaScript

Neel — Wed, 27 Oct 2021 05:31:49 +0000

The <slot> element from HTML is an essential part of developing web components. According to MDN Web Docs, it acts as "a placeholder inside a web component that you can fill with your own markup." Essentially it allows you to pass in HTML content into the shadowroot.

How is it used?

One way to use slots is through a web component as a card, which will contain a header and body. It is in the body section where support for any and/or all HTML content will have to account for when designing.

Usage

The way a slot can be implemented is by using a generic <span> container in your HTML file. This can be blank to be content agnostic, or if named the slot attribute will have to be passed in, such as <span slot="slime-slot">.

An example of how slots can be rendered from a JavaScript file is a follows:

render() {
  return html`
  <h1>h1</h1>
  <div class="slot-container">
    <slot name="content"></slot>
    <slot></slot>
  </div>
  `;
}

What goes into building a web component

Neel — Fri, 15 Oct 2021 04:09:21 +0000

Building something as minimal as a card involves careful design considerations. A web component implies re-usability in different applications, so a card has to be built with adaptability and accessibility in mind.

For the purposes of this blog, this card will contain the following sub-elements:

an icon: represented by an svg file
a heading: contains the icon plus a title and a sub-title
a body: contains text and possibly images
the card: a summation of the icon, heading, and body

For a team of four, each member can be responsible for one sub-element, with the card member assisting in the other three to ensure that they function together. This might be the most difficult aspect of the card development process.

If I have learned anything from creating the button component that preceded this, I expect to improve on how I implement css attributes as well as my JS fundamentals.

Easy Button: Not So Easy

Neel — Tue, 12 Oct 2021 06:50:10 +0000

There is a lot that goes into developing a deceptively simple CTA button built on JavaScript. There is a lot to consider in each stage of the process without leaving design holes. For a team project, I worked on creating a button that would be rendered onto a web page.

Troubles

At first our team was not sure how to properly edit the styles built into the open-wc boilerplate that we started on. We assumed that we needed to implement constructors a certain way, coming from Java programming, but using CSS was enough for styling.

Successes

The team's design process for the button was relatively smooth. The button started out similar to the one provided in the open-wc boilerplate. We knew what the design consideration was from the outset, which is going to be a red Staples "That Was Easy" button.

What I Learned

I learned how different the development process is with web components as opposed to Java or Python programming. Writing states and attributes to create the CTA experience required some out-of-the-box thinking. In the future, we would like to add more attributes to enhance the experience, particularly for on-click functions.

Repo: https://github.com/Viable-Slime/Button

JS Boilerplates Comparison

Neel — Thu, 30 Sep 2021 00:37:25 +0000

Here, I will discuss a set of four boilerplates, created for one each of the following JavaScript libraries: React, Angular, Vue.js, and StencilJS. A boilerplate, for those who don't know, is a basic template that can be used to build a project from.

My process for finding my Angular boilerplate was using the web to look for one that is hosted on GitHub. Unlike looking for Vue.js or especially React boilerplates, there is no de facto standard boilerplate available, but rather several smaller user-generated boilerplates which do not guarantee that they work well. The installation was straightforward, which involved installing dependencies using npm, which I didn't expect to take as long as it actually did considering how stripped-down the end boilerplate is.

The React boiler chosen was created by Max Stoiber, and is by far the most popular React boiler on GitHub. It's individual components are divvied into their own files and folders all contained within the app/components folder. The components are easy to follow.

The StencilJS boiler is a Storybook boiler that had an absurd number of vulnerabilities that had to be audited when installing npm. It is very barebones with few in the way of interactive components.

The Vue.js boiler is the Vue CLI as provided by vuejs.org. required running npm run build followed by serve -s dist to start up as opposed to npm start with Angular, React, and Stencil. It is very simple with a handful of links and text, and the components are quite simple.

For me, the React boilerplate had the most to work with, the most straight-forward code, and had by far the most hassle-free setup.

The link to our cloned boilerplates is here: https://github.com/Viable-Slime/BoilerPlate

Installing Open-WC on Windows 10

Neel — Wed, 01 Sep 2021 07:13:37 +0000

Everything involving Open Web Components will be using Noje.js. The instructions to get Node.js installed are as follows:

Go to nodejs.org.
Look under the "Download for Windows" heading.
Click on left button to install the LTS version.

The Node installation should come with the package manager npm. You should also install yarn, an alternative to npm. Using npm, which can be opened by typing in "npm" in Windows search, you should execute this command to install yarn:

npm install -g yarn

All your projects will be located in the following directory, which should be created if you have not so:
C:Users\user\Documents\git\edtechjoker

In that directory, using npm, execute the command npm init @ open-wc to initialize Open-WC. That should lead you to prompts to create a new project, which should have:

a web component
options for linting, testing, and demoing checked
created without typescript
be named hello-world
installed using yarn

To check to see if you have done everything right, type the following commands to go into the hello-world directory, and fire up your webpage.

cd hello-world
npm start

Note: The hello-world directory must be in lowercase, as it is not just a naming convention but how the project functions.

Hello There...

Neel — Wed, 01 Sep 2021 04:45:58 +0000

My name is Neel Ghosh, and I am a Junior at Penn State. I am majoring in Information Science & Technology in the Integration path. I am familiar with coding in Java and SQL, and I am new to JavaScript and web development. I would like to at least be aware of if not familiar with the full stack of web developing, of which the front-end I am the least familiar with.

Outside of the classroom, I am mostly an indoors person, although I am trying to change that by getting more physically active through biking and lifting. In my spare time, I am also an active music listener. I mostly too classical and metal music, in which I don't listen to it in the background as a lot of people do.

I hope this blog gave some insight into who I am.