Patrick Hammond, Author at ProdSens.live https://prodsens.live/author/patrick-hammond/ News for Project Managers - PMI Tue, 25 Jun 2024 11:20:11 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 https://prodsens.live/wp-content/uploads/2022/09/prod.png Patrick Hammond, Author at ProdSens.live https://prodsens.live/author/patrick-hammond/ 32 32 How to Create a B2B SEO Strategy in 9 Steps https://prodsens.live/2024/06/25/how-to-create-a-b2b-seo-strategy-in-9-steps/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-create-a-b2b-seo-strategy-in-9-steps https://prodsens.live/2024/06/25/how-to-create-a-b2b-seo-strategy-in-9-steps/#respond Tue, 25 Jun 2024 11:20:11 +0000 https://prodsens.live/2024/06/25/how-to-create-a-b2b-seo-strategy-in-9-steps/ how-to-create-a-b2b-seo-strategy-in-9-steps

If I were to name one thing that I’ve learned throughout the years as a content marketer, it’s…

The post How to Create a B2B SEO Strategy in 9 Steps appeared first on ProdSens.live.

]]>
how-to-create-a-b2b-seo-strategy-in-9-steps

If I were to name one thing that I’ve learned throughout the years as a content marketer, it’s that strategy always comes first.

Otherwise, you face the risk of chaos. You either end up writing on random topics that don’t fit your intent and personas well, cannibalize your existing SEO keywords, or run out of ideas.

→ Download Now: SEO Starter Pack [Free Kit]

Also, considering AI and Google’s bold modifications of their search engine, you can’t operate without a solid plan in today’s landscape.

In this piece, I’ll tell you how you can create an SEO B2B strategy and share tips from B2B marketing experts.

Table of Contents

The key element of every B2B SEO strategy is selecting keywords that will attract theright target audience, and choosing the appropriate content format for them, be it a landing page, blog, case study, etc.

Ultimately, it comes down to knowing your target audience, including their needs and behaviors, and creating content that addresses those needs — all the while optimizing for the search engines.

B2B vs. B2C SEO

If we look at the SEO ranking mechanics in Google, the same guidelines apply to B2C and B2B.

It refers to things like URL structure and page loading time, regardless of whether you sell to consumers or businesses. But if you look beyond search engine technicalities, that’s where the similarities end.

For starters, B2B audiences vary from consumers when it comes to why they’ve landed on your site. It’s not about finding a service or product that fits their individual goals: they’re acting as a business representative.

Even if they would like to use your solution, there might be other decision-makers at the company. This also means it’s harder to put your B2B marketing personas into segments than it is in B2C.

For example, a supplement store could classify clients into wide groups like “pregnant individuals” or “breastfeeding individuals.”

The former would probably want to buy prenatal vitamins, while the latter would focus on supplements that help them recoup post-pregnancy.

B2B SEO strategy; differences between B2C and B2B SEO.

In B2B, however, you need to dive into firmographics. You’ll consider things like industry, business structure, or even intricate details like how much funding or revenue the company generates.

Then, there’s also the case of the keywords you want to rank for. Since you’re going after a wider customer group, in B2C, you can try to rank for terms with tens or hundreds of thousands of searches each month.

In B2B, the volumes are much lower — but that’s okay since you’re catering to a more specific need. Even one conversion for a B2B service or product could return the investment.

Last but not least, SEO doesn’t happen only on Google anymore — it also applies to YouTube, Instagram, and other social media channels.

For B2C, platforms like Instagram, TikTok, and YouTube can all be a great place to create content. For B2B, however, it might be worth using YouTube or X since that’s the places their business personas frequent.

However, they also might decide that video content shouldn’t be at the core of their strategy and focus on on-site SEO instead.

How to Build a B2B SEO Strategy

Let’s get down to practice! Here are nine steps you can take to build an effective B2B SEO strategy.

1. Run keyword research.

The first step is doing comprehensive keyword research. If you know your target audience inside out, this shouldn’t be too difficult.

Build your search around their problems and needs. This will help you avoid selecting completely irrelevant keywords.

There are plenty of tools that you can use like Ahrefs, Semrush, and Keysearch — I use the latter. Let’s say you work for a software development agency. Here’s a keyword search you could run.

B2B SEO strategy; running a content gap to spot new keywords

Image Source

Don’t get discouraged by low volumes.

Although you might get less traffic from a keyword like “best software development agency” (50 search volume), the search intent indicates that someone is actively looking for a company they could work with.

If the article converts, the content you create around this keyword will quickly pay off.

B2B SEO strategy; results from a Google search on ‘best software development agency’

Image Source

Pro tip: You can also take advantage of tools like HubSpot’s SEO Marketing Software to help you craft your strategy.

2. Run a competitor analysis.

Whenever I work on a B2B SEO strategy for a client, I take a deep dive into what their competitors are doing.

I not only look at the topics they cover and the content formats they use, but I also run a content gap analysis. This lets me spot topics that my client hasn’t written about yet or doesn’t rank well for.

While this might sound like a lot of work, you can use an SEO tool like Keysearch to get your results in a few seconds.

Below I compared two software development agencies, and got a list of keywords that Netguru doesn’t rank for. I could use them as inspiration for coming up with new topic ideas.

B2B SEO strategy; a comparison of keywords two competitors rank for

Image Source

3. Focus on search intent.

Think of each phrase in your shortlisted keywords as a separate story. Who’s tapping it into the search bar, and what do they expect to see in the search results?

As you’ll quickly notice, some keywords are general (i.e., indicate that the searcher is just learning about a topic), while others hint that they’re already considering solutions like yours.

Eva Miller, VP of Marketing at Digital Silk, is a huge advocate for search intent analysis. She used an example from her career where despite having rich and high-quality keywords, they weren’t getting ranked.

“It was then that I realized we were neglecting the ‘Intent’ part of SEO,” says Miller. “We started analyzing our prospect‘s search intent thoroughly — are they looking for information, or are they ready to subscribe or make a purchase? This change led us to optimize each piece of content based on the different stages of our customer’s journey.”

The results? Miller says they were far beyond just ranking.

“We were ranking for keywords that our prospects were actually searching for, leading to an 80% increase in organic traffic and a 30% increase in the lead conversion.

Since then, search intent has remained a non-negotiable element in the company’s SEO strategy.

4. Decide what types of assets you want to create.

When you have keywords with their search intent written down, you can ask yourself the following questions.

What type of content should I use each of them for? Would it fit a blog post, or maybe an asset further down the funnel, like a case study or landing page?

This strategy worked for Jacob Kalvo, CEO at Live Proxies. “Several years ago, we identified a significant void in our content that appealed to enterprise-level clients, who wanted more nuanced and granular information as to what our products could do for them,” he says.

From there, they started “building in-depth case studies that demonstrated what we could do, complete with tangible metrics and results.” Kalvo says that one of their case studies “increased our organic traffic by 25% and produced a 15% lift in lead generation in the first quarter of publication.”

Kalvo shares: “This data-backed storytelling approach has been a true lynchpin in our SEO strategy, helping to get high-value B2B prospects who are ready to engage.”

5. Optimize your landing pages.

Since this is where leads become your customers, you should select specific, high-intent keywords that relate to your product features or services, and use them in your copy.

These will often be long-tail keywords like “CRM for life science companies,” as they indicate someone’s awareness level.

Optimizing your LP also relates to structure, of course. Make sure you create sections and relevant headings, and avoid clutter.

Your ultimate goal is to convert clients, but your primary goal should be to keep them engaged on your site for as long as possible.

On that note, I want to share a piece of personal advice: remember that it’s not the keywords that sell your product or service – it’s the copy on the landing page.

So, when using SEO phrases, make sure they’re all incorporated into the copy naturally.

6. Create content clusters.

Pick an area you’d like to cover in-depth — writing about everything won’t do you any good. You need to build topical authority, and content clusters are the perfect solution.

They’ll help you achieve two things: 1) present yourself as a topic expert, and 2) create a nice content architecture. Both of these will positively impact your SEO rankings (and please your readers).

Each content cluster includes long-form content — we can call it a “guide” or a “pillar page” — that all articles from the cluster link back to.

This approach works for my clients and other brands like Making That Sale. Howard Tillerman, the company’s CMO, says they use long-form content to dominate specific industry keywords.

Instead of scattering our efforts, we created a comprehensive, 5,000-word guide on the topic [enterprise cloud solutions],” says Tillerman.

We started by identifying subtopics through keyword research, pinpointing long-tail keywords our audience frequently searched. Our guide covered everything from benefits, implementation strategies, and case studies, to future trends in enterprise cloud solutions.”

“We also broke down the guide into smaller blog posts, each interlinked to the main guide, creating a robust internal link structure,” Tillerman continues.

Their results were impressive.

In just three months the guide ranked on the first page of Google for “enterprise cloud solutions,” bringing in over 5,000 organic visits per month. Additionally, the overall site traffic increased by 30%, and they saw a 25% boost in qualified leads.

The long-form content strategy not only improved the company’s search rankings — it also established them as a thought leader in their industry.

7. Build a blog.

If you want to bring in organic traffic, starting a blog should be a no-brainer.

Keywords with informational intent have the highest search volumes, and the best way to tackle those is with educational articles.

But blogging isn’t just about driving traffic. Creating high-quality content will help you become the domain expert and build credibility. This should translate into more conversions, as people tend to buy from brands they trust.

8. Work on your domain authority.

The topic of domain authority (DA) — or domain rating, as Ahrefs calls it — has been a subject of hot debate for many years.

If you’ve never heard of it, it’s a metric that ranks websites on a 0 to 100 scale.

The more established the website (i.e., the more keywords it ranks for and the more backlinks it has), the higher its score – and, possibly, its position in search results.

To address the elephant in the room: we don’t have an official confirmation from Google that domain authority directly affects SEO.

But there’s no doubt that it does affect your B2B SEO strategy at least indirectly, since you can weigh your chances against competitors.

If you have a similar or higher score than others who want to rank for a keyword, then you have a real possibility of winning in top results.

How do you build your domain authority? More on that later!

9. Check your website’s performance metrics.

Last but not least, don’t forget about checking the technical side of your website — if there’s a usability glitch like a broken link, or your landing page is loading very slowly, your strategy might not work.

What I recommend doing regularly is checking for any URLs with a high bounce rate. This is always a bad omen. Even if it’s not due to a technical issue, it indicates that there’s a problem you need to address.

If you aren’t a technical SEO specialist like myself, don’t worry. There are a few metrics you can check yourself by looking at Google’s Core Web vitals.

These will tell you how fast your page loads (LCP), how users respond (INP), and how stable your layout is.

Tips for Creating a B2B SEO Strategy

Below, I’ve rounded up some of the best tactics you can use to boost your SEO ranks as a business-to-business company. Let’s dive in.

1. Create product-led, mid-funnel blogs.

It’s very tempting to build your SEO strategy primarily around the top-of-the-funnel keywords, as they have a higher search volume.

The downside of such an approach is super high competition and lower conversion as the intent is informational, meaning people aren’t ready to buy just yet.

A much more effective strategy is to build your content (at least when you’re starting out) around action-oriented keywords that your product can directly solve for. This is what Eric Doty, Content Lead at Dock, does.

He says: “We’ve had a lot of success with product-led, mid-funnel blogs where our product can directly solve the searcher’s problem.

For example, our best-performing articles are topics like ‘How to create a stand-out RFP response’ and ‘Crafting a winning sales price quote’ where we can show step-by-step examples of how to do that in Dock.”

2. Analyze customer requests to create content that answers those questions.

The best way to build an effective strategy is to, well, ask at the source.

I agree with Veruska Anconitano, SEO Consultant at IAmVeru, who told me that analyzing customer support requests is a great way to build a relevant B2B SEO strategy.

She says that it helps her brand create content that answers customer questions:

“I worked with a software company inundated with support calls about a difficult-to-use feature. Analyzing these calls, I pinpointed the common issues and created comprehensive guides, how-to videos, and a pillar page to address these challenges.

This approach led to a 25% reduction in support queries and a 50% increase in organic traffic within three months.”

Anconitano also says that the content became a valuable evergreen resource for sales and customer success teams, which is a nice touch.

Lee Moskowitz, Director of Growth Marketing at SmartPass, has a similar tactic:

“I added a field to our demo form that asks people what problem they are looking to solve with our solution. Not only does this help my AEs provide a more personalized demo, but it tells me why they visited our site, what they care about, and what they are searching for.”

“I then look at the submissions for any trends and identify common search terms and similar phrases. HubSpot’s advanced filters make custom reports for analyzing all the submissions easy.

From here, I perform keyword research to see what the low-hanging fruit are, such as which terms have the highest volume and lowest keyword difficulties,” Moskowitz shares.

3. Determine which keywords you rank for already.

You should continuously track the keywords you already rank for. You can either check in Google Search Console or any other SEO tool.

Before I create an SEO strategy, I always ask my clients for a keyword export. This helps me avoid content cannibalization as I know which keywords to avoid using.

Also, if I find a keyword with good traffic potential, but with a low ranking, I can update the content or create a completely new piece to boost rankings.

4. Focus on thought leadership.

I’m sure you’ve heard of the acronym E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness). These are the principles that Google uses to check if the published content is of high quality.

The days of producing copycat content are gone, and with AI being able to write decent articles, the content bar is set even higher.

In fact, our 2024 State of Marketing Report found that only 6% of marketers use AI to create content — if ever, they only use it to source ideas but bet on human writing.

To rank, you have to produce excellent quality articles that demonstrate expertise and experience.

Whenever I write a new piece, I make sure to include unique insights, which I gather either from the brand I write for (I interview them) or through expert outreach. For the latter I use Connectively, Help a B2B Writer, or SOS.

Collecting expert insights using these platforms has become a bit challenging, as a lot of people use ChatGPT to generate answers.

So if you decide to use them, I recommend adding a disclaimer to your query saying that all answers generated by AI will be discarded, and insights that include statistics and personal experience will be prioritized.

This has helped me collect much better input.

5. Build relationships with other brands.

Partnering up with other brands in a complementary field is also a tried-and-tested tactic.

For example, Dr. Gregory P. Gasic, Co-Founder at VMeDx, hit the SEO jackpot by building relationships with trusted medical journals and educational platforms.

“One specific experience stands out,” Gasic says. “We collaborated with the Harvard Review of Psychiatry on a comprehensive article about virtual medical assistance in psychiatric care.

This partnership led to a notable spike in our website‘s traffic — an increase of 40% within the first month after publication. The credibility of the Harvard Review also boosted our site’s domain authority significantly, making it easier for potential clients to find us through organic search.”

6. Build SEO through off-site tactics.

As you might have noticed, backlinks stand out from many other SEO tactics, as they don’t involve work on your website — it circles around external work.

For as long as domain ratings exist, I will remain a strong believer in the power backlinks can have for B2B sites.

This comes from my own experience, when I spent three months answering queries from journalists seeking sources nearly every day.

Building backlinks from high-quality websites was one of my OKRs at a company where I worked.

I made sure each answer was of high quality, and when a question was beyond my expertise, I sourced insights from other employees at the company.

As a result, in just ten weeks I got 18 backlinks from websites with a domain rating of 75 or higher. This has helped the company grow its own DA and boosted their content’s visibility in Google.

Another tactic I can recommend is pitching guest posts to the sites you’d like to get a backlink from. The brand I worked for had a high domain rating, so I received multiple requests from writers every week.

However, I always accepted the ones that offered genuine opinions and had a unique angle. From what I’ve been seeing on X and writer forums this year, many editors are always open to guest post opportunities, so it’s worth giving it a try.

7. Run data-driven content audits regularly.

Last but not least – your B2B SEO strategy shouldn’t be set in stone. Treat it as a living organism, and update it regularly. The best way to make sure that your strategy is still relevant is to run content audits.

Cecilien Dambon, an SEO & Growth Advisor for Spark Traffic, has shared how implementing a comprehensive, data-driven content audit has consistently delivered tangible results for their clients.

They had a customer whose organic traffic had become stagnant, and their website had shown negligible engagement levels relative to some of the regularly published-turned-ineffective content.

While the company produced content on an ongoing basis, it did not make the desired impact on lead generation volumes.

What did Spark Traffic do? They ran a comprehensive content audit and analyzed the data regarding traffic, bounce rates, time on page, and conversion rates. Here is how they went about it.

“We divided our existing content into categories: high-performing, average, and low-performing pieces. We used it to assess the available engagement metrics and the conversion data.

We updated and repurposed high-performing pieces to ensure they didn’t lose their credibility vis-à-vis new, updated data,” explains Dambon.

“For average content, we conducted on-page SEO improvements and included new data and insights in the content. For low-performing content, we de-indexed it and consolidated it with other pieces or even removed it, if need be.

We completed the data-driven keyword research to find and identify new opportunities for the integration of targeted keywords. This provides a seamless blend with the audience’s search intent,” says Dambon.

And the outcome? Within six months, their client got a 45% increase in organic traffic and a 30% rise in lead generation from the website.

The revamped content attracted more visitors, and improved user engagement and conversions on the site.

A Good B2B SEO Strategy is Agile

Reaching a high position in search engines requires you to juggle between tried-and-tested methods and experimentation.

The latter is a great idea, especially now that no one truly knows where Google will go with their algorithm changes — or how much AI will affect the field.

Speaking of AI, the bar for creating SEO content is set at the highest level ever. You can’t rely on desk research only – you need to enrich it with real-life stories and unique perspectives, just like I have done while working on this piece.

Finally, remember to check your results and update your strategy continuously.

This way, you’ll always be able to recalibrate it around what works for your business.

SEO Starter Pack

The post How to Create a B2B SEO Strategy in 9 Steps appeared first on ProdSens.live.

]]>
https://prodsens.live/2024/06/25/how-to-create-a-b2b-seo-strategy-in-9-steps/feed/ 0
Finding what iterator to use and when from a beginner! https://prodsens.live/2024/05/30/finding-what-iterator-to-use-and-when-from-a-beginner/?utm_source=rss&utm_medium=rss&utm_campaign=finding-what-iterator-to-use-and-when-from-a-beginner https://prodsens.live/2024/05/30/finding-what-iterator-to-use-and-when-from-a-beginner/#respond Thu, 30 May 2024 05:20:09 +0000 https://prodsens.live/2024/05/30/finding-what-iterator-to-use-and-when-from-a-beginner/ finding-what-iterator-to-use-and-when-from-a-beginner!

Hello, my name is Kaleb and I’m a beginner at coding. I am an active student at Flatiron…

The post Finding what iterator to use and when from a beginner! appeared first on ProdSens.live.

]]>
finding-what-iterator-to-use-and-when-from-a-beginner!

Hello, my name is Kaleb and I’m a beginner at coding. I am an active student at Flatiron School and our first phase is javascript. Learning arrays and objects was easy, but adding them together and iterating over them was extremely difficult. I will be going over some the iterators as I understand them and give detailed examples. When I was doing research it was difficult to understand which to use and why.

The iterators I will be going over are:
.forEach()
.map()
.find()
.filter()

Starting with forEach() this is an iterator that does something for each value or object in the array. This is an iterator we learned with little value in the real world from my perspective. forEach is a loop as well, it can be used to console log elements in the array like the example below.

numberedArray = [1,2,3,4,5,6,7,8,9,10]

numberedArray.forEach(function (number) {
console.log(“What number is being logged” + number);
});

This will console.log:
What number is being logged1
What number is being logged2
What number is being logged3
until it reaches 10 and then will stop.
this can be useful to see what values you are getting or for debugging. forEach is not something I personally would learn due to .map outshining it, forEach returns the same array but changed where .map returns a new array.

the map() definition that I believe explains this very well is: The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

What does this actually mean? how does it work? what does it look like?

first, we should break down the definition it is a method that creates a new array populated with results from the provided function on EVERY element. exactly like the forEach iterator it goes through the [1-10] and does something on everyone and provides a NEW array.
Second let’s see it in use to wrap our head around when and why we would use it. For example, We only want the last names of the guests staying at the hotel we run. our data might look like this:

let guests = [
{ firstName: ‘Bob’, lastName: ‘Joeseph’},
{ firstName: ‘Tracy’, lastName: ‘Miller’},
{ firstName: ‘Siera’, lastName: ‘Allen’}
]

const lastNamesOfGuests = guests.map(firstAndLastNames => firstAndLastNames.lastName)
console.log(lastNamesOfGuests)

it will return: [ ‘Joeseph’, ‘Miller’, ‘Allen’ ]

Let’s walk through it, We set a variable name for guests that is an array of objects and those objects have the first and last names of our 3 guests. We are setting lastNamesOfGuests to equal our variable guests and calling .map then we are passing in the objects it is going to each one and grabbing the .lastName and implicitly returning the strings inside a new array.

Now that we understand both of those we are finishing it up with my favorite combo the .find and .filter iterators and personally my favorite to use. .find is very easy to understand its job is to find something and return it once found, if nothing is found .find returns undefined and filter returns a new array with no elements looking like []. The difference between .find and .filter is once find gets a match it will stop looping and return that element. in our example, if we wanted all the fruits and vegetables starting with the letter B. Find will only return the banana in our example below.

let fruitAndVegetables = [‘apple’, ‘banana’, ‘broccoli’, ‘carrots’]

const namesWithB = fruitAndVegetables.find(fruitAndVeg => {
return fruitAndVeg.toLowerCase().startsWith(“b”)
})
console.log(namesWithB)
This will return: banana

small explanation on why I used .toLowerCase() and .startsWith(), toLowerCase makes all of the elements lowercase making it so if banana was a capital B it would still start with lowercase b. making our search case insensitive. the startsWith is very self-explanatory but if it starts with what is in the () it will match and return those elements.

.filter is very similar to .find but has some key differences. The filter offers more than 1 match and returns a new array with the match from the search. an example will show you the differences very nicely. in our example, we changed one word and got both bana and broccoli. we changed find to filter. find returns the first match and stops the loop, filter goes through and makes a new array and populates it with all the matches from the elements passed in.

let fruitAndVegetables = [‘apple’, ‘banana’, ‘broccoli’, ‘carrots’]

const namesWithB = fruitAndVegetables.filter(fruitAndVeg => {
return fruitAndVeg.toLowerCase().startsWith(“b”)
})
console.log(namesWithB)
This will return: [ ‘banana’, ‘broccoli’ ]

// used the definition for map()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

The post Finding what iterator to use and when from a beginner! appeared first on ProdSens.live.

]]>
https://prodsens.live/2024/05/30/finding-what-iterator-to-use-and-when-from-a-beginner/feed/ 0
Configuring Storybook in Your Nuxt Project https://prodsens.live/2024/03/29/configuring-storybook-in-your-nuxt-project/?utm_source=rss&utm_medium=rss&utm_campaign=configuring-storybook-in-your-nuxt-project https://prodsens.live/2024/03/29/configuring-storybook-in-your-nuxt-project/#respond Fri, 29 Mar 2024 14:20:56 +0000 https://prodsens.live/2024/03/29/configuring-storybook-in-your-nuxt-project/ configuring-storybook-in-your-nuxt-project

Practical Tutorial: Configuring Storybook 8 in Your Nuxt 3 Project In this tutorial, you’ll learn how to integrate…

The post Configuring Storybook in Your Nuxt Project appeared first on ProdSens.live.

]]>
configuring-storybook-in-your-nuxt-project

Practical Tutorial: Configuring Storybook 8 in Your Nuxt 3 Project

In this tutorial, you’ll learn how to integrate Storybook into your existing Nuxt project for efficient UI development. Storybook allows you to build, test, and document individual components in isolation, making it an invaluable tool for frontend developers.

Step 1: Install Storybook in Your Nuxt Project

Start by initiating Storybook in your Nuxt project. Open your terminal and run the following command:

npx storybook-nuxt init

This command will set up Storybook in your project and generate a main.js configuration file.

Step 2: Configure Storybook

Open the generated main.js file. This file contains the configuration for your Storybook instance. Here’s what it looks like:

import type { StorybookConfig } from "@storybook-vue/nuxt";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook-vue/nuxt",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};

export default config;

You can customize this configuration based on your project’s requirements. For example, you can specify additional directories for Storybook to look for stories or include extra addons to enhance functionality.

Step 3: Organize Your Components

Next, organize your Nuxt components and create stories for them. Place your components in the appropriate directories and create .stories.js files for each component to showcase different states and props.

Step 4: Run Storybook

Once you’ve configured your components and stories, it’s time to run Storybook. In your terminal, navigate to your project directory and run the following command:

pnpm storybook dev

This command will start the Storybook server, and you’ll be able to view your components and stories in the browser.

Step 5: Develop, Test, and Document

With Storybook up and running, you can now develop, test, and document your components with ease. Use Storybook’s hot module replacement (HMR) for real-time updates, test your components for different scenarios, and document them for future reference.

Step 6: Additional Considerations

If your Nuxt project includes page routing or server-side components like NuxtImage, you may encounter issues when running Storybook alone. In such cases, it’s recommended to run your Nuxt app using the following command:

npx nuxi dev

Or simply:

pnpm dev

This will ensure that all aspects of your Nuxt project, including routing and server-side components, are properly handled during development.

Conclusion

Congratulations! You’ve successfully integrated Storybook into your Nuxt project and learned how to configure, organize, and utilize it for efficient UI development. Storybook will undoubtedly streamline your development workflow and help you build high-quality UI components with confidence.

The post Configuring Storybook in Your Nuxt Project appeared first on ProdSens.live.

]]>
https://prodsens.live/2024/03/29/configuring-storybook-in-your-nuxt-project/feed/ 0
Power Automate – Scripts with App Scripts https://prodsens.live/2024/03/04/power-automate-scripts-with-app-scripts/?utm_source=rss&utm_medium=rss&utm_campaign=power-automate-scripts-with-app-scripts https://prodsens.live/2024/03/04/power-automate-scripts-with-app-scripts/#respond Mon, 04 Mar 2024 07:20:43 +0000 https://prodsens.live/2024/03/04/power-automate-scripts-with-app-scripts/ power-automate-–-scripts-with-app-scripts

The one thing I really wish Power Automate had was a script action like Logic Apps does. Luckily…

The post Power Automate – Scripts with App Scripts appeared first on ProdSens.live.

]]>
power-automate-–-scripts-with-app-scripts

The one thing I really wish Power Automate had was a script action like Logic Apps does. Luckily there is Office Scripts which is close, it is incredibly powerful but has some limitations and trade offs. But now I have found App Scripts, and they are what I wish Office Scripts were.

If you are not familiar with App Scripts, they are Google Sheets version of VBA. So it kind of went, Google copied VBA to create App Scripts, Microsoft copied App Scripts to create Office Scripts.

spiderman meme

So what’s the main differences, well

  • Its JavaScript not TypeScript (but that’s no big deal),
  • It interacts with Google Sheets, Gmail and Drive instead of Excel, Outlook and OneDrive
  • It has a standalone code editor not part of Sheets/Excel
  • It can load libraries (kind of)
  • It has out of the box connectors
  • It can be called as an API

and the last one is the really cool bit, it means I can create my own custom api 😎 and run any script I like.

jealous meme

Damien Bird did a great demo on how you can use Logic Apps to create your own api and run code. And that solution is definitely better, as you can do everything under Microsoft umbrella. But it’s not that simple, as you need to have Azure resource groups, spn’s, and there is a cost, where as App Scripts are 100% free and require zero effort to set up.

In the blog there’s a couple of things I want to show you:

  1. How to get App Script setup
  2. How to create a API
  3. How to call them in Power Automate/Power Apps
  4. Cool Demos
  5. Trade offs / negatives

1. How to get App Script setup

All you need is a Google account and to go to https://script.google.com/home

app script menu

Here you can manage all of your scripts and create new ones (I love you Office Scripts but this is a lot nicer then going in through a Excel workbook and loading a script file).

When you create a new script you are shown a simple code editor, it has intellisense and is easy to use.

new script

You can also add libraries (other scripts by you or others, there are lists available) and services. Services are like connectors and allow you to interact with Google services. Office Scripts allow you to call any api, but there is no built in authentication with the Graph api.

google services

When you are ready to use it you have to deploy it. You have 4 options to deploy as:

  • Web App – Returns html/json through api calls
  • API Executable – Full API (like a Function App but requires same more complex setup)
  • Add-On – For Google Sheets etc, like Excel Add-ins
  • Library – Scripts that can be called by other scripts

deploy options

We are going to use Web App. Once deployed you are given your url to call the Web App aka api. The deploying is a little different but has its reasons. Everytime you want to deploy a change you have to create a new version, and every version has a unique url. Now this is a pain but can also be a benefit (will explain why later), luckily there is a work around.

You crate at script that forwards everything on to a library. You then publish it once, and then you can edit the library without having to redeploy (as long as you link it as the ‘Head (Development mode)’ version).

library mode

The last thing is who can access the api. If you want to have authentication then we need to register an SPN, so to keep it simple we are just going to leave it open to everyone (you can see a trade off already).
authentication

2. How to create a API

To call the api you need to create either a GET or POST function, sadly there is no PATCH,PUT or DELETE. The only real difference between them in App Scripts is GET has no body, POST does.

function doGet(e) {
//do something
  return something
}

function doPost(e) {
//do something
  return something
}

Lets start with GET. We can add any query we want on our url, if we added ?message=hello world, our e value would be:

{
  "parameters":{
    "message":["hello world"]
   },
  "contentLength":-1,
  "queryString":"message=hello%20world",
  "contextPath":"",
  "parameter":{"message":"hello world"}
}

If we wanted to get the parameter value the key to use is the parameter or parameters.So I would use e.paramete.message to get the value “hello world”.

To return a value we need to convert any objects/arrays to strings. Below I’m just going to send the parameter back, so I turn it into a string.

return ContentService.createTextOutput(JSON.stringify(e.parameter) ).setMimeType(ContentService.MimeType.JSON); 

if its a string you are returning you can remove the JSON.stringify() and just pass the value

It would return the “parameter”:{“message”:”hello world”}.

As I said the POST is similar, just with a body as well as query parameters. So if I sent the following body:

{
    "hello":"world"
}

our e value would be

{
  "contentLength": 25,
  "queryString": "",
  "parameters": {},
  "contextPath": "",
  "postData": {
    "contents": "{rn    "hello":"world"rn}",
    "length": 25,
    "name": "postData",
    "type": "application/json"
  },
  "parameter": {}
}

The body is passed in the contents parameter, in the postData object. As you can see its been turned into a string, so to handle it we would need to use a JSON.parse().

To return a value we use the same function as the GET.

And that’s the basics of the API, for me if its primitive data use GET, for non primitive use POST ie simple string=GET, array=POST.

3. How to call them in Power Automate/Power Apps

Now here’s the fun bit, for use to return data as a JSON App Scripts throws us a curved ball, it doesn’t do a straight return but a 302 redirect return. This means we don’t get our response straight back, we get a header called location that has the redirect URL. We then do a GET request against that redirect URL to get our response.

sequence diagram

Postman and other API clients handle this automatically so you don’t even see it, unfortunately Power Automate doesn’t. The easy way to handle it is 2 http requests, with the second run after set to failed and use the first header.location as it’s url.

run after failed 302 redirect

But this isn’t easy to scale, luckily we can do it in a custom connector. Out of the box we have the same issue, but with a little custom c# code we can get the connector to handle it automatically.

custom code

Download code here.

And that’s it, the rest of it is just standard custom connector stuff, if you want to know more check out this blog

4. Cool Demos

In theory we can do almost anything, the only limits we have is 6 min timeout (vs Office Scripts 2 min), and a few specific ones here.

I’ve got 2 demos to show, a GET and POST.

GET – Regex

I’ve done this one in Office Scripts so nice to compare, we are going to return matches from a string.

We have our 3 parameters

  • String to search
  • Regex
  • Flag

the parameter length is limited, so for long search strings you might need a POST version

The script is very easy, we grab the parameters and pass them into the JavaScript find function.

function doGet(e)
{
  var content = JSON.stringify(myFunction(e.parameter.string,e.parameter.regex,e.parameter.flag));  
  return ContentService.createTextOutput(JSON.stringify(content) ).setMimeType(ContentService.MimeType.JSON); 
}

function myFunction(inputString,rgex,flag) {
  let regEx = new RegExp(rgex, flag);

  let aMatches = inputString.match(regEx);
  Logger.log(aMatches)
  return aMatches;
}

As the response could be more then one match we have to convert the array to a string and then return it.

You can try it here (desktop browser only due to that redirect):

https://script.google.com/macros/s/AKfycbyRspY19D2G92V15YozfF3NTVn32NXE1STz9lQvrg4lmdhbMyYmDgXP0Ec5f92wFjJt7A/exec?string=hello david.wyatt@mail.com&regex=%28%5Ba-zA-Z0-9.-%5D%2B%40%5Ba-zA-Z0-9.-%5D%2B%5C.%5Ba-zA-Z0-9_-%5D%2B%29&flag=g

as it’s in the query we have to URL encode the parameters, so
([ a-zA-Z0-9.
-]+@[a-zA-Z0-9.-]+.[a-zA-Z0-9-]+)
becomes
%28%5Ba-zA-Z0-9.-%5D%2B%40%5Ba-zA-Z0-9.-%5D%2B%5C.%5Ba-zA-Z0-9_-%5D%2B%29_

I then wrap it in a custom connector and it’s all done.

custom connector regex

For the POST demo I want to really show it’s power. I’m going to port the code from my code review tool AutoReview (shameless plug alert, you can get it free here and here).

The API will accept a flow definition as the body, review it and then return a JSON object with key metrics and the actions in an easier to read format. I could have ported the html generation and returned a full report but that’s for another day.

In this case I want to do the library trick so I don’t have to change URL every deployment. The post function simply passed the data and returns what the library returns.

forward script
the GET just returns the version of AutoReview

The library holds all the complex code and is wrapped in a main function which then calls a secondary CreateReview function.

autoreview library

Again I wrap it in a custom connector and add it to a flow. To get the Flow definition I use the Power Automate Admin Get Flow action.

The idea was I could include this in my pipeline deployment.

autoreview flow

Both connectors are available to download here but I can’t promise the API will be up for long, so don’t build it into your workflow (if you really need it reach out to me and might be able to help create something more permanent)

5. Trade offs / negatives

So what’s the downside with this free API, well there are a few.

The first is it’s outside of the Power Platform, so it adds complexity. Complexity to your development (it is probably code not low code), deployments and security. Very few companies have both Microsoft and Google accounts so now your data is flowing out of your network onto, most likely, someone’s personal account.

Second and this is a big one, it blows a hole in your DLP policy. Office Scripts don’t allow http calls when called by a flow, explicit because the environment DLP policy can’t control it. It also can’t control the App Scripts http calls and there is nothing it can do about it. So if the DLP blogged business data going to X/Twitter, the App Script could pass the data. This is where the deployment new URL is a benefit. As in theory you could code review it, and at least no one could make DKP breaking edits without getting new URL approved.

Third is it’s free and from Google. That means you can’t expect great support, and Google could decide to kill it off at any moment (killedbygoogle.com).

Finally, and this is the big one, it’s not secured. You can secure it but that adds much more complexity, and once we are at that level you really should go with Azure Function Apps.

So for me sadly it isn’t a enterprise solution for me (will have to stick with Office Scripts / Function Apps), but I think it definitely still has some use cases:

  • PoC’s
  • Just for fun projects
  • Small low risk solutions

And I think it will be useful for some. I do love it, and if Office Scripts could borrow some functionality, that would be cool 😎

The post Power Automate – Scripts with App Scripts appeared first on ProdSens.live.

]]>
https://prodsens.live/2024/03/04/power-automate-scripts-with-app-scripts/feed/ 0
Contributing to HUGE Open Source Projects https://prodsens.live/2023/10/12/contributing-to-huge-open-source-projects/?utm_source=rss&utm_medium=rss&utm_campaign=contributing-to-huge-open-source-projects https://prodsens.live/2023/10/12/contributing-to-huge-open-source-projects/#respond Thu, 12 Oct 2023 10:25:31 +0000 https://prodsens.live/2023/10/12/contributing-to-huge-open-source-projects/ contributing-to-huge-open-source-projects

Let’s say you want to contribute to a large Open Source project like React or VSCode: are you…

The post Contributing to HUGE Open Source Projects appeared first on ProdSens.live.

]]>
contributing-to-huge-open-source-projects

Let’s say you want to contribute to a large Open Source project like React or VSCode: are you supposed to know how the entire codebase works?

Good news, no you don’t.

But then, how do you even get started? If you feel overwhelmed and don’t know where to start, you’re not the only one. I’m Leonardo, and this video I’ll show you how to approach to a large Open Source project.

here below you can find the script of the video

Pick a project

First of all, start small, seriously. If your expectation is to develop the new greatest feature as your very first contribution, chances are you’re definitely overshooting.

Bonus points if you don’t even know the project. The suggestion here is to start with something you’re familiar with, for example a tool or a library you’re using in your daily job or in your side projects and the reason is quite simple: onboarding will take way less time since you might already know what to expect or how the project works.

To make sure I don’t get misunderstood, I’m not saying you must know everything about the project’s internals. At least having a general idea of what the tool does and actually already using it, will make your life way easier, in particular when it comes to evaluating how tricky an issue could be or what kind of features you could suggest and later implement.

If you never used the software you’re trying to contribute to, you might end up spending a lot of time just to get started and this can be quite frustrating.

Project setup

Now that you decided what project to contribute to, the next step you might expect is to find an issue to work on. Well, wrong answer. The first thing you should do is to read the contributing guidelines. I know, I know, it’s boring, but trust me, it’s important.

If you’re more into practical stuff and less into theory, then the first step can actually be trying to run the project locally. This might not always be as easy as running npm install and that’s why there’s usually a section in the contributing guidelines explaining how to do it. Once again, read the docs.

And here, this is one of the easiest ways to contribute to a project: improving the documentation. How? A really common case is that the documentation is either outdated or missing some information. In this case, you can simply open a PR to fix it.

It might not seem like the most exciting contribution, but think about it. If you can spot a problem during the setup process, this will likely also affect other people. So, by either fixing the setup issue or improving the documentation, you’re actually helping the project and the community behind it. Your tiny documentation update you’re doing today, might be the reason why someone else will be able to contribute to the project tomorrow. This can have such a huge impact!

Follow the rules

But I know you want to write code so let’s get into that.

One of the main reasons to pick a project you’re familiar with is that since you’re already using it, you probably have some ideas about possible improvements or nasty bugs you’d like to see fixed. The time to create an issue has come!

Even if reading the docs is boring, if you haven’t checked the contributing guidelines yet it’s now time to do it. What could go wrong? Well, we’re talking about big projects which are likely receiving dozens of issues every day. The only possible way to handle from the maintainers that is that there are some rules in place, for example there might be a template to follow or at least you should try to provide as much information as possible.
What happens if you do not stick to the rules? Your issue might get closed without even being considered. So, read the docs and follow the rules.

To be clear, it’s kind of accetable to close an issue if it doesn’t follow the rules. It’s just a way to keep the project maintainable in a timely manner.

Can I take the shortcut and create a PR without an issue first? Not necessarily. Some projects have the rule that PRs must be discussed in an issue before being opened. This is to avoid wasting time on PRs that might not go towards the project’s goals or that might not be accepted for other reasons.

Again, it’s all about not making anyone waste their time, it’s sad to have your PR closed after you spent much time working on it, but it’s even worse if this could have been easily avoided by simply following the rules.

If you’re just fixing a typo in the docs, you can probably skip the issue and open the PR directly, but if you’re working on a new feature or a bug fix, it’s better to open an issue first.

The codebase

Let’s get back to our first question: do I need to know how the entire codebase works?

As we already said, the answer is clearly no. Especially in large codebases, more often than not there isn’t a single person knowing everything about the project. It’s just too big, so even people working full time on it, might only know only a portion of that.

As a first-time contributor, you can start by trying to get an overall idea on how things work only in the part of the code you’re interested in. But, how do you even get there?

After 4 minutes talking about this topic, I can finally mention the label “good first issue”. This is a label that is usually applied to issues that are considered a good starting point for new contributors, usually because they do not require a deep knowledge of the codebase and the issue is well explained and scoped. And this is actually what makes an issue a good first issue.

Since at this point you probably have no idea where to look at, the issue description is supposed to guide you through the codebase and explain what you need to know to get started.

If you’re still feeling kind of lost, don’t get frustrated, reply on the issue to inform you’re a new contributor, you’d like to work on that issue and you’re in need of some code pointers. Wait, what is a code pointer? In short, you’re asking for some hints on where to look at in the codebase to get started and this usually is the name of a function or directly the line of code where you should start.

That’s it!

At this point, you have the project running locally, you have an issue to work on and with the code pointer you exactly know where to get started. What’s next? Well, time to write some code!

You will need to fork the repo, clone it locally, do your changes in a separate branch and then create your Pull Request. If you’re not familiar with this process, here’s a video explaining step by step how you can do that with GitHub Desktop, the official GitHub client to work with git.

And with that said, thanks for reading this article and see you next time!

Thanks for reading this article, I hope you found it interesting!

I recently launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/bqwyEa6We6

Do you like my content? You might consider subscribing to my YouTube channel! It means a lot to me ❤
You can find it here:
YouTube

Feel free to follow me to get notified when new articles are out 😉

The post Contributing to HUGE Open Source Projects appeared first on ProdSens.live.

]]>
https://prodsens.live/2023/10/12/contributing-to-huge-open-source-projects/feed/ 0
How Generative AI improves the productivity of Software developers https://prodsens.live/2023/09/27/how-generative-ai-improves-the-productivity-of-software-developers/?utm_source=rss&utm_medium=rss&utm_campaign=how-generative-ai-improves-the-productivity-of-software-developers https://prodsens.live/2023/09/27/how-generative-ai-improves-the-productivity-of-software-developers/#respond Wed, 27 Sep 2023 17:25:43 +0000 https://prodsens.live/2023/09/27/how-generative-ai-improves-the-productivity-of-software-developers/ how-generative-ai-improves-the-productivity-of-software-developers

Image source: https://static.vecteezy.com/system/resources/thumbnails/003/704/390/small_2x/woman-as-programmer-free-vector.jpg Generative AI refers to machine learning models that generate content like imagery, sounds, videos or…

The post How Generative AI improves the productivity of Software developers appeared first on ProdSens.live.

]]>
how-generative-ai-improves-the-productivity-of-software-developers

Image source: https://static.vecteezy.com/system/resources/thumbnails/003/704/390/small_2x/woman-as-programmer-free-vector.jpg

Generative AI refers to machine learning models that generate content like imagery, sounds, videos or text. These text generating models are called LLMs or large language models.

We can prototype LLM powered apps faster with Google’s new suite of Generative AI tools, that is, the Palm API, which gives developers access to latest LLMs hosted in the cloud.

In this blog, we’ll access the Palm API through a browser interface called the Maker suite. Its a browser-based visual interface for prototyping with the Palm API, so we can try it out without downloading or installing anything.

To prototype an LLM, we only need to tell the LLM what we want it to do, in regular old human language. This is called prompting or Prompt Engineering.

Prompting is the art and science of writing input text to guide an LLM to generate the kind of output you want.

In this prompt, we’ll look at various ways prompt engineering can improve productivity of software developers.

1- Can generate code.

To get the code generated in output for a particular requirement, just type what do you want the code to do in the input prompt.

2- Can explain code.

To get an explanation of a particular code, just write the code stating you need an explanation of it, in the input prompt.

3- Can convert code from one language to another.

For converting code from one language to another, just mention the code to be converted and the language it should be converted in, as input prompt.

4- Can optimise code.

For optimising code, just mention the code snippet that you want to optimise in the prompt.

5- Can generate unit tests for a code snippet.

For generating unit tests for a code snippet, just mention the code snippet in the input prompt.

6- Can point vulnerabilities in a code snippet and address them.

For find out vulnerabilities in a code snippet, just mention the code snippet in the input prompt.

7- Can suggest which design patterns to use to solve a problem.

For getting a suggestion on the design patterns to be used to solve a particular problem, just mention the problem in the prompt.

Conclusion

Generative AI can improve a software developer’s productivity by assisting them in various software development tasks, which could be time consuming.
Prompts mentioned above and other similar prompts that could help other software developers can be added here — https://developers.generativeai.google/prompt-gallery

At the end of this blog post, I would encourage software developers to start leveraging Generative AI in various software development lifecycle tasks.

References

https://www.youtube.com/watch?v=628ANvH1jH0


How Generative AI improves the productivity of Software developers was originally published in Google Developer Experts on Medium, where people are continuing the conversation by highlighting and responding to this story.

The post How Generative AI improves the productivity of Software developers appeared first on ProdSens.live.

]]>
https://prodsens.live/2023/09/27/how-generative-ai-improves-the-productivity-of-software-developers/feed/ 0
Zero to Hero in Technical Writing: Making Consistent Income https://prodsens.live/2023/08/24/zero-to-hero-in-technical-writing-making-consistent-income/?utm_source=rss&utm_medium=rss&utm_campaign=zero-to-hero-in-technical-writing-making-consistent-income https://prodsens.live/2023/08/24/zero-to-hero-in-technical-writing-making-consistent-income/#respond Thu, 24 Aug 2023 12:25:02 +0000 https://prodsens.live/2023/08/24/zero-to-hero-in-technical-writing-making-consistent-income/ zero-to-hero-in-technical-writing:-making-consistent-income

Introduction Technical Writing is about writing articles, documentation, emails, technical reports, and other content related to computer hardware…

The post Zero to Hero in Technical Writing: Making Consistent Income appeared first on ProdSens.live.

]]>
zero-to-hero-in-technical-writing:-making-consistent-income

Introduction

Technical Writing is about writing articles, documentation, emails, technical reports, and other content related to computer hardware and software, architecture, software engineering, and other fields that help in building software. My main focus here is on writing articles as a technical writer.

It is rising with the rise of platforms such as dev.to and Hashnode, where you can share your articles online. The platforms have made it quite easy to publish technical articles. They have their own audience along with search engine traffic is also quite good. I believe that every developer should at least try to write articles online. It can help in various ways for their career and can create a consistent income through writing.

The below content covers some topics related to technical writing from my latest ebook, Zero to Hero in Technical Writing: Making Consistent Income. It covers topics related to writing technical articles online. Tips and tricks from my journey of writing articles. If you want to deep dive into writing technical articles then you should get the ebook. You can get the ebook here.

Zero to Hero in Technical Writing: Making Consistent Income

Note: I am running a launch campaign right now, you will get the ebook at a discounted price now. So grab it soon.

Now, let’s look into some of the content that the book contains.

Why should you write technical article?💡

I mentioned what technical writing is. You can pursue it as a side hustle or a profession. This choice depends on what best fits you. A developer at the beginning of their career can pursue it as a profession. However, someone who is already writing code and has experience can write articles as a side hustle. Both scenarios will be beneficial. Now let’s explore some benefits of it.

Building Audience

By starting a blog on a platform and on your website, you will start reaching an audience (other developers most likely) through the articles on it. On the platform, they can interact with the posts by giving their reactions and commenting on their thoughts about the articles. They can follow the platform to receive more articles from you. By doing this, you will create an audience for your blog that will read, react, and comment on your blog posts.

Learning Opportunity

While researching the articles, you will learn a lot about the topic, enhancing your knowledge of the domain. I learned many things just by writing articles. Additionally, the community will interact with your posts to share their experiences and opinions. You will also learn a lot from other perspectives on the posts.

Helping Developers

The best way to solidify a piece of knowledge is by sharing it with others. When you write an article about a topic, it will only deepen your knowledge about it. Also, with your knowledge and experience, you can help other developers who are at the stage where you once were. So, it’s a win-win situation for both the reader and the creator.

Generating Income

There are various blogs that pay writers for their articles. Tech startups need technical writers to spread the word about their products. We will discuss such blogs that pay well for writing articles. You can do a part-time/full-time job as a Technical writer. With this point, I just want to highlight that you can generate good income as a side hustler or a job seeker.

Potential Job Opportunities

A technical writer job is quite valuable. However, someone who wants to explore more opportunities from here can add more skills, such as communication, management, and public speaking. This will open doors for opportunities such as Developer Relations, Developer Advocate, Community Manager, and Content Manager. There will be more such jobs that you can adapt from technical writing by adding more skills to it.

The domain is quite promising. The opportunity is substantial in it, as blogs and startups are always looking for skilled writers to join their platforms. I will not recommend everyone pursue it because some enjoy sharing, while others do not. However, I will definitely recommend everyone to at least give it a try. See how it goes for you. I hope the benefits of technical writing have excited you to start a blog today. But please wait for a moment before commenting on the ebook, as I will guide you through some processes that are specially tailored for my blogs. Whether you are new or already have a blog, this guide will help you sort out lots of details.

What should you write?🤔

One of the most asked and as well as most searched questions is “What should I write?” while starting to write articles. In my early days as a technical writer, I used to write about topics that I was learning. It was easy as I was already having knowledge about the topic. It also enhances my knowledge as I write and also engage with other developers through my article’s comment section. As I grew, I started finding topics that I had to learn and then write. In this case, I was able to explore more topics.

You can take a look into the following methods to find topics to write an article on it.

Write about what you are learning

My first recommendation whenever someone asks me about this is to write what am learning. In the beginning, we learn a lot about any tech stack/framework/tool. You can convert that into a blog by adding your point and way of explaining things.

This allows you to gain more knowledge about the topic and you will retain it for a longer time. Also, you will be able to hear from the community about your learning and points to add to your notes.

Social Media Post

You can take inspiration from Twitter, LinkedIn, and Instagram posts for the topic idea. Don’t copy all the information from the post. If you have anything more to say or you want to add your points about that topic then write an article.

While taking inspiration, you should give credit to the original source.

Convert the topic into a series

It’s not about finding topics but generating multiple topics from one. For instance, you are writing about the NextJS .env variable. You can create a series of NextJS to discuss NextJS. This will lead to having many topics from just one domain.

I avoid breaking a tutorial article into multiple series as some articles I find on the internet, I would like them to find all the information on the same page.

Maintaining a note about topics

We sometimes encounter topic ideas in our brain but later forget that or lost in the realm of imagination. So, having a topic sheet with the topic ideas will help you maintain ideas.
I use a notion template to manage my blog ideas. If you use notion then you can check the template here: https://www.prototion.com/notion-template/Blog-Tracker-a4tGHDAESUHHuT9q

Maintaining a note about topics

Tools

I don’t use a lot of tools to find topic ideas but sometimes I use AnswerThePublic. It is a tool to find what questions are public is asking on search engines. Its visual representation and ability to export into an Excel sheet are what I like most about the tool. You can find some good topics to write an article on.
You can also use Google’s auto-suggest when searching on the platform. The topics in this are quite relevant.

AI Tools

There is no way, we cannot leave AI tools from any field. The rise of so many AI tools and the benefit that they can provide you is mind-blowing. You should use AI tools such as ChatGPT, Bard, Bing AI, or any other tool to explore different topics.
You can enter prompts such as “Topics to write an article on X”, “Trendy article ideas on X”, or anything you would like.

One more thing, Andrew Baisden has written an article, 100 blog topic ideas for your next article, from here you can take some topic ideas.

AI Tools

Conclusion

These are just 2 topics among the 12 topics that I have covered in the ebook. The complete list of topics that I have covered are these:

  • Introduction👋
  • Why should you write technical articles?💡
  • How to start your blog?🌱
  • What should you write?🤔
  • Researching the topic🔍
  • Writing style to follow🎨
  • Markdown📄
  • Things to do before publishing the article📑
  • Things to do after publishing the article📢
  • Tools to Use🛠
  • Challenges of Writing Technical Articles📚
  • Earning money through Technical Writing💰

Zero to Hero in Technical Writing: Making Consistent Income

If this excites you then you should look at the ebook here. It is available in ebook PDF and Notion template variants. You can get the ebook here.

Note: As I mentioned above, I am running a launch campaign right now, you will get the ebook at a discounted price now. So grab it soon.

I hope this article has helped you in knowing technical writing. Thanks for reading the article.

The post Zero to Hero in Technical Writing: Making Consistent Income appeared first on ProdSens.live.

]]>
https://prodsens.live/2023/08/24/zero-to-hero-in-technical-writing-making-consistent-income/feed/ 0
Maîtriser le travail asynchrone : Comprendre son essence et les stratégies pour une mise en œuvre réussie https://prodsens.live/2023/08/23/strategies-pour-une-mise-en-oeuvre-reussie/?utm_source=rss&utm_medium=rss&utm_campaign=strategies-pour-une-mise-en-oeuvre-reussie https://prodsens.live/2023/08/23/strategies-pour-une-mise-en-oeuvre-reussie/#respond Wed, 23 Aug 2023 23:24:45 +0000 https://prodsens.live/2023/08/23/strategies-pour-une-mise-en-oeuvre-reussie/ maitriser-le-travail-asynchrone-:-comprendre-son-essence-et-les-strategies-pour-une-mise-en-oeuvre-reussie

Le travail à distance permet aux entreprises d’accéder à un plus grand vivier de talents, de réduire les…

The post Maîtriser le travail asynchrone : Comprendre son essence et les stratégies pour une mise en œuvre réussie appeared first on ProdSens.live.

]]>
maitriser-le-travail-asynchrone-:-comprendre-son-essence-et-les-strategies-pour-une-mise-en-oeuvre-reussie

Le travail à distance permet aux entreprises d’accéder à un plus grand vivier de talents, de réduire les coûts de main-d’œuvre et d’augmenter la productivité, tandis que les employés bénéficient d’une plus grande autonomie et d’un meilleur équilibre entre leur vie professionnelle et leur vie privée. Cet article examine les avantages du travail asynchrone, qui permet aux employés de travailler selon leurs propres horaires et de communiquer avec leurs collègues à leur convenance, et explique pourquoi cette approche de la culture du travail accroît l’efficacité et, par voie de conséquence, la rentabilité.

 

Qu’est-ce que le travail « Asynchrone »?

Le travail asynchrone fait référence à un style de travail dans lequel les employés ne travaillent pas en même temps ou au même endroit que leurs collègues ou clients. Dans ce style de travail, la communication et la collaboration entre les membres de l’équipe ne se font pas nécessairement en temps réel. Au lieu de cela, chacun travaille selon ses propres horaires et utilise divers outils et technologies pour communiquer et collaborer avec les membres de leur équipe. Le travail asynchrone devient de plus en plus courant à l’ère numérique, où de nombreuses entreprises opèrent à distance et ont des employés qui travaillent dans différents lieux et fuseaux horaires.

Permettre aux employés de travailler au moment où ils sont le plus productifs, sans les contraindre aux horaires de travail traditionnels. Ce type de culture de bureau peut conduire à une plus grande créativité, à un meilleur équilibre entre vie professionnelle et vie privée et à une meilleure satisfaction générale au travail.

Néanmoins, le travail asynchrone requiert également de solides compétences en matière de communication et de collaboration, car les membres de l’équipe doivent pouvoir communiquer efficacement et rester sur la même longueur d’onde, même s’ils ne travaillent pas au même moment ou au même endroit. Il nécessite également l’utilisation d’outils et de technologies permettant le travail à distance, tels que les applications de messagerie, les logiciels de gestion de projet ainsi que les outils de vidéoconférence.

Découvrons les principales différences entre le travail asynchrone et le travail à distance

Le travail asynchrone et le travail à distance sont des concepts apparentés mais ne sont pas exactement les mêmes.

Le travail à distance signifie simplement que l’on travaille en dehors d’un environnement de bureau traditionnel, par exemple à domicile ou dans un espace de coworking. Le travail à distance peut être synchrone ou asynchrone. En d’autres termes, les travailleurs à distance peuvent travailler en même temps que leurs collègues et leurs clients, ou ils peuvent travailler selon leur propre horaire.

Le travail asynchrone, quant à lui, se réfère spécifiquement à un style de travail où les employés ne travaillent pas en même temps ou au même endroit que leurs collègues ou clients. La communication et la collaboration ne se font pas nécessairement en temps réel dans le cadre du travail asynchrone, et les membres de l’équipe travaillent selon leurs propres horaires.

Précision importante, le travail asynchrone peut être une approche utile même pour les équipes qui travaillent au même endroit, car il permet aux membres de l’équipe de travailler au moment où ils sont le plus productifs et d’éviter les interruptions et les distractions. Toutefois, cette méthode est généralement plus avantageuse pour les équipes réparties sur différents fuseaux horaires et dans différents lieux.

Les avantages du travail asynchrone axé sur les objectifs

Dans un environnement de travail asynchrone, l’accent est mis sur la définition de d’objectifs clairs et précis ainsi que sur le travail pour les atteindre de manière planifiée, plutôt que sur la réaction à des demandes immédiates ou à des exigences au fur et à mesure qu’elles se présentent.

Cela signifie que l’équipe dirigeante est encouragée à planifier le travail à l’avance et à fixer des priorités basées sur les objectifs les plus importants. En se concentrant sur les objectifs plutôt que sur les activités quotidiennes, le travail asynchrone peut contribuer à accroître la productivité, la créativité et l’innovation.

Au lieu de se sentir contraints par des horaires rigides, les employés peuvent se concentrer sur l’obtention des résultats les plus efficaces. Ce type de culture professionnelle peut conduire à des équipes plus agiles et plus adaptables, capables de mieux répondre aux circonstances changeantes et à l’évolution des besoins de l’entreprise.

Au contraire, dans un environnement de travail réactif, les employés peuvent être amenés à répondre en permanence à des demandes ou à des exigences urgentes sans avoir une idée claire de la manière dont ces demandes s’inscrivent dans les objectifs plus long terme de l’organisation. Cette situation peut entraîner un manque de concentration et d’orientation et empêcher les employés d’établir des priorités dans leur travail.

Il est primordial que les équipes mettent en place des processus de communication et de collaboration clairs, afin d’assurer que tout le monde est aligné sur les mêmes objectifs globaux ; ceci permet de réduire les incompréhensions et la confusion au sein des équipes. Cela peut impliquer l’utilisation d’outils de gestion de projet, des vérifications régulières ou d’autres formes de communication pour que tout le monde soit sur la même longueur d’onde et pour s’assurer que le travail progresse dans la bonne direction.

Améliorez la productivité de l’équipe et la collaboration avec des outils de suivi et de communication efficaces

Donner à votre équipe asynchrone les bons outils est essentiel pour réussir dans la dynamique de travail actuel. En équipant votre équipe d’outils de communication, de gestion de projet et de collaboration de pointe, vous favoriser un environnement dans lequel les individus peuvent s’épanouir et contribuer de manière transparente, quel que soit leur emplacement physique.

Examinons quelques cas d’usage qui mettent en évidence l’impact transformateur de ces outils sur l’autonomisation des équipes asynchrones.

  • Outils de gestion de projets et de tâches : Les outils de gestion de projet tels que ClickUp peuvent aider votre équipe à rester organisée et à maintenir un suivi efficace des différents projets et échéances. Ces outils permettent aux membres de l’équipe de créer des tâches, de les attribuer à d’autres personnes, de fixer des délais et de suivre les progrès réalisés. Ils peuvent être adaptés aux besoins des différents services (marketing, ingénierie, opérations, etc.) sur une plateforme unique, évitant la multiplication des plateformes, et des informations disperses.
  • Apps de messagerie et de communication : les applications de messagerie et de communication telles que Slack peuvent aider votre équipe à rester connectée et à communiquer efficacement. Ces outils permettent aux membres de l’équipe d’envoyer des messages, de partager des fichiers et de collaborer en temps réel, quel que soit le lieu où le fuseau horaire.
  • Logiciel de vidéoconférence et réunions enregistrées : Les logiciels de vidéoconférence tels que Zoom peuvent aider votre équipe à rester connectée et à collaborer efficacement. Ces outils permettent aux membres de l’équipe d’organiser des réunions virtuelles, de partager des écrans et de collaborer en temps réel. Les réunions enregistrées peuvent être un moyen utile pour les membres de l’équipe de participer de manière asynchrone, car cette fonction permet de regarder une réunion enregistrée même si l’on a pas pu assister à cette réunion.
  • Stockage dans le Cloud et documents collaboratifs : Les services de stockage Cloud tels que Dropbox peuvent aider votre équipe à partager des fichiers et à collaborer sur des documents en temps réel. Ces outils permettent aux membres de l’équipe d’accéder aux fichiers de n’importe où et de collaborer sur des documents en temps réel sans communication synchrone.
  • Logiciel de suivi du temps : Un logiciel de suivi du temps comme TimeJam peut aider à inciter votre équipe à saisir le temps quotidiennement en utilisant la gamification. Utilisez cet outil de suivi du temps en conjonction avec ClickUp pour permettre aux employés de suivre le temps qu’ils consacrent à différentes tâches ou à différents projets.
  • Email : Cet outil est actuellement challengé par tous les autres outils mentionnés, il reste néanmoins un excellent outil de communication si utilisé correctement, car il permet de communiquer de manière asynchrone.

Nous recommandons de mettre en œuvre des protocoles de base pour l’utilisation de chaque outil de communication afin d’optimiser les flux d’informations au sein de chaque organisation.

En mettant à disposition de votre équipe ces outils et technologies, vous permettez une meilleure organisation, quel que soit le lieu où le fuseau horaire ou se trouve chaque membres.

Les compétences en gestion de projet favorise la réussite de la collaboration asynchrone

La gestion de votre charge de travail dans un environnement de travail asynchrone requiert des compétences similaires à celles d’un chef de projet. Le travail asynchrone implique une approche plus autonome du travail, ce qui signifie que vous devez gérer votre temps efficacement, fixer des priorités et planifier et exécuter des tâches en fonction des objectifs globaux de l’équipe.

Les compétences clés en matière de gestion de projet qui peuvent être appliquées au travail asynchrone :

  1. Gestion du temps: Le travail asynchrone exige que vous soyez capable de gérer votre temps efficacement et de hiérarchiser les tâches en fonction de leur degré d’importance et d’urgence. Vous devez être en mesure de créer un emploi du temps qui vous permettra de travailler sur des tâches au moment où vous êtes le plus productif et de vous assurer que vous respectez les délais et que vous fournissez les résultats à temps.
  2. Fixer des objectifs: Vous devez être en mesure de fixer des objectifs clairs pour vous-même ainsi que votre équipe et de veiller à ce que votre travail s’aligne sur ces objectifs. Pour cela, vous devez être en mesure de décomposer des objectifs plus importants en tâches plus petites et plus faciles à gérer et de créer un plan pour atteindre ces objectifs.
  3. Communication: Dans un environnement de travail asynchrone, la communication est essentielle. Vous devez être en mesure de communiquer efficacement avec les membres de votre équipe, même lorsque vous ne travaillez pas dans le même espace physique ou le même fuseau horaire.
  4. Collaboration: Le travail asynchrone nécessite toujours une collaboration, mais elle s’exécute de manière différente que dans les bureaux traditionnels. Vous devez être en mesure de travailler avec les membres de votre équipe dans un environnement virtuel, en utilisant des outils tels que des documents partagés, des applications de gestion des tâches et des logiciels de vidéoconférence.
  5. Responsabilité: Vous devez être en mesure de rendre compte de votre travail et de vos progrès. Cela signifie que vous devez vous approprier vos tâches et fournir des résultats dans les délais impartis, même lorsque vous travaillez de manière indépendante.

En développant ces compétences en gestion de projet, vous pouvez devenir plus efficace dans un environnement de travail asynchrone et vous assurer que vous contribuez au succès global de votre équipe.

Développement d’une culture d’entreprise asynchrone

La mise en œuvre d’une culture de travail asynchrone au sein d’une équipe peut constituer un changement important, et des stratégies efficaces de gestion du changement sont essentielles pour réussir. Voici quelques étapes pour cultiver une culture asynchrone au sein de votre équipe :

  • Communiquez sur les avantages : Il peut s’agir d’une productivité accrue, d’une plus grande flexibilité et d’un meilleur équilibre entre vie professionnelle et vie privée. Aidez votre équipe à comprendre comment le travail asynchrone peut aider à être plus efficace dans son rôle.
  • Définir des objectifs et des attentes clairs : Veillez à ce que chacun comprenne son rôle dans la réalisation de ces objectifs. Fournissez des lignes directrices et des processus clairs sur la manière dont le travail doit être hiérarchisé et suivi, et établissez un cadre sur la manière dont la communication et la collaboration se dérouleront.
  • Fournir les bons outils technologique : Il peut s’agir d’outils de gestion de projet, d’applications de messagerie, de logiciels de vidéoconférence et d’autres outils de collaboration. Assurez-vous que tout le monde est formé à l’utilisation efficace de ces outils.
  • Établir des protocoles de communication : Inclure des lignes directrices sur les temps de réponse et la disponibilité. Encouragez votre équipe à communiquer de manière proactive et transparente et utilisez des outils tels que le courrier électronique ou les applications de messagerie pour partager les mises à jour et les progrès du projet.
  • Développer et favoriser une culture de la confiance : Les membres de l’équipe se sentent habilités à travailler de manière indépendante et à s’approprier leur travail. Encouragez votre équipe à partager ses idées et ses commentaires, à collaborer et à se soutenir mutuellement dans la réalisation d’objectifs communs.
  • Montrez l’exemple : Enfin, montrez l’exemple en tant que manager ou chef d’équipe. Modélisez les comportements et les pratiques que vous souhaitez voir dans votre équipe et soyez transparent sur votre travail asynchrone. Encouragez le retour d’information et l’amélioration continue et soyez ouvert à l’adaptation de votre approche si nécessaire.
  • Fournir des feedback régulier : Un retour d’information régulier est important dans un environnement de travail asynchrone, car il aide les membres de l’équipe à ajuster leur approche et à s’assurer qu’ils répondent aux attentes. Il peut s’agir de fournir un retour d’information sur les tâches accomplies, de proposer des conseils pour s’améliorer et de reconnaître les contributions des membres de l’équipe.

En offrant une formation et un soutien, en définissant des objectifs et des attentes clairs, en encourageant la collaboration, en favorisant une culture de confiance et en fournissant un retour d’information régulier, vous pouvez aider les membres de votre équipe à passer à un environnement de travail asynchrone et autodirigé et vous assurer qu’ils contribuent à la réussite globale de l’équipe.

Quelques exemples de cas d’usage

Spotify

Avec plus de 9 000 membres d’équipe répartis dans plus de 90 pays, cette entreprise renommée a lancé une politique de “travail de n’importe où” en 2022, afin d’attirer et de retenir les talents à une échelle mondiale. Elle possède encore des bureaux physiques dans quelques endroits et laisse le choix à ses employés de choisir où et comment ils veulent travailler ;

“Vous pouvez choisir de passer la majorité de votre temps dans l’environnement qui vous convient. Il peut s’agir d’un bureau Spotify, d’un espace de co-working ou de votre propre domicile. En d’autres termes, vous travaillez là où vous êtes le plus performant”. – Source – Site web de Spotify

L’entreprise prévient que le passage au travail flexible (avec le travail asynchrone) nécessite un changement de mentalité important et “un désapprentissage complet de ce que l’on nous a appris sur la façon dont nous devrions travailler”.

SmartGp

Un réseau mondial d’entreprises dont les intérêts principaux sont les personnes, les lieux et la technologie. Ils s’occupent de projets de transformation stratégique dans les domaines du lieu de travail, de l’immobilier, de l’éducation, de l’hôtellerie et des soins de santé. Depuis 2016, ils se consacrent à un style de travail hybride ou phygital qui mélange le travail en personne et le travail à distance. Le travail asynchrone est la nouvelle norme pour eux, afin de pouvoir collaborer sur différents projets, fuseaux horaires et lieux.

“Nous travaillons d’où nous voulons parce que nous comprenons que le travail est une activité et non un lieu”, souligne l’entreprise.

Conclusion

L’adoption d’une culture de travail asynchrone présente de nombreux avantages tant pour les entreprises que pour les employés. En permettant aux membres de l’équipe de travailler selon leurs propres horaires et en leur donnant les bons outils, les entreprises peuvent accroître leur productivité, améliorer l’équilibre entre vie professionnelle et vie privée et accéder à un vivier de talents internationaux.

Des études ont montré que le travail asynchrone peut entraîner une augmentation de la productivité des employés et de leur satisfaction au travail. Une enquête réalisée en 2018 par Owl Labs a révélé que les travailleurs à distance se déclaraient plus heureux et plus productifs que leurs homologues au bureau, tandis qu’une étude réalisée en 2019 par Airtasker a révélé que les travailleurs à distance étaient plus productifs que ceux qui travaillaient dans un bureau traditionnel.

Le travail asynchrone permet aux individus de se concentrer sur des tâches orientées vers un objectif, réduit les distractions et favorise l’autonomie, ce qui conduit en fin de compte à une plus grande satisfaction au travail et à des niveaux de stress plus faibles.

En outre, la flexibilité du travail asynchrone permet aux entreprises de réduire les frais associés aux bureaux physiques, ce qui se traduit par un meilleur retour sur investissement.

En adoptant une culture du travail asynchrone et en fournissant le soutien nécessaire, les entreprises peuvent créer un environnement dans lequel les membres de l’équipe peuvent s’épanouir et contribuer à la réussite globale de l’organisation dans le monde professionnel actuel en pleine évolution.

Prêt à créer une culture de travail asynchrone ?

Kolme Group de mise en œuvre ainsi que le savoir-faire nécessaire pour aider votre organisation à adapter un outil de GPP (Gestion de portefeuille de projets) pour le travail asynchrone.

est spécialisé dans la stratégie organisationnelle et la mise en œuvre d’outils PPM. Nos consultants stratégiques  en gestion de projet apporteront des informations précieuses et leur expertise pour optimiser l’approche de votre organisation en matière de travail asynchrone.

En collaborant avec Kolme Group, vous pouvez vous attendre à:

  • Expertise et Conseils : Bien informés des défis et des meilleures pratiques liées aux arrangements de travail asynchrone. Nous pouvons vous fournir des conseils d’experts pour mettre en œuvre et gérer efficacement une telle structure de travail au sein de votre organisation.
  • Stratégie Personnalisée : Nous travaillons en étroite collaboration avec votre entreprise pour élaborer une stratégie sur mesure qui correspond à vos objectifs, votre culture et votre secteur d’activité. Cette stratégie peut inclure la conception de protocoles de communication, l’établissement d’attentes claires et la mise en place de mesures de performance pour évaluer le succès.
  • Mise en œuvre de l’Outil de GPP : Il est essentiel d’introduire un outil de GPP adapté pour gérer efficacement les projets et les tâches dans un environnement de travail asynchrone, favorisant ainsi une collaboration fluide et un suivi des progrès.
  • Productivité Améliorée : Le modèle de travail asynchrone peut accroître la productivité et la satisfaction des employés grâce à la mise en œuvre de stratégies et d’outils appropriés. L’expertise de Kolme Group peut contribuer à maximiser ces avantages.
  • Soutien en Gestion du Changement : La transition vers un modèle de travail asynchrone peut nécessiter une approche de gestion du changement pour assurer une adoption en douceur. Kolme Group peut vous aider à gérer cette transition organisationnelle et à surmonter les éventuelles résistances des employés.
  • Atténuation des Risques : Fort de son expérience dans des mises en œuvre similaires, Kolme Group peut vous aider à identifier et à atténuer les risques potentiels liés au travail asynchrone, garantissant ainsi une transition et un fonctionnement plus fluides.

Collecter des informations spécifiques sur les besoins, les objectifs et les défis de votre organisation liés à une semaine de travail de 4 jours est essentiel avant de contacter le Groupe Kolme. Cela permettra d’avoir des discussions plus ciblées et des recommandations personnalisées.

N’hésitez pas à réserver une consultation avec Kolme Group pour discuter de la stratégie de votre organisation et de la mise en œuvre de l’outil de GPP pour le travail asynchrone. Ce sera une démarche positive et proactive pour optimiser les pratiques de travail à distance de votre organisation et accroître son efficacité et sa productivité.

 

The post Maîtriser le travail asynchrone : Comprendre son essence et les stratégies pour une mise en œuvre réussie appeared first on Kolme Group.

The post Maîtriser le travail asynchrone : Comprendre son essence et les stratégies pour une mise en œuvre réussie appeared first on ProdSens.live.

]]>
https://prodsens.live/2023/08/23/strategies-pour-une-mise-en-oeuvre-reussie/feed/ 0
Setting up Bcrypt in your Rails project https://prodsens.live/2023/08/23/setting-up-bcrypt-in-your-rails-project/?utm_source=rss&utm_medium=rss&utm_campaign=setting-up-bcrypt-in-your-rails-project https://prodsens.live/2023/08/23/setting-up-bcrypt-in-your-rails-project/#respond Wed, 23 Aug 2023 23:24:39 +0000 https://prodsens.live/2023/08/23/setting-up-bcrypt-in-your-rails-project/ setting-up-bcrypt-in-your-rails-project

If you’re here you probably already know that storing passwords in plain text is a bad idea. Here…

The post Setting up Bcrypt in your Rails project appeared first on ProdSens.live.

]]>
setting-up-bcrypt-in-your-rails-project

If you’re here you probably already know that storing passwords in plain text is a bad idea. Here is a step-by-step guide on how to set up Bcrypt in your Rails project. It’s quite simple, yet offers powerful security to your user’s information as well as any sensitive data you might be storing in your database. It’s so simple in fact, you’ll probably have time to read about how it works at the end if you aren’t already familiar.

  1. If you don’t have your Rails project set up go ahead a run:

rails new ProjectName

  1. Add the ‘bcrypt’ Gem to your project’s Gemfile:

gem 'bcrypt', '~> 3.1.13'

In your terminal, run:

bundle install

  1. Generate the model you will be storing the password in and include password_digest as an attribute. Remember the default type when using a generator is a string which is how the password_digest will be stored.

rails g model User name email password_digest

  1. In the model, add your associations and validations and include has_secure_password
class User < ApplicationRecord
     has_secure_password

     # Include additional validations...

end
  1. Migrate your database to create your users table

rails db:migrate

  1. Implement user registration in your users_controller with a create action along with your error handling. Though we included a password_digest attribute in our user table, we will still take in a password and password_confirmation in our user_params. Bcrypt will do the work of hashing the plain text password and storing it as password_digest thanks to that handy single line of code in step 4, has_secure_password.
class UsersController < ApplicationController 

rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid

     def create 
          user = User.create!(user_params) 
      session[:user_id] = user.id
        # Include any additional successful registration steps
    end

private 

     def user_params 
          params.permit(:name, :email, :password, :password_confirmation) 
     end 

     def render_record_invalid(e)
          render json: {errors: e.record.errors.full_messages}, status: :unprocessable_entity
     end
end

So far the code above will take in new user information as use_params and create a new user. It will verify that the password and password_digest match and save the new user to the database if so along with the Bcrypt generated password_digest. If the password and confirmation do not match, the bang operator in User.create! will raise an error that will be rescued with the render_record_invalid function to return any errors so we can render them to the dom for our user.

  1. Lastly, we will authenticate our users when they sign in. This will go into the controller responsible for your user authentication, such as a sessions_controller. First, the action will find the user via their email, in this example and authenticate the password they input against the store password_digest.
class SessionsController < ApplicationController 
     def create 
    user = User.find_by(email: params[:email]) 
    if user && user.authenticate(params[:password]) 
        # Handle successful login 
    else 
        # Handle login failure 
     end 
  end
end

Thats it! Your passwords are being stored securely.

How it works:

Bcrypt is a hashing algorithm that takes a bit of data (e.g. password) and creates a "digital fingerprint" from it. In other words 'password' becomes something like 2b$10$nOUIs5kJ7naTuTFkBy1veuK0kSxUFXfuaOKdOKf9xYT0KKIGSJwFa.

What makes Bcrypt more secure is that it adds "salt" to the password before hashing it. Salt is a random bit of additional data that is prepended to the password the user entered before it is hashed. This looks like turning our password into E4OAovh7rbpassword before processing it through the hashing algorithm. This way, if two people have have the same password, the salt ensures that their password_digest is completely different.

So how do we authenticate the user?

Bcrypt stores the password salt prepended on the password hash in the password_digest so all we have to do is add that salt to the password the user entered upon log in and see if it matches. Yes, the stored hash does have embedded information about its computation. As seen in the example below from the Bcrypt official npm page.

$2b$10$nOUIs5kJ7naTuTFkBy1veuK0kSxUFXfuaOKdOKf9xYT0KKIGSJwFa
 |  |  |                     |
 |  |  |                     hash-value = K0kSxUFXfuaOKdOKf9xYT0KKIGSJwFa
 |  |  |
 |  |  salt = nOUIs5kJ7naTuTFkBy1veu
 |  |
 |  cost-factor => 10 = 2^10 rounds
 |
 hash-algorithm identifier => 2b = BCrypt

Read more about Bcrypt for Ruby here.

The post Setting up Bcrypt in your Rails project appeared first on ProdSens.live.

]]>
https://prodsens.live/2023/08/23/setting-up-bcrypt-in-your-rails-project/feed/ 0
CSS Animation: Card Width expand on hover https://prodsens.live/2023/08/05/css-animation-card-width-expand-on-hover/?utm_source=rss&utm_medium=rss&utm_campaign=css-animation-card-width-expand-on-hover https://prodsens.live/2023/08/05/css-animation-card-width-expand-on-hover/#respond Sat, 05 Aug 2023 18:25:51 +0000 https://prodsens.live/2023/08/05/css-animation-card-width-expand-on-hover/ css-animation:-card-width-expand-on-hover

In this tutorial, you will learn how to create a pure CSS card width expand animation with hover…

The post CSS Animation: Card Width expand on hover appeared first on ProdSens.live.

]]>
css-animation:-card-width-expand-on-hover

In this tutorial, you will learn how to create a pure CSS card width expand animation with hover effect.

Card Width expand on hover

If you want to create this type of animation, simply use the following CSS code snippet.

CSS Code

.container {
  display: flex;
}
.card {
  height: 200px;
  background: rgb(48, 207, 232);
  flex: 1;
  transition: 0.3s;
}
.card:hover {
  flex: 3;
  background: rgb(12, 171, 195);
}

Card Width expand on hover

Source Code

Thanks for Reading ❤! Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let’s be friends!

Don’t forget to subscribe to our channel : Demo code

The post CSS Animation: Card Width expand on hover appeared first on ProdSens.live.

]]>
https://prodsens.live/2023/08/05/css-animation-card-width-expand-on-hover/feed/ 0