In this article, I cover 7 methods that are used by both arrays and strings. Learn these 7 methods and you actually have learned 14 JavaScript methods. I also cover an additional 7 methods that use different method names for the same or opposite purpose.

String and Array methods in common

The easiest set of methods to learn is the methods that work for both arrays and strings. There are 5 methods that have the same name and same effect for both strings and arrays. There are also two “properties” in common to both strings and arrays.

The string and array slice() method

Use slice to return a copy or a portion of a string or array without mutating the original.

Use str.slice() to return a copy of the string.

Use arr.slice() to return a copy of the array.

Both methods can be used without any arguments, with a start index only, or with both a start and ending index. For more information on the methods check out MDN String Slice and Array Slice pages.

The string and array concat() method

The concat method concatenates, or merges, two or more strings or arrays together by adding the value in the parentheses to the end of the calling string/array. Check out MDN String concat and Array concat for more information.

Use str.concat(str2, str3, …) to join 2 or more strings and return a copy of the joined strings.

Use arr.concat(arr2, arr3, …) to join 2 or more arrays and return a copy of the joined arrays.

NOTE: Using the + and += assignment operators used with strings accomplishes the same effect as concat(). It is strongly recommended to use the assignment operators instead of the concat() method with strings.

The string and array includes() method

The includes method is extremely useful, especially as a condition in if statements. Take a look at MDN string includes and array includes for syntax and examples.

Use str.includes(value) to perform a case-sensitive search to determine whether one string may be found within another string, returning true or false as appropriate.

Use arr.includes(value) to determine whether an array includes a certain value among its entries, returns true or false.

The string and array indexOf() method

The indexOf method is also extremely useful for various purposes. Check out MDN string indexOf and array indexOf for more examples and syntax.

Use str.indexOf(value) to return the first index at which a given element can be found in the string, or -1 if it is not present.

Use arr.indexOf(value) to return the first index at which a given element can be found in the array, or -1 if it is not present.

The string and array lastIndexOf() method

The lastIndexOf method works as the indexOf method but searches starting at the end of the string or array. Check the string lastIndexOf and array lastIndexOf methods on MDN.

Use str.lastIndexOf(value) to return the last index at which a given element can be found in the string, or -1 if it is not present.

Use str.lastIndexOf(value) to return the last index at which a given element can be found in the array, or -1 if it is not present.

Two properties in common: length and bracket notation

The following two techniques are not methods but are common to both strings and arrays. Both .length and bracket notation are very useful and you probably are already aware of them, but I wanted to include them all the same.

Use str.length and arr.length to return the length of the string and array respectively.

Use str[index] and arr[index] to return the string character and array value at the specified index respectively.

String and Array methods with different names but with similarities

Here are some other methods that have different names but have the same or opposite results. Personally, I do not use the first two methods and have only occasionally used the substring method.

charAt and at methods

Using str.charAt and arr.at returns the value at the index similar to bracket notation. There are reasons why you would use the arr.at() method over bracket notation (see MDN array at method), but I fail to see the application for the string charAt method.

Use str.charAt(index) to return the character at the index.

Use arr.at(index) to return the array item at the index.

Substring and splice (and slice) methods

Splice, slice, and substring all extract a part of an array or string. Substring and slice are identical with the exception of edge cases.

Use str.substring() to return a part of a string.

Use arr.splice() to return part of an array.

Slice and substring do not mutate the original source, but arr.splice() does. Check out MDN substring and array splice pages for more information. You should use all 3 methods on strings and arrays where applicable to understand the differences.

Split vs. Join methods

The split method is fantastic when working with strings. I believe I have only used the array join method in conjunction with split.

Use str.split() to turn a string into an array of substrings.

Use arr.join() to turn an array into a string.

NOTE: These two are often used in tandem. A common problem you will see is to turn a page or blog post title into a URL slug with a dash (-) as a separator. freeCodeCamp has an intermediate algorithm called Spinal Tap for that scenario but with some tricky test cases.

Check out the MDN pages on string split and array join for more information.

Final Thoughts

Hopefully, comparing JavaScript string and array methods like this has made learning JavaScript a little easier.

There are a handful of other string methods you should learn, and a lot more array methods as well. Let this article start you on the road to improving your understanding of JavaScript.

I have a repository on Github called JavaScript Cheat Sheet though it is way bigger than a cheat sheet, and is still a work-in-progress. Take a look at it and start building your own JavaScript cheat sheet to help you get coding better and faster!

The post Learn JavaScript: String and Array Methods appeared first on Kernix Web Design.

In this Markdown cheat sheet, I will show you the basic Markdown syntax to create your first README.md files followed by some intermediate and advanced syntax to make your repos look professional.

Basic Markdown

If you found this article then you already know what markdown is and that you need to learn it. I will not cover what it is, why you need it, who invented it, etc. Let’s get into it.

Below are some of the most common styling that you would want in your README files. Consider cloning or forking my markdown-cheatsheet repo on GitHub to see examples of what you can do.

By the way, you can preview markdown in VS Code without an extension, although some markdown does not display such as footnotes. Look at the red arrow in the image below – just click on that. It helps to toggle the sidebar and been reduce the markdown file.

Headings and paragraphs

Paragraphs are just regular text with 2 line breaks needed between each paragraph and other elements.

There are 6 heading sizes in markdown like there is in HTML, though I never use h5 or h6 for my pages. You just use 1 through 6 hashtags for heading1 through heading6.

NOTE: There is an automatic horizontal rule added when you use syntax for H1 and H2.

# Heading1 ## Heading2 ### Heading3

Blockquotes

This would be useful to quote someone you are contributing with. Use a greater than sign (>) to show a blockquote. Use 2 for nested blockquote but who does that?

> This is a quote > > Try an empty line like above > > > Or use a nested blockquote

Bold text

Use either 2 asterisks or 2 underscores before and after the text for bold styling. The preferred syntax is to use asterisks for bold: **bold text** or __bold text__.

Italic text

Use a single asterisk or underscore before and after text to display it as italic. The preferred syntax is to use an underscore for italic: *This is italic text* and _So is this_.

Bold & italic text

Use either 3 asterisks before and after the word(s) or 2 asterisks and an underscore:

***This is bold and italic text*** **_This is ALSO bold and italic text_**

Strikethrough text

Use two tildes (~~) before and after the text you want to display as strikethrough. I have never used strikethrough but maybe you do:

~~Strikethrough text~~

Horizontal rules

The way I prefer to make a horizontal rule is with 3 dashes with a space between them, but you could use 3 dashes without a space or 3 asterisks with or without spaces:

- - - --- * * * ***

NOTE: Make sure to hit ENTER twice if you intend to use 3 asterisks without spaces or it will set the text above it to an H3 tag.

Inline Code

You can use code in a sentence and highlight it by using a single backtick before and after the code such as <div class=”row”>:

`<div class="row">`

Code blocks

For multi-line code blocks use 3 backticks before and after the code block:

        ```
        pre span {
          display: inline-block;
        }
        ```

External Links

Links have 2 parts to them with an optional parameter. The link text goes between square brackets [ ], and the URL goes inside parentheses ( ). You can also add a title for the link that will display when a user hovers over the link. To do that you would and a space after the URL and then inside a set of double-quotes add a link title:

[Kernix Web Design](https://kernixwebdesign.com 'Home page')

Anchor links

By “anchor” links, I mean links that go to a section of the page as opposed to another page or website.

This can be done in at least two different ways. For all the links in the table of contents in my repo (see link at top), I use the easy method. But for the Back to Top link, I use an actual <a> tag.

You need to use the same syntax of square brackets and parentheses for links with both methods: [Link text](URL).

The first method is to add an empty <a> tag with an id attribute that matches the hashed URL link:

<a name="top_anchor"></a> [Back To Top](#top_anchor)

The second method is more common especially for table of contents links in README files. You put the exact text that you want to link to in the square brackets with the same case. In the parentheses you start with a hash symbol followed by the exact text all in lowercase and connected with dashes:

[Exact words in target link](#exact-words-in-target-link)

Images

The syntax for an image is identical for a link with the exception of adding an exclamation mark (!) before the opening square bracket. Also, replace the link text with alt text:

![alt text](https://via.placeholder.com/150)

Lists

You can use either an asterisk or a dash followed by a space to make a bulleted list. I prefer using a dash since you do not need to use the SHIFT key. For nested lists, use the SPACEBAR key to align directly beneath the first character in the parent list item to create a nested list:

    - List item one
    - List item two
      - Child item one

Use a number followed by a period (1., 2., 3. etc.) to create an ordered list. For a nested ordered list, do the same as for nested unordered lists – align the number to be below the first character of the parent item.

    1. List item one
    1. List item two
        1. Child item one

NOTE: By using “1” for each list item, you can cut & paste to change the order of items and the numbering will change to match the new order.

More advanced Markdown

Use the following markdown syntax for “fancy pants” markdown files.

Code blocks with code highlighting

A really nice feature for code blocks is to have basic syntax highlighting by adding the language after the first set of triple backticks. Here are the languages I have tested but check out my repo for examples: md, html, css, js, json, php, sql, xml, svg, python, apacheconf, …

```css
    pre span {  display: inline-block; } ```

I did not create any CSS to show you the styling for most of the fancier markdown features so check the repo to see what it looks like.

Diff code blocks

These are really nice for highlighting changed values and the new values. Use diff after the opening triple backticks, then a minus sign (-) and space for what was changed, and a positive sign (+) and a space for the new text/code.

```diff - this code or text is the old version + this is what it was changed to ```

Comments

This is a nice way to add a comment in the editor view of your markdown file. This would be good for teams members editing a documentation page for a new section. The best way is to use HTML syntax:

<!-- HTML comments work best IMO -->

Tasks

You can create what looks like checkboxes and display completed tasks with a checkmark. It takes the form of an unordered list with the first characters being a set of square brackets [ ] which MUST have a space in them. For a completed task, add either a lower or uppercase “X” inside the square brackets [x].

- [ ] incomplete task - [x] completed task  - [ ] incomplete subtask  - [x] completed subtask

Tables

I only used this for the Pull Requests and Issues I opened on freeCodeCamp. That table is a list of common prefixes to include in your titles (check out my Beginner Git Commands repo). Here is a generic table.

Pay attention to the syntax that is creating the column divisions and alignment. The pipes create the columns and the colons determine the alignment.

    | Left aligned | Center aligned | Right aligned |
    | :----------- | :------------: | ------------: |
    | Content Left | Content Center | Content Right |
    | Content Left | Content Center | Content Right |
    | Content Left | Content Center | Content Right |
    | Content Left | Content Center | Content Right |

Footnotes

I assume footnotes would be useful in a very technical or long README file. Use square brackets where you want a footnote link to appear and use a caret symbol (^) followed by the number of the footnote. Then below that area add the same syntax followed by a colon and the note itself. That will make the footnote text appear at the bottom of your file.

Here is what your text with the footnote syntax will look like:

Footnote.[^1] Another footnote.[^2]

Here is the syntax for the actual footnote:

[^1]: This is footnote number one. [^2]: Here is the second footnote.

Final Thoughts

There is a lot more you can do with your markdown files like actually using HTML tags. I have seen <a>, <p> and <span> tags in profile MD files, but I have not done much research into what you can and cannot use. I have also seen videos in markdown files so that would be something to look into for your GitHub profile.

Also note that all the syntax can be used in Discord and Slack, though slack has editor buttons for them, whereas Discord does not. I also see markdown used in forums and support tickets for some websites and hosting companies.

Here are some additional links that you can use to build your own Markdown cheat sheet:

1. Daring Fireball: Check out the Markdown Basics and Syntax tabs.
2. Complete list of github markdown emojis
3. GitHub emoji list

Here is a markdown cheat sheet in table version (basic code only):

The post Markdown Cheat Sheet for Beginners appeared first on Kernix Web Design.

WordPress recent posts using custom queries

The two methods I found best to display the 3 most recent posts were to use get_posts and WP_Query.

Here is a custom query using WP_Query. You can use this custom query inside or outside of the loop. The first code block calls WP_Query and 3 posts in the code category while excluding sticky posts. It also selects ‘posts’ post types as opposed to pages or custom post types, but you could choose those as well.

You can query on any database field that you need. For me, I wanted to display the 3 most recent published posts in my Code Snippets category.

Lines 10-12 uses the new instance of WP_Query ($query) to query the specific posts from the database.

        <?php
        
         $query = new WP_Query( [
           'post__not_in' => get_option( 'sticky_posts'),
           'post_type' => 'post',
           'post_status' => 'publish',
           'category_name' => 'code',
           'posts_per_page' => 3,
         ] );
        
         if ($query->have_posts()) {
           while ($query->have_posts()) {
             $query->the_post(); ?>
      

The code block below is the HTML for the post details along with some necessary PHP functions. Since WP_Query works both inside and outside of the loop, you’ll need to decide if it’s best used in the loop or outside of it.

Don’t forget to use wp_reset_postdata or it may mess up the page below the query or break the page.

        <div class="recent-row">
           <?php the_post_thumbnail() ?>
           <a class="recent-posts-link" href="<?php the_permalink(); ?>" 
           rel="bookmark"><h4><?php the_title(); ?></h4></a>
      
           <?php get_template_part( 'template-parts/content', 'author' ); ?>
      
           <?php the_excerpt(); ?>
           <div class="recent-post-widget"></div>
           <a class="recent-posts-button" href="<?php the_permalink(); ?>">
           Read more...</a> <?php
           }
         }
         wp_reset_postdata();
         ?>
      

However, if you are on a page that has the loop, then you might as well take advantage of the post data. The loop is fetching the database fields for $post, so use either WP_Query or a get_posts() query while in the loop.

The get_posts query does not work unless it is inside the loop. Here is the code for get posts that returns the same data as WP_Query.

        if ( have_posts() ) :
         while ( have_posts() ) :
         the_post();
           get_template_part( 'template-parts/content', 'front-page' ); ?>
      
         <aside class="bgcolor4"></aside>
           <div class="container"></div>
           <h3 class="custom-title">
             <?php esc_html_e('Latest Articles ', 'tower') ?>
           </h3>
           <div class="row"></div>
           <?php
             $posts = get_posts([
               'post_type' => 'post',
               'category_name' => 'code',
               'posts_per_page' => 3,
             ]);
        
         foreach ($posts as $post) {
           setup_postdata($post); ?>
        
           <div class="recent-row">
      

Lines 6-9 are the HTML elements and classes to be output for the container of the posts, then the custom get_posts query starts on line 10 and continues to line 18. You should notice the div.recent-row which starts the HTML in the code block above for WP_Query.

Final thoughts

Using a custom query to pull the most recent posts is best done in a plugin. I put mine directly into my template files since it’s my theme and my website, though I will be creating a plugin for the recent posts (look for that article).

There are a number of different parameters you can query other than the ones I used (post_type, category_name, posts_per_page). Go to the WP_Query developer’s page to see other parameters you can use.

The post WordPress Recent Posts using a Custom Query appeared first on Kernix Web Design.