Forem: Mariana Simon

10 HTML Tips and Tricks to help you

Mariana Simon — Wed, 06 Oct 2021 15:39:43 +0000

HTML has lots of useful elements and attributes that some people don't know about. Check out this list of tips and tricks that can help you achieve better results with HTML.

1) Color Picker

Did you know you can create a nice color picker using only HTML?

Check it out:

<input type="color" id="color-picker" 
name="color-picker" value="#e66465">
<label for="color-picker">Pick a color</label>

2) Progress bar

You can also create a progress bar using only HTML with the progress element. It can be used in order to show the progress of a task such as a file upload/download.

<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>

3) Meter tag

You can use the meter element to display measured data within a certain range with min/max/low/high values, such as temperature .

<label for="fuel">Fuel level:</label>
<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

4) Input search

You can set an input's type attribute to search to create a search input field. The nice thing is it adds the "x" button that allows the user to quickly clear the field.

<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q"
       aria-label="Search through site content">

<button>Search</button>

5) Start attribute in ordered lists

You can use the start attribute to specify the start value of an ordered list.

<ol start="79">
  <li>Slowpoke</li>
  <li>Slowbro</li>
  <li>Magnemite</li>
  <li>Magneton</li>
</ol>

6) Responsive images

Use the picture tag to display different images according to the window size.
It's useful to make your website more responsive.

<picture>
    <source media="(min-width:1050px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png">
    <source media="(min-width:750px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/005.png">     
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png" alt="Charizard-evolutions" style="width:auto">
  </picture>

7) Highlight text

Use the mark tag to highlight text. The default color is yellow but you can change it by setting the background-color attribute to any other color you like.

<p>Hi dev friend, this is a 
<mark>highlighted text</mark> 
made with love by simon paix </p>

8) Interactive widget

You can use the details tag to create a native accordion that the user can open and close.

Tip: the summary element should be the first child of the details tag.

 <details>
   <summary>Click to open </summary>
   <p>Hi stranger! I'm the content hidden inside this accordion ;)</p>
 </details>

9) Native Input Suggestions

You can use the datalist element to display suggestions for an input element.

The input's list attribute must be equal to the id of the datalist.

<label for="fighter">Pick your fighter</label>
<input list="fighters" name="fighter">
  <datalist id="fighters">
    <option value="Sub Zero">
    <option value="Pikachu">
    <option value="Mario">
    <option value="Baraka">
  </datalist>

10) Open all links in a new tab

You can set the base element target attribute to blank so when the user clicks a link it always opens in a new tab. It is useful if you want to avoid users unintentionally leaving a certain page.

However, it includes links to your own domain. If you only want links to a different domain to open in a new tab, you must use JavaScript, instead.

<head>
   <base target="_blank">
</head>

<div>
  All links will open in a new tab: &nbsp;
  <a href="https://learnpine.com/">LearnPine</a>
</div>

About me, let's connect! 👋👩‍💻

I'm an avid learner and I love sharing what I know. I teach coding live for free 👉 here and I share coding tips on my Twitter account . If you want more tips, you can follow me 😁

10 Awesome Websites to find Web Developer Remote Jobs

Mariana Simon — Fri, 01 Oct 2021 13:40:09 +0000

The year is 2021 and the web development job market (or programming in general tbh) is all about remote positions. If you want to take advantage of it to get your next job (or a side one), make sure to bookmark this article.

TL, DR;

1- Simply Hired
2- FlexJobs
3- Hired
4- Remote .co
5- JustRemote
6- RemoteOk
7- Working Nomads
8- StackOverflow Jobs
9- We Work Remotely
10- Turing
Bonus: Bergamot

1) Simply Hired

Millions of Jobs, many of them remote.

You can also find freelance jobs here and easily filter by location (think of the timezone).

2) FlexJobs

Millions of postings. Pro: you can easily personalize your job search.

Tip: use this code FLEXLIFE to get 30% off (non affiliated, just being nice).

3) Hired

Hired reverses the traditional job-hunting process.

You create a profile with your background and what you're looking for and the companies apply to YOU.

Interesting concept, right?

4) Remote.co

Besides offering a large database of open positions, Remote .co also shares nice tips for you to get your next remote job.

5) JustRemote

On JustRemote, you can search for both full-time and part-time remote jobs.

6) RemoteOk

They have a nice interface where it is easy to see the salary range of the position you're applying to.

7) Working Nomads

Easy to configure job alerts, you can filter development and compare the offers.

8) StackOverflow Jobs

Surprisingly, many people who use SO don't know that they have a part of their website dedicated to job search.

GitHub used to have one too, but it's shut down.

9) We Work Remotely

With over 3M visitors, WWR has a large list of nice remote jobs including top companies and higher positions.

10) Turing

The cool thing about Turing is you can find US remote jobs in top companies. There are some requirements to join in though.

Bonus1: Bergamot

Bergamot is a cool option I've recently found out. It's a remote tech jobs aggregator with thousands of job posts.

That's it! Hope you found it useful and I wish you get your new job soon :)

Bonus2: Remote Tech Jobs

Remote Tech Jobs has +3,000 remote jobs focusing specifically on tech ones. A nice thing is that they remove inactive jobs, which helps you to save time.

About me, let's connect! 👋👩‍💻

I'm an avid learner and I love sharing what I know. I teach coding live for free 👉 here and I share coding tips on my Twitter account . If you want more tips, you can follow me 😁

7 useful HTML attributes you may not know

Mariana Simon — Wed, 22 Sep 2021 15:28:51 +0000

HTML is the cornerstone of web development. Yet, many aspiring programmers merely skim the surface and move on to CSS, JS, etc, missing its entire potential.

This is a list of HTML attributes that many beginners don't know, but that can be helpful.

Please, let me know in the comments if you would like to add any other attribute to the list and I'll check it out ;)

1) Multiple

The multiple attribute allows the user to enter multiple values on an <input>. It is a boolean attribute valid for file or email input types and the <select> element.

For an email input, if and only if the multiple attribute is specified, the value can be a list of comma-separated email addresses. Any whitespace is removed from each address in the list.

For a file input, the user can select multiple files in the as usual (holding down Shift or Crtl).

<input type="file" multiple>

2) Accept

The <input> element has the accept attribute that allows you to specify the types of files the user can upload.

You need to pass it a string containing a comma-separated list of unique file type specifiers.

You can also use it to specify only audio, image, or video format.

<input type="file" accept=".png, .jpg">

3) Contenteditable

contenteditable is a global attribute (common to all HTML elements) that makes the HTML content editable by the user or not. However, be careful with changes only made to visible content vs the DOM content.

<div contenteditable="true">I'm a cool editable div ;)</div>

4) Spellcheck

The spellcheck is another global attribute that you can use to check spelling and grammar on HTML elements such as input fields and other editable elements.

Note: Typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking.

<p contenteditable="true" spellcheck="true">
Thanks furr checkinng my speling :)</p>

5) Translate

translate tells the browser whether the content should be translated or not.

For instance, you can use it to prevent Google Translate from automatically trying to translate your company's or brand's name.

<footer><p translate="no">LearnPine</p></footer>

6) Poster

Use the poster attribute to specify an image to be shown while the video is downloading, or until the user hits the play button.

If the image isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

<video controls 
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>

7) Download

Use the download attribute combined with an <a> element to instruct browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file.

You can also specify the file name.

<a href="index.html" download="fileName">Download me :)</a>

About me, let's connect! 👋👩‍💻

I'm an avid learner and I love sharing what I know. I teach coding live for free 👉 here and I share coding tips on my Twitter account . If you want more tips, you can follow me 😁

CSS Grid Cheat Sheet 🔥

Mariana Simon — Thu, 15 Jul 2021 16:39:06 +0000

Hi dev friends!

I made this CSS Grid Cheat Sheet that fits on one page. I hope this will help you learn the grid layout. Please let me know what you think of it :)

If you want to see more resources like this one and coding tips, you can follow me on Twitter 🚀

CSS Flexbox Cheat Sheet 🔥

Mariana Simon — Wed, 09 Jun 2021 16:23:17 +0000

Hi dev friends!

I made this cheat sheet to help my students. I shared it on Twitter here and it got viral so I thought it could help this amazing community here too :)

Let me know what you think 🙂

JavaScript: Understand 'this' keyword

Mariana Simon — Wed, 26 May 2021 19:16:38 +0000

'this' is one of the most important concepts in JavaScript. It's part of the basics and the sooner you get comfortable with it the easier your coding life will be :)

Make sure you understand the use of 'this' by reading this post.

First, the simple 5 yo explanation:

The use of 'this' in programming is like what you do in plain English. For example, when you say "I got a job! This is great!". We know 'this' is referring to the fact you got the job. In other words, 'this' gives context to the second sentence.

--5 yo

So, to understand 'this', you need to know what context is.

Context explained

Context is related to objects. It refers to the object a method or property belongs to. Your code starts running in a global context, which in your browser is the window (in Node, the global object is called global). Look at the example below:

var name ='Beyonce'  

console.log(this.name)  // Beyonce 
console.log(window.name)  // Beyonce

In the example, 'this' equals window because I ran it on my browser, where the global object is the window. So, window.name ==="Ash" . So far, the context is window. Ok.

Now, the context changes during your code execution. Whenever an object's method is called, 'this' is set to the object the method was called on.

See the example below. Both lines 4 and 10 are identical but they log different results according to the value of 'this'.

var name = 'Beyonce' 

function sayMyName(){ 
  console.log(`Your name is ${this.name}.`) //  'this' is  window 
}  

var heisenberg = { 
  name: 'Heisenberg', 
  sayMyName: function () { 
    console.log(`Your name is ${this.name}.`) //  'this' is heisenberg 
  }  
}  

sayMyName()   // Your name is Beyonce. 
heisenberg.sayMyName() // Your name is Heisenberg.

The code above works fine, but we repeated line 4 which is not cool (remember: DRY Don't Repeat Yourself).

There is a way to write the console.log() only once and reuse it. To do that, we use the function bind.

'this' with bind

Bind applies a given 'this' (an object) to the function that is calling it. The object that you want to bind to the function is passed as a parameter to bind.

See example:

function sayMyName(){ 
  console.log(`Your name is ${this.name}.`)  
}  

var beyonce = { 
  name: 'Beyonce', 
} 

var heisenberg = { 
  name: 'Heisenberg', 
} 

let sayBeyonce= sayMyName.bind(beyonce)    
let sayHeisenberg= sayMyName.bind(heisenberg) 

sayBeyonce() // Your name is Beyonce. 
sayHeisenberg() // Your name is Heisenberg.

Nice! Now, let's say we didn't want to create new functions to say each person's name. We only want to use sayMyName() .

We can do so with the call function and a generic person object.

'this' with call

Like bind, call can be used to set a custom value to 'this'.

See the example:

var person = { 
  sayMyName: function(){ console.log(`Your name is ${this.name}.`)}; 
} 

var beyonce = { 
  name: 'Beyonce', 

};   

var heisenberg = { 
  name: 'Heisenberg', 
}; 

person.sayMyName.call(beyonce); // Your name is Beyonce. 
person.sayMyName.call(heisenberg); // Your name is Heisenberg.

'this' with arrow functions

Be careful with arrow functions 🏹

When an arrow function is used, it doesn’t set a new value to 'this'. Instead, it inherits the one from the parent scope.

This example is identical to the previous one, but with an arrow function instead of a normal one.

It logs "Ash" twice to the console. Weird, right?

var name = 'Ash'; 

var person = { 
  sayMyName: () => console.log(`Your name is ${this.name}.`) 
}; 

var beyonce = { 
  name: 'Beyonce', 
};  

var heisenberg = { 
  name: 'Heisenberg', 
}; 

person.sayMyName.call(beyonce); // Your name is Ash. 
person.sayMyName.call(heisenberg); // Your name is Ash.

Even if you use call/bind, it won't work. It still logs "Ash". Why?

'this' with regular vs arrow functions

Regular functions set their own 'this' object to the caller.

BUT, Arrow functions don't. They inherit 'this' from the previous context, aka from the scope it sits inside. In this case, from window. This is called "lexical scoping".

So, when we used an arrow function, 'this' had nothing to do with the caller of the function. It was still equal to window and it stayed that way, logging "Ash" as a result.

What if we wrap the arrow function with a regular function?

The regular function is called and sets 'this' to the caller person.

The arrow function is called from inside the regular function. 'this' value in the arrow function inherits 'this' value from the outer (regular) function. So it works!

var name = 'Ash'; 

var person = { 
  sayMyName: function () { 
    const arrowFunction = () => console.log(`Your name is ${this.name}.`); 
    arrowFunction(); 
  }, 
};  

var beyonce = { 
  name: 'Beyonce', 
}; 

var heisenberg = { 
  name: 'Heisenberg', 
};  

person.sayMyName.call(beyonce); // Your name is Beyonce. 
person.sayMyName.call(heisenberg); // Your name is Heisenberg.

Cool. So using arrow functions is bad? Not at all. There are many use cases when you actually want to inherit 'this' from the surrounding context. In those cases, arrow functions are super useful.

Useful cases of 'this' with arrow functions

Let's see an example. Here, we want to log a different name every 2 seconds by using an array of names. If we run this code, we get the error: [Uncaught TypeError: Cannot read property 'forEach' of undefined].

var people = { 
  names: ['Ash', 'Beyonce', 'Heisenberg'], 

  sayNames: function () { 

    // log each name after 1 second 
    setTimeout(function () { 
      console.log(this); 
      this.names.forEach(function (name) { 
        console.log('your name is' + name); 
      }); 
    }, 2000); 
  }, 
}; 

people.sayNames();

Why?

When sayNames is called it sets 'this' to be the people object. But when setTimeout is called, it sets 'this' to be the window. The window doesn't have a names property. How do we solve that?

You guessed it right! We use an arrow function, which will inherit the 'this' from its outer context. In other words, it will inherit 'this' from sayNames context.

var people = { 
  names: ['Ash', 'Beyonce', 'Heisenberg'], 

  sayNames: function () { 
    console.log(this); 

    // log each name after 1 second 
    setTimeout( ()=> { 
      console.log(this); 
      this.names.forEach(function (name) { 
        console.log('your name is ' + name); 
      }); 
    }, 2000); 
  }, 
}; 

people.sayNames();

About me, let's connect! 👋👩‍💻

Thanks for reading! I'm an avid learner and I love sharing what I know. I teach coding live for free 👉 here and I share coding tips on my Twitter . If you want to, come visit and say hi in the chat 😁

10 useful VS Code shortcuts you should know ()

Mariana Simon — Wed, 14 Apr 2021 20:36:39 +0000

This is a curated list of the shortcuts you should learn as soon as possible. I really wish I knew them when I started coding. It would have saved me hours of manual typing.

Default shortcuts for Linux. Mac and Windows shortcuts are displayed below if different.

1. Ctrl+P : Displays the search bar to search for files

(Mac: Cmd + P)
You will navigate between files all the time. You can type the file name and open it by pressing enter.

2. Ctrl + Shift + P: Displays the command pallete

(Mac: Cmd + Shift + P)
Displays the command pallete where you can search for an action.

3. Crtl + B : Toggle the sidebar

(Mac: Cmd + B)
Show or hide the side bar where you can navigate through the explorer.

4. Ctrl+Shift+E : Move to Explorer window

(Mac: Cmd + Shift + E)
Move to Explorer window where you have your file tree and can navigate using the arrow keys.

5. Ctrl + Shift + M : Quickly shows errors and warnings

(Mac: Cmd + Shift + M)
Everybody likes bug-free code. This command shows the problems panel where you can see identified errors and warnings.

6. Ctrl + Shift + L: Multi cursor selection

(Mac: Cmd + Shift + L)
Add additional cursors to edit all occurrences of the current selection. Usually less error-prone than doing search and replace all.

7. Ctrl + D : One by one selection

(Mac: Cmd+D)
Similar to the previous one, but use Ctrl + D if you want to add the occurrences of the current selection one by one. Each time you press the key combination it adds a new occurrence to the selection.

8. Ctrl+/ : Toggle line comment

(Mac: Cmd+/)
Toggle between commented and uncommented line behavior.

9. Ctrl + Shift + I: Formats the entire file

(Mac: Shift + Option + F, Windows: Windows Shift + Alt + F)
Formats the entire active file or prompts you to install a Formatter extension. I use Prettier extension to format JS code

10. Alt + Up or Alt + Down: Move line

(Mac: Opt+Down or Opt+Up)
Pretty straightforward. Move line up and down.

Bonus: Wrap with Abbreviation.

Helps you add that missing div tag to an HTML block for example. It is not enabled by default, you need to do it in keyboard shortcuts preferences. Use shortcut 2 listed here (yeah \0/) -> type Preferences:Open Keyboard Shortcuts -> search for Emmet: Wrap with Abbreviation -> choose a key to bind it. I use Alt + M.

Honarable mention:

Ctrl + Space : Show Suggestions
Shows suggestions to quickly fill properties and other stuff.

About me, let's connect! 👋👩‍💻

I'm an avid learner and I love sharing what I know. I teach coding live for free 👉 here and I share coding tips on my Twitter . If you want to, come visit and say hi in the chat 😁