๐ Troubleshooting Critical Terraform Drift in AWS Production
Project Description / Post Body:
I recently encountered a critical CI/CD failure while deploying a serverless backend to a new AWS environment. The pipeline was paralyzed due to "Resource Drift"โa mismatch between the Terraform state file and the actual infrastructure.
The Challenge:
A manual "hotfix" in the AWS Console created "ghost resources" (Secrets) that Terraform couldn't see.
This caused repeated deployment failures and blocked the staging environment.
The Solution:
Instead of tearing down the environment, I used the terraform import workflow to:
Documented the full fix in my technical blog (Link below)
https://shorturl.at/ZJR3g
1
0
192
Hey fellow Contra builders! ๐โจ
I'm Vikaskumar, a Full Stack Developer pioneering the future with Web3. Currently crafting a decentralized app using TypeScript, Next.js, Tailwind, Node.js, and Ether.jsโwhere smart contracts meet sleek modern UI! (client returning from LinkedIn!)
Check out this Next.js-powered UI sneak peek ๐. Looking to connect with new clients and collaborators here at Contra Too.
Open to feedback, partnerships, and sharing ideas with fellow tech visionaries! ๐
#web3project #fullstackdeveloper #nextjs #javascript #typescript #tailwindcss #etherjs #OpentoWork #thenewcontra
Blogger & Blogspot Web Creation | Customization | Redesign
New to Contra
Blogger & Blogspot Web Creation | Customization | Redesign
๐๐ซ๐ซ๐ข๐ซ ๐๐๐ ๐ ๐๐ฅ๐จ๐ ๐ ๐๐ซ ๐๐๐ฆ๐ฉ๐ฅ๐๐ญ๐ ๐๐ฎ๐ฌ๐ญ๐จ๐ฆ๐ข๐ณ๐๐ญ๐ข๐จ๐ง
๐๐ซ๐จ๐ฃ๐๐๐ญ ๐๐ฏ๐๐ซ๐ฏ๐ข๐๐ฐ
Errir Web is a customized Blogger website built from an uploaded template and transformed into a structured, client-ready blog website. The template was customized with additional sections, improved content organization, and a practical layout so the client can replace the existing demo content with their own content directly through Blogger.
๐๐ฒ ๐๐จ๐ฅ๐: Blogger Website Designer & Customization
๐๐ฅ๐๐ญ๐๐จ๐ซ๐ฆ: Blogger / Blogspot
๐๐ซ๐จ๐ฃ๐๐๐ญ ๐๐ฒ๐ฉ๐:Template Customization & Website Setup
๐๐ซ๐๐ง๐:RAVORA (https://ravoraweb.blogspot.com/)
๐ ๐๐ก๐ ๐๐ก๐๐ฅ๐ฅ๐๐ง๐ ๐
A template alone is not always ready for practical client use. It needs proper setup, organized sections, and a clear structure that makes content management easier.
๐ ๐๐ฒ ๐๐ฉ๐ฉ๐ซ๐จ๐๐๐ก
I uploaded the Blogger template, customized its layout, added the required sections, and organized the website into a usable structure. The focus was to turn the template into a complete website that the client can personalize without rebuilding the design from scratch.
๐ ๐๐๐ฒ ๐ ๐๐๐ญ๐ฎ๐ซ๐๐ฌ
1๏ธโฃ Customized Blogger template
2๏ธโฃ Additional website sections and widgets
3๏ธโฃ Organized blog layout and content areas
4๏ธโฃ Navigation and content presentation
5๏ธโฃ Client-editable content using Blogger
6๏ธโฃ Ready-to-personalize website structure
๐ ต๐ ธ๐ ฝ๐ ฐ๐ ป ๐ พ๐๐๐ ฒ๐ พ๐ ผ๐ ด
The website is now set up as a complete Blogger project, ready for the client to replace the demo text, images, and posts with their own content.
Designed and customized by RAVORA. (https://ravoraweb.blogspot.com/)
๐๐จ๐ง๐ญ๐ซ๐๐ฌ๐ญ๐๐๐ โ ๐ ๐ซ๐๐ ๐๐๐๐๐ฌ๐ฌ๐ข๐๐ข๐ฅ๐ข๐ญ๐ฒ ๐๐จ๐จ๐ฅ๐ฌ ๐๐๐๐ฌ๐ข๐ญ๐
๐๐ซ๐จ๐ฃ๐๐๐ญ ๐๐ฏ๐๐ซ๐ฏ๐ข๐๐ฐ
ContrastLab (https://contrastlab.blogspot.com/) is a free, browser-based toolkit I built on Blogger to help designers, developers, bloggers, and content creators check the three most common readability problems: ๐๐จ๐ฅ๐จ๐ซ ๐๐จ๐ง๐ญ๐ซ๐๐ฌ๐ญ, ๐๐จ๐ง๐ญ ๐ฉ๐๐ข๐ซ๐ข๐ง๐ , and ๐ญ๐๐ฑ๐ญ ๐๐ข๐๐๐ข๐๐ฎ๐ฅ๐ญ๐ฒ. The site hosts three interactive tools a Color Contrast Checker, a Font Pairing Generator, and a Text Readability Checker all built from scratch with vanilla HTML, CSS, and JavaScript, and all running entirely in the browser with no signup, no downloads, and no server-side processing.
๐๐ก๐ ๐๐ซ๐จ๐๐ฅ๐๐ฆ
Most accessibility and typography tools fall into one of two camps. Either they are enterprise software with a subscription wall, or they are single-purpose checkers that do one thing and stop. A designer checking WCAG contrast has to open one tab, then a different tool for font pairing, then a third for readability. None of them talk to each other, and most require an account before you can test a single color pair.
For bloggers and small teams, the friction is worse. A content creator who wants to check whether a post is readable at grade 8 has to install a Chrome extension, or open Google Docs, or find a free calculator that only runs one formula. The tools that actually work are scattered, inconsistent, and rarely free.
๐๐ก๐ ๐๐จ๐ฅ๐ฎ๐ญ๐ข๐จ๐ง
ContrastLab consolidates the three most common readability checks into one free site:
๐๐จ๐ฅ๐จ๐ซ ๐๐จ๐ง๐ญ๐ซ๐๐ฌ๐ญ ๐๐ก๐๐๐ค๐๐ซ โ Tests any foreground and background color pair against WCAG AA and AAA standards. Returns the exact contrast ratio, flags pass/fail at normal and large text sizes, and supports hex, RGB, and opacity values. Includes an image pixel sampler for text over photos.
๐ ๐จ๐ง๐ญ ๐๐๐ข๐ซ๐ข๐ง๐ ๐๐๐ง๐๐ซ๐๐ญ๐จ๐ซ โ Previews Google Fonts combinations at real heading and body sizes. Pick a category (sans, serif, display, or script), select a heading and body font, adjust the size sliders, and copy the production-ready CSS. The tool flags weak pairings so the output is usable without a second check.
๐๐๐ฑ๐ญ ๐๐๐๐๐๐๐ข๐ฅ๐ข๐ญ๐ฒ ๐๐ก๐๐๐ค๐๐ซ โ Pastes any text and returns Flesch Reading Ease, Flesch-Kincaid Grade Level, Gunning Fog, SMOG, ARI, and Dale-Chall scores in a single pass. Also reports word count, sentence count, syllables, and complex words.
Every tool runs entirely in the browser using JavaScript. No text, color value, or image is sent to a server. Nothing is stored. When the user closes the tab, the data is gone.
๐๐๐๐ก๐ง๐ข๐๐๐ฅ ๐๐ข๐ ๐ก๐ฅ๐ข๐ ๐ก๐ญ๐ฌ
Lightweight tool code: Each tool is a single HTML block with inline CSS and vanilla JavaScript. No jQuery, no external libraries, no build step.
Blogger-friendly integration: Tools are embedded directly into Blogger pages via HTML view, with no server-side dependencies.
Custom theme: Built on a customized Blogger theme with a responsive layout, gradient header cards, and mobile-first CSS.
Mobile-first design: All three tools use responsive grid layouts that collapse to single columns on mobile, with touch-friendly controls.
Zero data storage: No backend, no database, no cookies, no tracking on tool inputs. All processing happens client-side.
Copy-ready output: The font pairing tool exports production CSS; the contrast checker exports design tokens; the readability checker exports scores.
๐๐๐ ๐๐ง๐ ๐๐จ๐ง๐ญ๐๐ง๐ญ ๐๐ญ๐ซ๐๐ญ๐๐ ๐ฒ
Beyond the tools themselves, the site includes a content strategy built around long-tail keyword clusters:
30+ planned posts per tool, each targeting a specific keyword group with no overlap.
FAQ schema, WebApplication schema, and Article schema on every page.
Internal linking between all three tools so users can move from contrast to typography to readability in one session.
Essential pages โ About, Contact, Privacy Policy โ written with E-E-A-T signals and structured data.
Answer-first formatting for AI search optimization (AEO), with direct answers in the first sentence of every H2 section.
The content is optimized for both traditional search engines and AI search surfaces, with specific data, named tools, and clear Q&A structures.
๐๐๐ฌ๐ข๐ ๐ง ๐๐ฉ๐ฉ๐ซ๐จ๐๐๐ก
The site uses a colorful, card-based design that avoids the sterile look of most accessibility tools:
Gradient header cards in indigo, pink, teal, and amber โ one color family per tool.
Icon circles and pill badges for visual hierarchy.
Live preview panels that update as the user types, so the tool feels responsive and immediate.
Verdict cards that explain why a result is what it is, not just report a number.
The design goal was to make accessibility checks feel approachable rather than clinical the kind of tool a blogger would use before publishing, not the kind of audit software an enterprise compliance team would run once a year.
๐๐๐ฌ๐ฎ๐ฅ๐ญ๐ฌ ๐๐ง๐ ๐๐ฎ๐ญ๐๐จ๐ฆ๐๐ฌ
Three fully functional tools running entirely client-side on a free blogging platform.
No hosting costs, no server maintenance, no subscription fees the entire site runs on Blogger's infrastructure.
Structured data on every page WebApplication, FAQ, and Article schema for search visibility.
SEO content architecture covering 90+ planned posts across three tool categories.
Cross-tool internal linking so each tool page recommends the other two where relevant.
Mobile-first, all-device-friendly layout with responsive grids and touch-friendly controls.
1
0
54
๐๐ฎ๐ฌ๐ญ๐จ๐ฆ ๐๐จ๐จ๐ฅ ๐๐ง๐ญ๐๐ ๐ซ๐๐ญ๐ข๐จ๐ง ๐๐จ๐ซ ๐ ๐๐ฅ๐จ๐ ๐ ๐๐ซ ๐๐๐๐ฌ๐ข๐ญ๐
Recently, I completed a project for a client where the requirement wasn't just a standard website, but a fully functional web application.
๐๐ก๐ ๐๐ฅ๐ข๐๐ง๐ญ'๐ฌ ๐๐๐ฆ๐๐ง๐:
The client needed a financial blog on Blogger, but they didn't want empty articles. They wanted interactive tools (Pricing, Budget, and Growth Calculators) built directly into the pages to provide actual value to their readers.
๐๐ก๐ ๐๐ก๐๐ฅ๐ฅ๐๐ง๐ ๐:
Blogger (Blogspot) has limitations when it comes to custom backend logic. The challenge was to build multi-category calculators that are:
Lightweight (so the site loads fast).
100% mobile-responsive.
SEO-optimized with proper schema markup.
๐๐ก๐ ๐๐จ๐ฅ๐ฎ๐ญ๐ข๐จ๐ง:
I developed custom HTML/CSS/JS tools from scratch. Instead of heavy external libraries, I used pure vanilla JavaScript to keep the weight under 15KB. Each tool includes 6-7 different categories (like 50/30/20 budget rules, compound interest, etc.) and is integrated with the blog's SEO structure.
The result? A fast, fully functional blog that acts like a web app, built exactly to the client's specifications.
๐๐ฒ ๐๐๐ซ๐ฏ๐ข๐๐๐ฌ:
If you need custom tools built for your website, or if you are looking for professional Blogger/Blogspot website design that actually performs and ranks, I can help.
๐ View my portfolio for more details: RAVORA (https://ravoraweb.blogspot.com/)
Let's build something functional for your business. ๐ค