ChartJS Line Chart
Website features can be far more difficult than front end development is given credit for. This customized ChartJS line chart is a good example. It’s common in my experience to get a mock, that’s a world away from the default. In this case, the library version. Building these graphs was a daily task for me at one point. And the libraries varied from project to project. So sometimes I’d need to build the same thing in D3, NVD3, and ChartJS. This one has a hamburger menu with several viewing options.
Angular Date Picker
A lot of my coworkers used an entire library like Material for website features. Such as a date picker. Not only did I think it was wrong to do so, but the component was very difficult to modify. So, I built my own. The TypeScript is very straightforward and could even be converted to a React component. Moreover, if you wanted to make UI or functional changes, it shouldn’t be too difficult. Regardless, check it out.
Table in HTML & JavaScript
Angular, React, and Vue dominate the frontend space. However, I still have the need for vanilla JavaScript website features. Development of thereof certainly isn’t common, but I must say I enjoy it when the need arises. This table has some neat features all of which are powered by clean functions in it’s own namespace. Moreover and perhaps most importantly, doing things like this provides a thorough explanation as to what’s happening under the framework hood. Read all about it in this post.
Angular Dynamic Sidebar
Website features come in all shapes and sizes. This one was inspired from the need to create a JSON powered navigation bar. Why? Permissions. I was working on an app that allowed different people to do different things. Admin, users who could approve documents within the system, data entry staff, and interns with rudimentary privileges. So, the dynamic sidebar was born. A way to pipe data in via a payload. View the code here, or see it in action on Stackblitz.
Angular Accordion
This Angular accordion came to life in a similar fashion like the dynamic sidebar. Lots of these projects did actually. Oftentimes when I know I’ll need to develop something, I’ll build a mock for myself. I don’t think any of us enjoy being under pressure, so I take a little time before hand ensure I know exactly what to do. It’s the developer best practice in me. But I digress. Here’s a JSON driven TypeScript actually, accordion. One in which has multiple layouts for each section. Uncommon, but definitely helpful. See the code and read a brief synopsis on it here. Clone, modify, whatever. Enjoy.
Angular Slider
Slider’s are used everywhere. They’re informative, visually appealing, and enhance the UI. This JSON driven TypeScript slider can be easily modified to fit any dimension or content type. Need more than four items? Add one, two, or five more to data.JSON. Add a play slideshow button and go full screen. This is what I love about website features. They’re all so diverse and customizable. See the code, make changes, and read about it here.
D3 Bar Chart
D3 is tough. NVD3 is a little less cumbersome, but ya still gotta know what you’re doing. And the later has limitations. So if you want to harness the full features of D3, learn the library. It’s the most powerful and dynamic one out there. Better than ChartJS or High Charts. I began using it because the mocks I was provided with were so unique, and it was literally impossible for me to emulate them with any other resource. If you’ve never used it before, check out this code sample. Tinker with the code, etc.
Angular Data Table
I’ve built dozens of data driven tables. This is just one of many. It’s simply though. And has been viewed almost 7k times. I’m using a pagination plugin with JSON data indicative of a payload. If you change the data, update the interface too. If you’d like to see additional features such as filtering, search, or continuous scrolling, leave a comment here, and I’ll update the repo. Or if you’d just like to leave a generic comment, that’d be great too! Regardless, hope this is useful for you.
Angular Countdown Timer
This TypeScript countdown timer is neat in my opinion. Coding is wild. It’s amazing what we can build with minimal amounts of code. This is no exception. Like the other website features, this too is highly malleable. You could add milliseconds or simply change the font to match a theme. Use it for advertisements or a business/ website launch. Whatever the need, it’s flexible. Like everything else here, if you’re looking for additions, minor tweaks, leave a comment and I’ll try to implement it. The TypeScript countdown timer is here. Code and description.