teleren/devto huggingface dataset:
A Half-baked Work at Glam Up My Markup
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-31 17:38:26

---
title: "A Half-baked Work at Glam Up My Markup"
published: true
tags: frontendchallenge, devchallenge, css, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8sot0etchu4x64rnwve.png
---

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built
Base on the skeleton, I add CSS to make it looks a bit fancy and use Js to improve UX (More specific, turn a whole form into multiple sections for focusing purpose)

## Demo

> https://ndt-challenge.gitlab.io/dev.to/1st/glam-up-my-markup

![sample screenshot of the work](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8sot0etchu4x64rnwve.png)

{% embed https://gitlab.com/ndt-challenge/dev.to/1st/-/tree/main/Glam%20Up%20My%20Markup?ref_type=heads %}

## Journey

A lot of fun during working but due to deadline, I cannot polish my work any longer. The main reason behind this mess is because I want to play with Solid. I always like it but rarely have a good chance to use it. So I decied to use it on this simple challenge.

At first, every looks nice enough with just simple 2 nav buttons, go forward or fallback, easy peasy. But then, me being stupidly greedy decided to add 1 tiny feature. Just like a client used to say, only a tiny button, what could go wrong? Yep, only a tiny "reset" button and I burn my whole cute little project into ash.

So till now, at the moment I'm writing in the middle of the night (GTM+7), my code has been through at least 2 refactoring times and I still have no idea what I did. Many problems are still there and many other features will never see the sun light...

So, technically, this work isn't worth to submit. But I still want to submit with a hope that somebody can give me a few advices to improve my code. Right now, I'm stuck with the fact that `createEffect` of SolidJs doesn't seems to work in `change` event of select. Oh, suggestions for clean code are welcome too.

<!-- Thanks for participating! -->
Glam Up My Markup Challenge
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-31 17:38:18

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built

I built an inquiry web app for camping activities using the starter code with vite vanilla javascript. 
Since a plain form leavs a rather "boring" impression - at least for me -, 
I'm trying to capture the atmosphere of a possible user and make a "boring" form somehow interesting. 
Therefore I picked a background image by [Kevin Erdvig](https://unsplash.com/photos/camping-under-black-sky-k7fUP9RQj3Y) and found a matching favicon.
Then added some css "glamping" style with glowing effects to headline and labels, and rounded some borders for a smooth and welcoming appearence. 
I chose to handle user submission with [toastify-js](https://www.npmjs.com/package/toastify-js), so that there's only a brief notification for the user after hitting the button. 



## Demo

You can find the project [here](https://campactivitychallenge.netlify.app/) and the code [here](https://github.com/CipiVlad/camp_activity_dev_to_challenge.git).

## Journey

Although the purpose of the user visiting this web app is to get a quick info, it doesn't mean to lack of style. So taking this user's view, finding the fitting background I really enjoyed working on the forms look and felt challenged to get something done. Till now I didn't style web apps with "glowing" effcts, as there were no use cases for that and for the first time I used the text-shadow and the css selector label[for=""]. So now I know better :)



## camp_activity_dev_to_challenge
Get Easy Backlink From Google!
Tags: seo, marketing, javascript, tutorial
Published: 2024-03-31 17:27:18

Getting high DR **backlink ** is great,

How about if it is from **google** and it is a **DO FOLLOW** link?

I am sure it is amazing, and getting that is easy (_no catch_).

While reviewing our projects, I found **chrome extensions** that we developed but never released (internal use, no payment implemented... etc) then I remembered that one of the important things you fill when publishing a chrome extension is the website, so I went to check one of our live extensions to find that the link to the website is a **DO FOLLOW** although it was to a domain we are not watching the backlink shows up from google.com
So I switched that extension domain, and just published another chrome extensions to Chrome Web Store, by the way these are fairly simple extensions, one of them you can build under 30 lines of code (or buy under $50).

For [us](https://evotik.com) we published ([since we can](**url**)) a chrome extension that we really needed, whenever we posted a job on LinkedIn it was so hard for us to communicate with candidates, as we invite them first to a pretest (eg [here](https://x.com/MaenHouseh/status/1770876131131998501?s=20)) which determines if they qualify for interview, so we need to bulk email them, then based on results we send them a calendar link in order to book an interview appointment.

{% tweet 1770876131131998501%}

So we built a [chrome extension](https://chromewebstore.google.com/detail/linkedin-candidates-expor/cabffljhhneflnhggogdkfidppbnbnkc?hl=en&authuser=1) that does exactly that. It collects all job posting applicants, then allows you either to copy them to an excel or google sheet, or export them as CSV or Excel. You can even download individual resumes or download them all with 1 click.

{% embed https://www.youtube.com/watch?v=ShNZaYnGoKM %}

The extension is [released free](https://chromewebstore.google.com/detail/linkedin-candidates-expor/cabffljhhneflnhggogdkfidppbnbnkc?hl=en&authuser=1), and you can use it as well, and we would love to hear some feedback about it. Anyway back to our subject, you can release simple extensions (simplest is just your logo and on click takes to your site) and it will take 24 hours to be approved and live on chrome web store, maybe you need some advice regarding answering the privacy questions, I ll be happy to help, but in general they are very simple and you should use very simple answers.

The community on Reddit /r/SEO loved the idea on [our post](https://www.reddit.com/r/SEO/comments/1brs54o/quick_hack_for_a_backlink_from_google/) so we thought it is great to share here.

If you want to see more tricks on getting backlinks for your domain, write in the comments so we can post more.

Other wise check our other articles:
[PHP > JS on Backend](https://dev.to/evotik/we-write-javascript-all-day-long-but-php-wins-on-backend-1pg)
What Is Serverless And Why Should You Use Serverless services?
Tags: serverless, cloudcomputing, lambda, aws
Published: 2024-03-31 17:23:13

The term serverless was made popular by AWS’s Lambda service. Lambda is a serverless compute service offered by Amazon which lets you run server code without managing servers.

Serverless does not mean there no servers, only that you do not need to manage the servers yourself.

This abstraction of the server layer makes it very powerful for the majority of apps today. Most apps we use nowadays perform a lot of ephemeral transactions...

Read full article for free here: 

https://medium.com/@atomicsdigital/what-is-serverless-and-why-should-you-use-serverless-services-71ac439f9560?sk=94c12fb3292227c272ca6e046bb955e1
SQL JOINS
Published: 2024-03-31 17:02:48

Hey, Data Analysts! Every Data Analyst needs to master SQL JOINS. Need help? I've got you! Here's a breakdown of SQL joins and their uses: -------------------------------------------------------------------------- 
➡️ Inner Join: The meeting point of two tables based on a shared key. It returns rows with a match in both tables, effectively the 'intersection' in a Venn diagram of datasets.
 ➡️ Left Join (Left Outer Join): This join fetches all records from the 'left' table and the matched records from the 'right' table. If there's no match, the result is NULL on the right side. ➡️ Right Join (Right Outer Join): It's the opposite of a Left Join. All records from the 'right' table and the matched records from the 'left' table are returned. No match? You'll get NULL on the left.
 ➡️ Full Outer Join: Imagine combining the powers of both Left and Right Joins. This join returns all records when a match is in the left or right table. Unmatched records from both sides will appear, with NULLs filling the gaps. 
➡️ Left Anti-Join: This lesser-known join fetches rows from the left table with no corresponding match in the right table. It's like saying, "Tell me what's exclusive to the left table."
 ➡️ Right Anti-Join: The mirror image of the Left Anti-Join. It retrieves rows from the right table that find no echo in the left table.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/birp622mjyfreejpvau8.gif)
Browser shorts - HTML Drag and Drop API
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-31 17:01:34

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
<!-- Explain a browser API or feature in 256 characters or less. -->

HTML drag and drop API helps us to create draggable elements in webpage with events like dragstart, drag, dragenter, dragleave, dragover and drop. Elements in the pages can be made draggable using draggable attribute. We can set the drop targets for receiving items and custom drag images can be set.



## Additional Context
<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->


1. [Drag and Drop API - MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)
Learning AWS Day by Day — Day 22 — VPC Peering and Endpoints
Tags: aws, vpc, cloud, cloudcomputing
Published: 2024-03-31 16:56:17

Exploring AWS !!

Day 22:

VPC Peering and VPC Endpoints

VPC Peering:

Network connection between 2 VPCs which enables traffic flow between them using IP addresses.

Peering connection can be created between VPCs in same or different accounts and between VPCs in same or different region.

Scenarios:

2 VPCs (with same network) peered with 2 subnets in same VPC.

2 VPCs peered with specific subnets.

1 VPC peered with 2 VPCs using longest prefix match.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60baydphuzrj1yihml5i.png)

VPC Endpoints:

A VPC enables you to privately connect your VPC to supported AWS services and VPC endpoint services powered by AWS Privatelink without requiring an internet gateway, NAT device, VPC connection or AWS Direct Connect connection.

So, VPC Peering can be avoided.

Gateway Endpoint: can be used to connect to AWS services and is located outside subnet..

Interface Endpoint: located inside subnet of VPC, it uses Privatelink where route tables aren’t required.
Strategies for Cost Optimization in Container Deployment in AWS
Tags: aws, containers, devops, cost
Published: 2024-03-31 16:52:55

Embracing cost optimization strategies for container deployment on AWS transcends traditional cost-cutting measures, evolving into a nuanced art of maximizing resource efficiency without compromising on performance or scalability. To navigate this landscape with a fine ship, businesses are encouraged to meticulously tailor their container configurations. In configuring container workloads on AWS, there are several best practices to adhere to, which I will share with you.


**Right-sizing**, a practice that involves configuring containers with just the right amount of resources, prevents overspending on underutilized assets, striking a perfect balance between cost and capability.


Furthermore, the **strategic utilization of AWS Spot Instances** 
emerges as a cornerstone for cost optimization. By leveraging these instances for suitable workloads, businesses can tap into the vast pool of unused AWS capacity at significantly reduced rates, achieving cost savings while maintaining the desired performance levels.


**Optimizing resource utilization** is another critical strategy, ensuring that every allocated resource is used to its fullest potential. This involves scrutinizing resource usage patterns and making informed adjustments to prevent waste, thereby fostering a more cost-efficient deployment environment.


Lastly, the implementation of **auto-scaling** policies stands as a testament to the dynamism of AWS's container services. These policies enable businesses to automatically adjust their container resources in response to fluctuating demands, ensuring that they are paying only for what they use when they use it. This dynamic scalability not only aids in managing costs effectively but also in maintaining an agile and responsive operational framework.


By adopting these strategic approaches to cost optimization, businesses can significantly enhance their container deployment efficiency on AWS, paving the way for a more cost-effective, scalable, and performance-driven digital infrastructure.
Learning Svelte & SvelteKit
Tags: svelte, sveltekit, webdev, vercel
Published: 2024-03-31 16:43:01


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdg3bg3paax4ppuy61d7.png)

During my [Northcoders](https://www.linkedin.com/company/northcoders/) software bootcamp, a mentor introduced us to the State of JS survey, an annual survey that measures the preferences of JavaScript developers, exploring widely used frameworks, favoured frameworks, and those gaining popularity. At the time, we were learning React.js, which I found somewhat challenging. Despite React’s popularity and widespread usage, the survey revealed that another framework, [Svelte.js](https://svelte.dev/), scored higher in terms of developer preference and popularity.

Intrigued by this finding, I dedicated some time after completing the bootcamp to learning basic Svelte and used it to build my first portfolio site. I found it much easier to pick up compared to React, and it was a joy to work with. However, my foray into working with Svelte was short-lived as I landed a job and became busy with the responsibilities that came with it.

Now, with the goal of building a few Micro-SaaS projects, I recognise the need to refresh my front-end knowledge. I have decided to dive deeper into Svelte.js to further my understanding. To start, [I’m following a tutorial by Vercel](https://vercel.com/docs/beginner-sveltekit) that covers all the fundamental concepts of SvelteKit which is the equivalent of Next.js for Svelte — once I have a solid foundation I’ll begin building.

Throughout my learning journey, I’ll write posts / articles on the key concepts of Svelte / SvelteKit as a means of consolidating my knowledge. If you’ve never used Svelte before, I highly recommend exploring it. It’s very easy to set up and most importantly you’ll be pleasantly surprised by its unique (and straightforward) approach to reactivity.

In my next post I’ll cover more about how Svelte handles reactivity. If you have used Svelte, let me know your thoughts in the comments!
Finding keywords with the Google autocomplete API
Tags: api, javascript, seo, webdev
Published: 2024-03-31 16:36:09

Hey! Ever found yourself drowning in a sea of keywords, desperately searching for that perfect phrase to boost your project's visibility? I hear you. That's why I rolled up my sleeves and built something to make our lives a whole lot easier – [Keyword Quill](https://keywordquill.com).

**Crafting a Solution**
So, picture this: late nights, endless cups of coffee, and frustration mounting as I struggled to streamline my keyword research process. It hit me – there had to be a better way. And thus, Keyword Quill was born.

**How Keyword Quill Works**
Think of Keyword Quill as your trusty sidekick in the quest for the ultimate keyword. With just a few lines of code, you can tap into Google's autocomplete suggestions in seconds. No more manual digging, no more guesswork – just precise, real-time insights at your fingertips.

**How Keyword Quill Works**
Keyword Quill is more than just an API – it's a game-changer for your keyword research workflow. Here's how it works:

Simple Integration: With just a few lines of code, you can tap into Google's autocomplete suggestions in seconds. Our API is designed with simplicity in mind, making it easy to integrate into any project, big or small.

Real-Time Insights: Say goodbye to outdated keyword data. Keyword Quill delivers real-time autocomplete suggestions from Google, ensuring that your keyword strategy is always up-to-date and relevant.

Customization Options: Tailor your queries to specific locations and languages, allowing you to gather insights that are tailored to your target audience. Whether you're targeting a local market or a global audience, Keyword Quill has you covered.

Sign up today and receive free credits to kickstart your exploration of Keyword Quill. Let's redefine how we approach keyword discovery.
React Custom Hook: useDidMountEffect
Tags: react, webdev, typescript, javascript
Published: 2024-03-31 16:19:27

In React development, managing side effects is crucial to building efficient and responsive applications. While the built-in use effect hook is a powerful tool for handling side effects, there are cases where you may want to skip the effect during the initial render and only execute it on subsequent updates based on specific dependencies.

This is where the **useDidMountEffect** hook comes into play. This custom hook is designed to provide precise control over when side effects are executed, helping you optimize your React components and improve their performance.

Find out how to create it through this comprehensive guide -> https://www.seeratawan.me/blog/react-custom-hook-use-did-mount-effect/
Let Your Home Be Unique
Published: 2024-03-31 16:09:21


**[Abraham’s Solutions ](url)**specializes in offering Florida homeowners the highest quality house remodeling services and general contractor expertise. We believe the decision to undertake a home renovation should come with excitement, not anxiety. Guiding you through a stress-free process that begins with a design and ends with a more beautiful home is a goal we take seriously.




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qutxx5ymr75vw0hy5xqy.png)

For more than fifteen years, we have offered our clients a wide variety of options for designing and realizing the space they have always hoped to live in. Our professionals have more than twenty years of experience as general contractors, remodeling contractors, and home improvement professionals. We stand by the quality of our work and our commitment to providing the best home improvement services available.

From ideas for small bathroom remodeling projects to improved driveways and exterior remodeling, or full house plumbing jobs and complete home renovations, we can help you create the dream home you have always envisioned. We strive to be the home renovations’ company Florida can count on. Get in touch with us today to start turning your remodeling ideas into a reality!
Day 9 of #100DaysOfCode | 31-03-2024
Tags: 100daysofcode, cpp, dsa
Published: 2024-03-31 15:53:44

## What I learned?

I learned the following topics:

- Moose’s Voting Algorithm

## What I developed/solved?

- Solved leetcode problem 169. Majority Element usiing *

## Code snippet/Screenshots/notes

1. Leetcode 169. Majority Element

- Problem Statement: Given an array `nums` of size `n`, return *the majority element*.
- The majority element is the element that appears more than `⌊n / 2⌋` times.
- Example.

```
Input: nums = [3,2,3]
Output: 3
```

```
Input: nums = [2,2,1,1,1,2,2]
Output: 2
```

- Better solution using Hashmaps

```cpp
int n = nums.size();
int ans = 0;  
int appears = (n/2);
map<int, int>m;
//store every element's occurance
for(int i = 0; i<nums.size(); i++){
    m[nums[i]]++;              
}

//element occurs more than (n/2) times, will be our final answer
for(auto it:m){
    if(it.second > appears){
       ans = it.first;
    }
}
return ans;

//Time complexity: O(n) + O(n*logN)
//Space complexity: O(n) --> worst case when all elements are unique
```

- Optimal Solution using Moose’s Voting Algorithm

```cpp
class Solution {
public:
    int majorityElement(vector<int>& nums) {
        int n = nums.size();
        int element = nums[0];
        int cnt = 1;
        for (int i = 1; i < n; i++) {
            if (nums[i] != element) {
                cnt--;
                if (cnt == 0) {
                    i++;
                    element = nums[i];
                    cnt = 1;
                }
            } else {
                cnt++;
            }
        }
        
        cnt = 0;
        for(auto it:nums){
            if(it == element){
                cnt++;
            }
        } 

        if(cnt > (n/2)){
            return element;
        }
        else{
            return -1;
        }
    }
};

// Time complexity: O(n) + O(n) ~ O(2*n) = 0(n)
// Space Comlexity: O(1) as we are not using extra space
```

- Boyer-moore Voting Algorithm

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpqg0ghampy1bxghacm5.jpeg)
Routine Automation
Published: 2024-03-31 15:42:00

[Routine Automation](https://routine-automation.com/) is an innovative company that specializes in the development and implementation of Salesforce solutions. Their team of experts works to create customized solutions that meet the needs of each client, providing a full cycle of services - from consulting and analysis to product development, implementation, and support. They work with companies of all sizes and industries, from startups to large corporations. Looking at their website, their goal is to provide the best solutions and ensure our clients' success in the digital era. Contact Routine Automation to open up new opportunities for your business and succeed in the online world.