DEV Community: Anuar Shaidenov

Create Repeating Google Calendar Event for Last Working Day of Month

Anuar Shaidenov — Mon, 02 Sep 2024 07:54:27 +0000

End of Month Event Creator: A Simple Solution for Scheduling Recurring Monthly Events in Google Calendar

If you’ve ever struggled with setting recurring events for the last day of each month in Google Calendar, you’re not alone. As a 9-to-5 guy that keeps calendar I want to keep track of the salary day which happens to land on the last day of each month. Until recently, this functionality was noticeably absent, frustrating users who needed to track important monthly deadlines. But now, with the End of Month Event Creator, there’s finally a simple, effective solution that gets the job done.

The Problem

For many people, setting recurring reminders for things like bill payments, monthly reports, or important deadlines is a must. However, Google Calendar doesn’t support recurring events for the last day of each month — a limitation that leaves users manually scheduling events one month at a time. This is where the End of Month Event Creator comes in.

The Solution

The End of Month Event Creator is a new, open-source app that integrates with Google Calendar and lets you create events that automatically recur on the last day of every month. Whether you’re scheduling a full-day event or one with a specific time, this app handles it all effortlessly. Once you’ve set it up, you’ll never have to worry about missing those critical end-of-month reminders again.

Why You Should Try It

Easy Setup: It only takes a few clicks to connect your Google Calendar account and create recurring events.
Open-Source and Customizable.

For developers, the open-source nature of the project offers a great opportunity to contribute to something useful. Whether you want to add new features, improve existing ones, or simply explore how the app works, the code is free to use and extend.

If you’re interested in the code behind the app, you can also explore the GitHub repository here. It’s a great resource for developers looking to contribute or expand on the app’s capabilities.

How I redesigned my portfolio, from start to finish.

Anuar Shaidenov — Sat, 28 May 2022 13:39:15 +0000

I made my first portfolio about 7 months ago. I loved it. It was simple and static, and the design was really lovely. I got the design from the BootCamp that I was enrolled in and made the website with HTML, SCSS, and some JavaScript. Not too long ago I decided it was time to change it to my liking, make the website more dynamic and make use of the knowledge that I gained.

Step one: Design

I'm a front-end developer and I always loved designing, following the fundamentals, and using beautiful color schemes. The first thing I did was to decide on the color scheme of my portfolio and choose fonts. After doing some research and figuring out what I wanted this is what I went with:
Color scheme.

Very minimalistic and simple color scheme, I didn't want to overcomplicate it.

The font that I chose was also very simple: Roboto

Now, I am not a designer, so when it comes to it I just operate on vibes and whatever happens, happens. The first iteration of it looked like this:

The tool I used to design is Figma.

It looked very simple and I liked it, so I went with it.

I like breaking down my designs into components:

As you can see there are some things that I was trying out, the process of designing, I was changing it like 100 times, and when I was developing I changed it 100 more times.

Step two: Development.

From the beginning I knew what tech stack I was going to use, it was one of the main reasons I wanted to redevelop my website.

NextJS

NextJS, according to the official website is a Full-Stack React Framework. It has a lot of good features, but the main one for me is the Static Site Generation. In short, static site generation makes the SEO of your website more performant, since all the content gets rendered on the server and it gets served as static pages, which makes your websites very performant and easy to read for the SEO bots.

As my first step, I set up the environment and started developing using the mobile-first approach. In this case, TailwindCSS was really helpful, it made it so much easier to style while developing.

Pages on the website:

home
project details pages
about
contact
blog

I decided to go with different pages so that every page has one purpose and to keep it very simple. Plus, NextJS makes it really easy to work with pages.

For the home and project pages, I was going to use a headless CMS like Strapi or Sanity, but a couple of months ago I started learning Ruby on Rails and I decided to make a simple RESTful API to keep the data about my projects.

The blog page

For the blog page, I was planning to use the medium API to retrieve the data for my profile. But the API documentation was really complicated and I gave up on it… Until I found the API that made it all simple. Big shout out to the author of this repository, they have done a great job retrieving posts for Medium users, God bless.

https://mediumpostapi.herokuapp.com/?usermedium=anuarshaidenov

So I used the very handy NextJS feature for the blog page: Incremental Static Regeneration. Basically, it is like static site generation, but on steroids. Every time there are any changes on the server, i.e. I add a new blog post, NextJS would detect that change and rebuild my pages.

The same thing I did for the home page and the project details pages.

Ruby on Rails API

As I mentioned, instead of using a headless CMS I decided to create my own API. Ruby on Rails is the best and easiest option for that. I created endpoints to retrieve, add and edit the data for my projects, an example response would look like this:

{
 "id": 1,
 "title": "Car Booking",
 "description": "A web app that allows you to register and reserve premium cars. The project was dne in a group of 5 people. It consisits of front-end and back-end. I was working mainly in a front-end team, leading the teammates and controlling the proccess of the app.",
 "created_at": "2022–05–23T12:13:03.248Z",
 "updated_at": "2022–05–23T12:13:03.248Z",
 "image": "https://raw.githubusercontent.com/anuarshaidenov/car-booking-service-front-end/dev/screenshot-1.png",
 "technologies": [
 "React",
 "Redux",
 "TailwindCSS",
 "Ruby on Rails",
 "Authentication",
 "CRUD",
 "RSpec Testing",
 "TDD"
 ],
 "repository": "https://github.com/DelhinRharl/car-booking-service-front-end",
 "live": "https://deploy-preview-37--willowy-empanada-95e169.netlify.app/"
}

Home page

I used the data from the backend to retrieve the data for my projects and used ISR for it.

Step three: Deployment

I deployed the website on Vercel. It is the best option when it comes to NextJS websites. Before doing that I added Google Analytics to the page, and configured my domain.

I loved the process, I would not say it was simple, it took me 2 months to actually finish the website, because throughout the process I faced a lot of blockers, sometimes I just barely had time to even sit down and do it, the other times the imposter syndrome would attack me out of nowhere. The main thing is - I finished it.

Now hire me. Please.
And check out the website. And tell me your opinion, don't be shy.

FocusEvent.relatedTarget — when and why you might need it.

Anuar Shaidenov — Sun, 05 Dec 2021 16:39:16 +0000

Last week I was working on a small to-do list app as a weekly project for a BootCamp for web developers that I’m enrolled in. The app is built with vanilla JavaScript, HTML/CSS for the UI. Although it is a “must” to have a to-do list app in front-end developers’ portfolio I’d never actually done it prior to this project and now I can see why people are saying how crucial it is for applying your skills into practice.

The features of the app were clear and seemingly simple:

Display list items dynamically
Save the data in the local storage
User should be able to add/remove items to/from the list
User should be able to edit the list items

As you can see in the code above I used <input type="text"> to display the description(name) of each task. The reason I chose to use it is to be able to edit the description and listen to the change event.

Throughout the process of building the app, I didn't really face any issues until I started working with focusin and focusout events alongside click events.

This was my thought process making this feature:

Attach focusin event listener to the input field
Apply styles (by adding classes)
Hide the options button and display the remove button (display: none and display: block).
On focusout event get everything back to the way it was
Attach the click event listener to the remove buttons
Remove the clicked item (match the data-index attribute with the index property of the item object in our list) then store and display the new list

The edit mode was working as expected. As you can see the styles get applied and the button gets displayed when I go to the edit mode. And vice versa when I go out of focus of the input (click anywhere else in the document) the list items go to the initial state.

Now this is where the problem takes place

As I said before we are setting our delete button to display: none on focusout which removes it from the DOM. When we try to click on that button the focusout event will fire and remove the element leaving us no chance of clicking on it and therefore deleting the list item. So how do we go around this bug?

After a lot of researching and testing, I figured out that I need to find a way to skip the step of hiding the remove button when it gets clicked.

If it was a click event we know that we could use ClickEvent.target to get the element that we click on. Focusout event is different though. It does not listen to clicks but it gets triggered whenever we go out of focus of the element the event is attached to.

Logging the event property I noticed the relatedTarget key and its value being the element that we click on.

When we click on a blank space on the document we get null as a value, but if it's an element the value is the element that we click on.

From here we add our check to see if the clicked item contains the "btn-delete" class and we do nothing if it does(return), otherwise we just hide the button. Here's what our event listener would look like in the end.

Viola! The bug has been fixed. Our to-do list app is now looking much better and cleaner and we can do whatever we want with it.