Category: English

Here’s a retrospective of the 2008/2009 internet from my point of view.

Feedburner feed counter

Each of the blogs comes with an RSS feed. You can run it through a service called Feedburner and see how many people (or bots) read your blogs every day. It also came with a nice counter you can proudly display in your blog sidebar.

I would check my blog every day to see the updated reader count. It gave me a little ego boost every time it increased.

Entrecard

It was a square ad code we would put into our blog sidebars. This service served as free advertising for bloggers.

The card had two parts: the ad and the drop button. Every time you visit a blog’s Entrecard widget, you can click the button and drop a virtual “card” which acts as the currency on this service. For every card drop you earn a credit, while the blog owner also earned credits.

At the end of the day, you can check your dashboard to see how many credits you earned. Using the credits you can place your ad on other popular blog. This worked as a discovery platform for blogs.

Read more about Entrecard in this 2008 interview from Problogger

StumbleUpon

It was a browser toolbar for Firefox and other web browsers. By clicking the “Stumble” button on the toolbar, you would be taken to a random and interesting webpage. It was a fun way to find internet viral things. I found out about Codecademy through this service.

Apart from discovering new pages, we could also submit our own blog pages and hope they get picked up by the StumbleUpon algorithm. It was a common practice to “Stumble” (vote) each other’s blog posts.

Google Page Rank Toolbar

Back then, every website and page had a thing called “Page Rank”. There were toolbars to show your blog’s page rank. Every 3 or 4 months, Google would update its public rankings. My blog had a page rank of 3/10. It was a common practice to sell and exchange links to each other in hopes to gain higher rankings.

Toolbars

As you can see, Toolbars were a thing back in the day.

Before Google Chrome came along, almost every internet service had its own toolbar. Anytime you go to their site, they ask you to install their toolbar to quickly use their app.

As a result, sometimes your browser would end up something like this:

I had a tiny 1024×768 resolution monitor. Now imagine how hard it was to navigate the 2008 era internet through these invasive toolbars?

Technorati blog rank

It was yet another blog ranking score you could have. The Technorati widget and toolbar showed where your blog ranks based on popularity. It was very similar to the Google page rank mentioned above.

Alexa site rank

While we are on the topic of site ranks, there was yet another popular site ranking tool. Before Alexa was a voice assistant, it was called a site ranking toolbar:

Other than Google’s page rank, the Alexa rank was the next most important factor in blog valuation.

Digg.com

It was a site similar to Reddit, you could submit your blog posts and get diggs (upvotes)

I mostly remember about the Digg the candidates campaign, when Digg featured 2008 US presidential candidates on their site.

Twitter and related services

Back in the day, Twitter was just getting started. It had an API, and it spun a range of services.

Twitter started as a “Micro” blogging platform. It was not the only one of its kind. Many Twitter copycats came out with their unique twist. One of them was Plurk. I opened accounts in both Twitter and Plurk.

Twitter didn’t have images back then. One such service that popped up solving this problem was TwitPic. You could connect to this site and upload an image to TwitPic and put the image link to Twitter.

TinyURL.com

Twitter had a limit of 140 characters, so long links were an issue. TinyURL was an interesting project -a service that turns long links to tiny URLs:

This gave rise to some more services:

• Ow.ly
• Bit.ly
• Ad.ly

And many more.

On a cool February evening in Dhaka, a group of passionate Python enthusiasts gathered for something special—our city’s first-ever Python User Group meetup. What started as an idea a few weeks earlier turned into a diverse community event, laying the foundation for Python Dhaka’s journey.

Here’s how we made it happen and what we learned along the way.

Arranging the Meetup

The whole event was organized through our Facebook group. In Bangladesh, Facebook is the primary hub for tech enthusiasts to form communities and organize events. Unlike platforms like Meetup or Discord, Facebook groups often serve as the starting point for grassroots tech movements here. I launched a Facebook group for Python Dhaka a few weeks prior, and thanks to my personal network, it grew to 250 members within two weeks.

The next logical step was to organize an in-person meetup, because I want this group to be all about connecting with the local Python enthusiasts. After thinking about it for a few days, I locked in a date and venue for the first meetup.

I choose the 15th of February because it’s the mid-month, and a Saturday. In Bangladesh, Fridays and Saturdays are official holidays. Friday is the most popular day for events, followed by Saturdays. I picked Chandrima Udyan for two reasons: 1. It has easy access to the bus and metro route; 2. It’s a public park we can access for free.

I created the event on Facebook and started spreading the word on the FB group, my profile, Twitter, Linkedin, and my Instagram handle. I even created a short video announcing the event and posted it on all of my socials.

How the Meetup Went

At 5 PM local time, I waited near the park entrance, feeling a mix of excitement and nerves. Soon, one by one, attendees started arriving, their calls guiding me to them. Here’s me waiting:

As we entered the park, a cool evening breeze greeted us—washing away the stress of city life and setting the perfect mood for our first meetup.

I started the meeting by sharing the Python Software Foundation‘s missions with the attendees, and how it relates to us:

• To grow a diverse and international community of Python programmers: Organizing the Python Dhaka community is helping this mission.
• Encourage knowledge sharing, collaboration, and support devs of all backgrounds: Students from three universities joined this event. They were able to share knowledge and build future collaboration opportunities. This community is open to all levels of developer experience.
• Grow a diverse and welcoming community; support underrepresented communities in tech: One participant came from a non-computer science background, eager to transition into tech. This is exactly why Python Dhaka exists—to welcome everyone, regardless of their starting point.

I then shared how I started evangelizing Python.

I am a professional JavaScript developer with React and NextJS expertise. I use JS for my daily work. My cousin wanted to learn Python, so I got into learning it. I found Python to be easy to learn and easy to teach. I was looking for a Python community in Dhaka, but there was none. That’s why I decided to organize the Python User Group Dhaka.

I also mentioned that I don’t own Python Dhaka. I am only organizing it for the time being. As this community grows, and if in the future I have to move cities, I will pass the torch to the next person to continue organizing our community activities.

We are not strictly Python fanatics. We would love to collaborate with our friends in the JavaScript, PHP, and Kotlin communities too from time to time.

We heard personal stories from the attendees, how they got into programming, and how they are using Python. Two students are doing competitive programming with C, C++ and thinking of switching to Python for CP and ML.

Two of the attendees came from different districts just so they could attend this meetup. 

One attendee traveled over 80 kilometers from Tangail just to be here. That level of dedication reminded me why this community matters.

I shared many tech tips, and also informed them about the free GitHub Student Developer pack and how to avail it. We also discussed getting real-world experiences by putting an app out in the world.

We also announced the Campus Ambassador Program for Python Dhaka and nominated Abdullah to be the ambassador at Southeast University. A campus ambassador is a person in your college/university who will promote and evangelize Python programming language on your campus.

As the meetup was about to end, it was getting dark when we clicked this group photo.

Next Steps

Our journey is just beginning. We plan to host monthly meetups around the 15th of each month, but our ambition goes beyond that. We want to nurture the next generation of Python developers in Bangladesh, and one day, bring PyCon Bangladesh to life.

If you’re as passionate about Python as we are—whether you’re in Dhaka or anywhere in the world—we’d love your support. Find Python User Group Dhaka on Facebook, or connect with me on Linkedin, X, and Instagram. Let’s build this community together!

I am building MySocial, a one-page bio website maker. So far users can sign up for a free account. But next up is adding a payment processor.

I want to offer more premium features to this app, so I can make money from this. But for this I will need to use a payment system.

I have a few options for now:

PayPal
Stripe
Paddle

Stripe is the easiest of them to setup, but unfortunately, I live in Bangladesh where this service is not available. If I want to use Stripe, I have to register a business in the USA or UK, get a business bank account, a business phone number just so I can apply for it.

For all this, I set aside 25-30 thousand Bangladeshi takas, and I was shopping for companies who can setup an offshore business for me.

But then I thought, even with a UK business, there is no guarantee that Stripe will approve my app. And even if I get approved to setup Stripe, there is no guarantee that MySocial, my first SaaS will make money.

Fortunately, there is Paddle and they allow sole-proprietorship businesses from Bangladesh. Paddle will process debit/credit card payments, PayPal payments, Google Pay, Apple Pay for a fixed fee of 5% + 50c per transaction.

I have already configured Paddle payments in MySocial, check it out!

On July 1st, I got to point the domain mysoci.al to the production site and did an early beta launch to my Facebook profile.

Screenshot: Sharing about mysocial in Bangla in that post.

My Facebook post garnered a hopping 500+ visitors to the site in the early hours and in the next full day it got another 2k visits to the site, as I was tracking the visits with Plausible, I couldn’t believe the current active users to the site (93 active visitors at one point):

As of writing this article, a total of 3k visitors checked out the site. All of them came from my Facebook profile.

I posted a bunch of FB stories, all linking to the site. This first story got 2.9k views:

These fb stories combined also drove 534 visitors to the site:

Here’s my profile page I shared (mysoci.al/tamal):

And here’s the homepage at the time of the early beta launch (mysoci.al):

Over the course of 3 days the site generated 100+ new users and close to 80 fully completed sites.

Stats from the Kinde dashboard:

Here’s a few screenshot of the site in the beta launch:

Builder page (not signed in):

Avatar upload tab:

Links:

Themes:

Builder page (signed in):

Onboarding flow:

Dashboard page:

The “Go Pro” version hasn’t been implemented yet.

As you can see the design is very crappy. I wanted to quickly put together something and launch early. That’s why I didn’t spend much time making everything perfect.

Here are some of the sites from the registered users who signed up for the early beta:

I was anxious to share this site to the public so early.

At one side, I wanted to make it perfect, and on the other side I wanted to quickly get feedback.

MySocial will never be perfect if I don’t publish and get early user feedback.

To me, done is better than perfect.

After launching this site, I quickly realized so many tweaks and improvements that I can do for this site.

My next steps with MySocial:

I want to implement the pro version through user roles and add more features for the pro users.

Add payment mechanism to the app, and get paying users.

Once I get a few paying users after launching to various product sites, then I will fully invest in this product to delight my users.

While I do this, I will keep pushing new features and fix bugs to delight the free users.

Now you may remember MySocial from the past, here’s an insight on that:

MySocial’s original version (2022)

I originally started developing MySocial in May 2022 as part of the 30 day startup challenge. It took me 2 months to build the MVP. I built it out with a React frontend and NodeJS Express backend. I hosted the site on Digital Ocean $5/mo app engine. I also got a CDN for $5/mo.

I quit working on the product soon after the launch. So the app was the same as it was launched. I paid for the server for a year and then pulled the plug.

MySocial’s first version was a failure because I kinda lost interest in the project. I also let the domain expire after 2 years. Luckily I still got a hold on that domain on the second time.

For this new version, I rebuilt everything from scratch. I couldn’t get the old codebase to work, that’s why I decided to build from zero again. This time I coded this app with fullstack nextjs. It was a delight to work with it. My dev time was cut short to roughly 12 days (2-3 hours a day).

Here are some screenshots from the old version:

Till then.

I was looking into the periodic table and trying to memorize all the elements in order. One afternoon I thought, hey can I make the periodic table with my current CSS skills?

The periodic table is a collection of elements arranged in an oddly structured way. It has already been built in the past, but the question is, can I do it myself without looking?

Check out the final version here.

Making the Layout​

The first task was to arrange all the elements in the peculiar order. The first idea that came into my mind was to make an HTML <table>, and put all the items inside the table cells. But tables are old and messy, not to mention, they are very hard to maintain.

I know CSS grid, so why not use that?

At that point I was a bit skeptical, and thought maybe I will have to use flexbox to achieve the task.

So each of these elements will be a <div>, and I will arrange them with CSS.

I made the elements like this:

I put 2 classes, the element class to make the box, and element-1 to specifically control the position. I would have 118 elements altogether.

Instead of hand coding all 118 divs for my table, I used the emmet shorthand:

The table has 18 columns, so I made an 18 column layout with CSS grid.

The Tricky Part​

Okay, so now that I have the container ready, I have to put Hydrogen as the first element and Helium all the way to the right.

I did this:

And it worked!

One by one, I arranged the elements in this manner. Since I append the exact element’s number as the class for each cell, I can easily control their positions in the table.

In the periodic table, there is a large gap between elements. Let’s take a look — the original periodic table is very long, about 32 columns:

To prevent it from being this wide, there are versions of the table which carve out a separate grouping of elements. I had to do the same with my table.

So what I did was to separate the Lanthanide and Actinides from the markup and from the CSS.

After the layout was ready, it’s now time to add the React.

Filling the Table with Data​

It was all fun and games filling out the first few elements. But soon I realized there are 100s of elements that needed to be added. Do I have to type out ever single one? It would suck the fun and life out of me.

So why not do the smart thing and pragmatically fill out the info?

I searched the internet and found one JSON which has information about all the 118 items. So I added this data to my application.

In the JSON, there is an array of elements. My idea was to reference each element by their order. In an array, the first item starts at 0. That means Hydrogen is at zero, Helium is at 1, Lithium at 2 and so on. To avoid this confusion, I added a placeholder item in the 0th position. So now every element is correctly in the same position as it is in the periodic table.

Now that I have the data that I need, I can just make one React component to render all the elements and pass in the data as props.

Initially, I thought I need to pass in the name, the number, and the symbol of the element as the props to the React component.

Then I realized I can just pass in the element’s number, and that would be enough to use the JSON data to extract the entire information about that particular element within the <Element /> component.

The rest was all about making the app interactive.

Coloring the Element Groups​

In the Periodic Table, each of the elements are ordered by their category and they are colored. So instead of coloring each of them I put their categories on the CSS too using the React component.

This gave the table that cool look.

Making the Table Fit The Screen​

To start, I made the table 1000 pixels in wide following the general layout practice. But that made the elements too tiny.

So I decided to make it fit the screen and utilized viewport width exclusively. I used vw for the element dimensions, text, and headings throughout the app. This helped to maintain the shape across screen sizes and devices. The table is mainly made for desktop screens, but it still looks okay on tablets too.

Final Touches​

The table is not complete if it just sits there doing nothing. I added a panel which displays additional information about the element when selected. React was great for this job. So why don’t you see it for yourself in action here?

There are more things happening in the code, why don’t you dig inside and see it yourself? I welcome you to copy the code/fork it from Github.

The table in 2024

I made some new changes to the style of the table. Also converted the project from React class components to functional components. Check out the latest version here.

If you would like to hire me for your project or your coding homework, feel free to DM me @tamalchow on Twitter.