teleren/devto huggingface dataset:
Linear Search
Tags: dsa, search, algorithms, java
Published: 2022-05-30 06:18:34

**Searching**
In programming it is a process of finding a given value position in a list of values. In our daily life it plays such an important role this can be finding something from a collection of data, you may need to find a word from a dictionary or find your friend from the crowd.

####Linear/Sequential search
* It is the basic simple search algorithm
* In sequential search, we compare the target value with all the other elements given in the list.
 for example
    arr = {18, 12, 19, 77, 29, 50} (unsorted array)
  target = 77

In the above example, the target value is compared with all the elements in the array in sequential/linear way.

####Time Complexity:
#####Best Case: O(1) -> constant
    How many checks will the loop make in the best case i.e the element will be found at the 0th index that is only one comparison will be made for best case.
####Worst Case: O(n)
     Worst case, here it will go through every element and then it says element not found


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

```
public class Main {

    public static void main(String[] args) {
	    int[] nums = {23, 45, 1, 2, 8, 19, -3, 16, -11, 28};
	    int target = 19;
	    int ans = linearSearch(nums, target);
        System.out.println(ans);
    }
     // search in the array: return the index if item found
    // otherwise if item not found return -1
    static int linearSearch(int[] arr, int target) {
        if (arr.length == 0) {
            return -1;
        }

        // run a for loop
        for (int index = 0; index < arr.length; index++) {
            // check for element at every index if it is = target
            int element = arr[index];
            if (element == target) {
                return index;
            }
        }
        // this line will execute if none of the return statements above have executed
        // hence the target not found
        return -1;
    }

}
```

Solved my first leetcode question with linear search check it out [Even number of digits](https://leetcode.com/problems/find-numbers-with-even-number-of-digits/submissions/)
For further explanation about linear search algorithm, kindly check out this wonderful toturial
[Linear Search in Java](https://www.youtube.com/watch?v=_HRA37X8N_Q) by *Kunal Kushwaha*


Feel free to connect with me on [github](https://github.com/rukundob451) and [Linkedin](https://www.linkedin.com/in/benjamin-rukundo-539ab01a6/), thank you.
Your Intranet in your pocket
Published: 2022-05-30 06:17:15

Your intranet in your pocket—the SharePoint mobile app.
Modern workforces are increasingly global and also becoming much more mobile. Staff needs seamless access to their corporate information not just at work but also convenient ways on their mobile devices wherever they may be – whether visiting a client, in a business meeting or working from a remote location.
The new SharePoint mobile app helps you keep your work moving forward by providing quick access to your team sites, organization portals and resources, and even a view into what the people you work with are working on. And this new app is infused with the intelligence of the Microsoft Graph, which applies machine learning to activity in Office 365 to connect you to the relevant documents and people around you. The SharePoint mobile app works with SharePoint Online in Office 365, SharePoint Server (2013 and 2016) on-premises and your hybrid environment. Once you launch the app on your phone, you’ll be prompted to sign in with your SharePoint credentials. The SharePoint mobile app lets you easily switch between accounts.
Cl
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrjtsodlrhawb4o1izlq.jpg)ickup offers an intranet platform that integrates nicely with your existing Microsoft environment and displays the portal the way users would expect. #Microsoft. #motivation #strategy
Why SharePoint?
Published: 2022-05-30 06:14:09

Why SharePoint?

SharePoint is a web-based platform that creates an environment in which teams of people can collaborate on various types of projects. Things like budgets, proposals, forms, or contracts, or just about any type of project that requires input from various sources.
The #SharePoint infrastructure is a multi-purpose platform that allows for the creation of private websites. It can be used for document and file management. It includes collaboration spaces. It even has social networking tools, enterprise search features, and business intelligence.
SharePoint is used for the collection and storing of #information. Because it's a web-based program, the only thing you'll need to access your SharePoint is a supported web browser such as Internet Explorer.
SharePoint can help your #project stay organized by providing one centralized location where you can access, work with, or #collaborate on various parts of your project.
Your site can have things like a project calendar and a task list, which can help you keep track of those important deadlines and team member schedules.


#office365 #collaboration #enterprisesearch #sharepointonline #powerappsug9ja
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4fy41yl3ywzp1t7u4z0.png)
Angular Library Publishing
Published: 2022-05-30 06:10:15

i was publishing library package that supports angular version from 8 to 13 in npm registry. But now i want to publish this package as Ivy enabled and it won't support below Angular version of 12. So i have decided to publish the package like MyLibrary older version x (tag name as ngc) and the latest with new version. Is there any better way to address it?
tags: angular
Resolving problem with vue tailwind and postcss nesting
Tags: vue, volar, tailwindcss, postcss
Published: 2022-05-30 06:02:32

Previously I made an application with vue js and tailwind

because i'm used to using nesting feature in sass, i want to use it again in tailwind

quite simple, I just need to add the `tailwindcss/nesting`
plugin to `postcss.config.js`

[Read More](https://tailwindcss.com/docs/using-with-preprocessors#nesting)

here my `postcss.config.js`

```
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

everything was working fine until i found that vscode reads `nesting` and `@apply` as error

After hours of searching for an answer I can finally draw a conclusion.

first i need to change the lang style in vue to postcss, 
`<style lang="postcss">`

the error warning is gone, but the syntax highlighting is not showing, after reading the same problem on github https://github.com/johnsoncodehk/volar/issues/765

and after read this comment
https://github.com/johnsoncodehk/volar/issues/765#issuecomment-989442125

i replaced the postcss extension with https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss

All done, error warning gone and the syntax highlighting comeback

if you guys have the same problem and have another method to solve, feel free to share

thanks for reading
Productivity with Power Automation
Published: 2022-05-30 05:59:02


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e962uc669x3wdko1pht.jpg)Be more productive automatically with Microsoft Power Automate.
Power Automate is Microsoft’s attempt at giving you the kind of automation for notifications, alerts, data gathering, and communication that will help you spend less time on boring but necessary admin work and more time on interesting (and productive) things.

What Can I Do With Power Automate?
Power Automate is all about taking away the annoyance of tasks that a computer could be doing for you instead. This could be as simple as getting an email alert when someone modifies a file in SharePoint or as complex as a multi-step workflow with approvals, alerts, and notifications that are based on a Power BI analysis of real-time data.

Continues in the comment section!!

#microsoft #office365 #sharepoint #powerplatform
#automate #entrepreneurship #powerbi
Modular Models in Ruby on Rails
Tags: rails, ruby, activerecord
Published: 2022-05-30 05:58:07

Every so often we want our models not just in model folder but in module in a folder with many advantages inclusive. 
One advantage is maybe those table names are already in project, so by putting a prefix of module name can make the table uniqueness.
Next advantage is you want to put the functionality separate with the rest of the project, we can use modular models.
Last advantage is making engines to be used in other projects, including tables, can be easy using prefixed tables.

## How to do it? It’s easy!
Let’s assume we want a blog to our project, which is a separate functionality than the rest of the project. So, we will be creating two models, _Post_ and _Comment_.

Therefore, run in the project:
```bash
rails g model blog/post title:string body:text 
```

This will create a model with the following files:
blog.rb
```ruby
# app/models/blog.rb

module Blog
  def self.table_name_prefix
    'blog_'
  end
end
```
blog/post.rb
```ruby
# app/models/blog/post.rb

module Blog
  class Post < ApplicationRecord
	validates :title, presence: true
	validates :body, presence: true
  end
end
```
And the migration file will create the table named `blog_posts` not just simple `posts`.

Now, creating the comments in the post is somewhat tricky.
Run the following in the terminal:
```bash
rails g model blog/comment body:text blog_post:references user:references
```
This will ask to override the `blog.rb` which is not needed at the moment.
The new file of comment model needs to be updated:
```ruby
# app/models/blog/comment.rb

module Blog
  class Comment < ApplicationRecord
    validates :body, presence: true
    belongs_to :blog_post, class_name: 'Blog::Post'
  end
end
```
And update the post model with relation:
```ruby
# app/models/blog/post.rb

has_many :comments, class_name: 'Blog::Comment', dependent: :destroy, foreign_key: :blog_post_id, inverse_of: :blog_post
```

## Final ponts
So now we have modular models in the project. Tables created will be `blog_posts` and `blog_comments`. Anywhere in project to call post model you have to use `Blog::Post` like `Blog::Post.find 12`. But we can use `.comments` like:
```ruby
# rails console
post = Blog::Post.find 1
post.comments.last
# similar for comments
comment = Blog::Comment.last
comment.post.title
```

However, in database we will have `blog_posts` table and `blog_comments` table with foreign key `blog_post_id`.

---

Happy Coding!
Normal to struggle with Tailwind?
Tags: tailwindcss, help, beginners, css
Published: 2022-05-30 05:50:00

I'm trying to experiment with Tailwind. It seems so... Scattered and difficult to keep track of. Should I push through and keep practicing with this method of styling or is normal CSS still going to be around for the foreseeable future? 

I like structured and grouped stuff I guess.
Send WhatsApp Messages using the Android SDK
Tags: whatsapp, android, api
Published: 2022-05-30 05:35:24

Before jumping into using the SDK, let's follow the below steps to create the project on [developers.facebook.com](https://developers.facebook.com/) to claim the phone number id.

**Step 1: Create a WhatsApp App**

![Learn how to use this Android SDK to Send WhatsApp Messages using the WhatsApp API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmg3fqxxm855w87miz8r.png) 

Give your app a descriptive name (do not use any Facebook trademarks like WhatsApp or Facebook in the app name) and click the Create App button to create the app.

On the next screen, you will be required to link your WhatsApp app to your Facebook business account. You will also have the option to create a new business account if you don’t have one yet.

![Learn how to use this Android SDK to Send WhatsApp Messages using the WhatsApp API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt3ig7naj7unkxpgsjyw.png) 

**Step 2: Add Recipient’s phone number**

Your WhatsApp app will provide you with a temporary access token that will be valid for 23 hours. Make a note of this token as we’ll need it in a later step.

![Learn how to use this Android SDK to Send WhatsApp Messages using the WhatsApp API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvpluji0326j0hf5eyd9.png) 

Use below Android SDK to Send WhatsApp Messages using the WhatsApp API

#### Kindly use the following links to use this library:

In settings.gradle (Project)
```kotlin
dependencyResolutionManagement {
    repositories {
        …….
        maven { url 'https://jitpack.io' }
    }
}
```
And then in the other gradle file(maybe your app gradle or your own module library gradle, but never add in both of them to avoid conflict.)
```kotlin	
dependencies {
	implementation 'com.github.myinnos:WhatsApp-SDK:<latest-version>'
}
```
How to use
-----
**Step 2:** implement App Icon Name Changer method : [#Example - MainActivity.kt](https://github.com/myinnos/WhatsApp-Android-SDK/blob/main/app/src/main/java/in/myinnos/whatsappsdk/MainActivity.kt)
```kotlin
WhatsAppInitialization.sendMessage(
                "token", //token
                "version", //ex: v13.0
                "phone_number_id", //ex: 103075932423434
                "customer_phone_number",
                "template_name", //ex: hello_world
                "language_code", //ex: en_US
            ) { wResult ->
                Handler(Looper.getMainLooper()).post {
                    if (wResult?.getMessage() == null) {
                        // failed results
                    } else {
                        // success results
                        Log.d("RESULTS", wResult.getMessage())
                    }
                }
            }
```

Any Queries? or Feedback, please let me know by opening a [new issue](https://github.com/myinnos/WhatsApp-Android-SDK/issues/new)!

PS: Images in the article are taken from [labnol](https://www.labnol.org/whatsapp-api-google-sheets-220520)

> Let me know your thoughts on [Twitter](https://twitter.com/MyInnos).
"Relational pattern"lar haqida...
Tags: dotnet, csharp
Published: 2022-05-30 05:09:41

C# 9.0 dan boshlab, switchga parametr qilib berilgan qiymatni   aniq qiymatlar bilanmasde malum bir diapazondigi qiymatla bilan solishtiraish uchun relational patterndan foydalanamiz:

```
Console.WriteLine(Classify(13));  // output: Too high
Console.WriteLine(Classify(double.NaN));  // output: Unknown
Console.WriteLine(Classify(2.4));  // output: Acceptable

static string Classify(double measurement) => measurement switch
{
    < -4.0 => "Too low",
    > 10.0 => "Too high",
    double.NaN => "Unknown",
    _ => "Acceptable",
};
```
Relational patterda siz <, >, <= yoki >= kabi solishtirish operatorlaridan foydalanishingiz mumkin. Relational patternning o'ng tomoni constant ifoda bo'lishi kerak.
Constant qiymat int, float, char yoki enum tipidagi bo'lishi mumkin.

Ifodaning natijasi ma'lum diapazonda ekanligini tekshirish uchun uni "conjunctive and pattern" bilan moslang :

```
Console.WriteLine(GetCalendarSeason(new DateTime(2021, 3, 14)));  // output: spring
Console.WriteLine(GetCalendarSeason(new DateTime(2021, 7, 19)));  // output: summer
Console.WriteLine(GetCalendarSeason(new DateTime(2021, 2, 17)));  // output: winter

static string GetCalendarSeason(DateTime date) => date.Month switch
{
    >= 3 and < 6 => "spring",
    >= 6 and < 9 => "summer",
    >= 9 and < 12 => "autumn",
    12 or (>= 1 and < 3) => "winter",
    _ => throw new ArgumentOutOfRangeException(nameof(date), $"Date with unexpected month: {date.Month}."),
};
```
Agar ifoda natijasi null bo'lsa yoki constant qiymatni nullable qiymatga convert qilish imkoni bo'lmasa relational pattern ifodaga mos kelmaydi. 
Qo'shimcha ma'lumot olish uchun [relational pattern](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/proposals/csharp-9.0/patterns3#relational-patterns) bo'limiga qarang.
How to Create a Preview Link in next.js with Open Graph.
Tags: seo, nextjs, react, opensource
Published: 2022-05-30 05:28:19

There are a few documents that describe preview links in Next.js and this might pose a challenge for new users. However, this is as easy as it can get.

To create a preview link in next.js, go to your app.tsx or app.js and add the following to a <Head></Head> tag which you will include by importing Next/Head.

import Head from 'next/head'


<meta property="og:title" content="add the title" />
<meta property="og:type" content="add the type example website" />
<meta property="og:url" content="add the page link" />
<meta property="og:image" content="add image url" />
<meta property="og:description" content="Input description" />
</Head>

If you however need to create preview links for different pages, this will be added to the different pages which a few more steps which I will share in my next article.

My Twitter Handle: https://twitter.com/mchelleOkonicha

My LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/
CSS Styling Tricks: Flexbox
Tags: css, styling, responsivedesign, programming
Published: 2022-05-30 05:25:58

Flexbox is used to build amazing layouts for your application without adding frameworks.
With flexbox, responsiveness can be done in minutes and general alignment can be done quickly.

First, you need to understand the layout of your application. Use display: flex, flex: 1, gap instead of padding-left or padding-right.
Also use margin: auto more as it saves you the stress of adjusting.

Css is so wide that almost every style can be substituted with another.

My Twitter Handle: https://twitter.com/mchelleOkonicha

My LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/
CSS Styling Tricks: How to Build Responsive Web Applications with Percentages
Tags: responsiveness, css, styling, csstricks
Published: 2022-05-30 05:23:19

Responsiveness in web design is so important that people check your web application’s responsiveness before proceeding further. Responsiveness can be tedious especially without css frameworks like tailwindcss, bootstrap, chakraUI, materialUI and more.

However, using the percentage styling method makes it easy to build responsive sites.
For each break point, apply a percentage for the height and width. It automatically gives you the percentage of the container relative to the initial width and height.
Try this, it is easy and sweet.

Another thing to avoid is using padding-left and padding-right as much as possible.
It not only gives your application an over-flow but also creates unwanted space in other devices.
And considering that different browsers and devices have different views, it is important to use a global style that adjust in different browsers and devices.

You can use flexbox or grid.
It is better to use either of them not the both.
This makes responsiveness so easy as it will only require the out layer.

My Twitter Handle: https://twitter.com/mchelleOkonicha

My LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/
WebP support for email
Tags: discuss, outlook, email
Published: 2022-05-30 05:14:28

I began with this thread in WordPress Github Issue:
https://github.com/WordPress/performance/issues/74

AppleMail and Gmail won't have any issue. Outlook still struggled at the moment, at least on the app side.

![WebP image format support according to caniemail.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ue0tt6gi03uucscdns2m.png)

Is that something can be done by using Microsoft Outlook Tag to wrap the fallback jpg file while other webmails or modern email client app can benefit from what WebP offered? For instance:

`<!--[if !mso]>
<img src="___.webp" alt="" />
<![endif]-->
<!--[if lte mso 16]>
<img src="___.jpg" alt="" />
<![endif]-->`

Can you share if any tactic that works for you?
A11Y 101: Adding skip links
Tags: a11y, webdev, beginners
Published: 2022-05-30 04:55:16

While evaluating my website, I realized while using a screen reader. A user has to tab quite a lot to get to the main content part.

This is quite annoying as this can take you forever, and you might even lose users over this behavior.

## What are skip links?

Luckily for us, there is a solution to fix this, called skip links.

These are technically hidden links that sit above navigation areas, so people can quickly skip that section.

To illustrate it could look like this:

```html
<a href="#main-content" class="skip-link">Skip navigation</a>
<nav>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</nav>
<main id="main-content">I'm the main content</main>
<footer>
  <a href="#">Privacy</a>
</footer>
```

This, in general, already works. We can quickly tab and skip the whole navigation section!

## Making skip links better

It's ugly to have this link sit there, so we can make it [visually hidden as we just learned](https://daily-dev-tips.com/posts/a11y-101-hiding-content/).

In our case, we want to be able to show it on focus, so let's move it outside of the view initially.

```css
.skip-link {
  background: #da0060;
  color: #fff;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translate(-50%, -200%);
  transition: transform 0.3s;
}
```

With this code, we set the skip links element above the top of our page, so it's not visible to users.

We can add a focus selector to animate it into the screen when a user focuses on it using tab navigation.

```css
.skip-link:focus {
  transform: translate(-50%, 0);
}
```

And when they now tab into this element, it will appear.

I made this super simple demo for you to play with.
Try using your tab navigation and interact with the skip element, then tab again.

You are immediately in the footer, right?
Now try not to click on the skip link, but keep tabbing.
You are now able to visit the menu!

{% codepen https://codepen.io/rebelchris/pen/NWygvvQ %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Exploring Chart.js with Star Wars data
Tags: javascript, chartjs, swapi
Published: 2022-05-30 04:38:02

While exploring Chart.js, I created a simple project and wrote a blog post to accompany it:

https://devpower.co.uk/javascript/exploring-chartjs-with-star-wars-data/

The fun part was to use Star Wars API and dynamic data coming from an API with the charts. In most examples, I saw hard-coded data was used so I thought it might be useful to explore how to use some data coming from an API.

TL;DR: 
------
* Chart.js is a very easy to use, well-documented and open-source charting library.: https://www.chartjs.org/
* Star Wars API is quite fun to play around with to get some SW trivia. Too bad it's not open source though: https://swapi.dev
Building a social platform with Go
Tags: go
Published: 2022-05-30 04:11:47

Hi friends, 
I am on a project making a social platform whose product will be the articles. To code the platform we are using **Golang as backend language**. If you know Go, then it's enough of reading, comment now with your email. 
Will contact you asap to discuss the plan. 

Thanking you, 
Pourush
Developing and installing your own CLI with dotnet tool and CliFx NuGet package
Tags: csharp, dotnet, cli, clifx
Published: 2022-05-30 04:37:02

I wrote a blog post on developing and installing your own CLI with dotnet tool and CliFx NuGet package. You can find it here: 

https://devpower.co.uk/dotnet/csharp/develop-a-cli-with-csharp/

If you're not interested in the whole thing, here is the TL;DR version:

* dotnet tool is a mechanism to install/update/distribute console applications via NuGet packages
* CliFx is an awesome NuGet package that allows you to convert a console application into a full-blown CLI with commands, subcommands, arguments and auto-generated usage message.

You can check out the references to find more about these:

* [dotnet tool documentation](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-tool-install)
* [CliFx GitHub repo](https://github.com/Tyrrrz/CliFx)