├── CONTRIBUTING.md
├── CSS.md
├── HTML.md
├── JAVASCRIPT.md
├── LICENSE
└── README.md


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Thank you! ❤️
 2 | 
 3 | Thank you for contributing to our awesome tips.
 4 | 
 5 | ## Guidelines
 6 | 
 7 | - **One item** per Pull Request.
 8 | 
 9 | - Pull request should include a title which describes the tip, an optional short description, code and an optional link to the codepen.
10 | 
11 | <details>
12 | <summary>Example:</summary>
13 |   
14 | 
15 | ## Fieldset Element
16 | 
17 | You can use `<fieldset>` element to group several controls as well as labels (`<label>`) within a web form.
18 | 
19 | ```html
20 | <form>
21 |   <fieldset>
22 |     <legend>Choose your favorite language</legend>
23 | 
24 |     <input type="radio" id="javascript" name="language">
25 |     <label for="javascript">JavaScript</label><br/>
26 | 
27 |     <input type="radio" id="python" name="language">
28 |     <label for="python">Python</label><br/>
29 | 
30 |     <input type="radio" id="java" name="language">
31 |     <label for="java">Java</label>
32 |   </fieldset>
33 | </form>
34 | ```
35 | </details>
36 | 
37 | - Don't forget to add an anchor link in the table of contents. The format of the link should be like this: - `[Base Element](#base-element)`.
38 | 
39 | - Don't open issues with new tips, open a PR instead.
40 | 
41 | ## Thank you! ❤️
42 | 


--------------------------------------------------------------------------------
/CSS.md:
--------------------------------------------------------------------------------
  1 | # Awesome CSS Tips ![Awesome][awesome-badge]
  2 | 
  3 | #### Contents
  4 | 
  5 | - [Cursors](#cursors)
  6 | - [Smooth Scrolling](#smooth-scroll)
  7 | - [Truncate Text](#truncate-text)
  8 | - [Truncate Text To The Specific Number Of Lines](#truncate-text-to-the-specific-number-of-lines)
  9 | - [Calc Function](#calc-function)
 10 | - [CSS-only modals](#css-only-modals)
 11 | - [Center anything](#center-anything)
 12 | - [Sticky sections](#sticky-sections)
 13 | - [:empty selector](#empty-selector)
 14 | 
 15 | ## Cursors
 16 | 
 17 | Did you know that you can use your own image, or even emoji as a cursor? 
 18 | 
 19 | ```css
 20 | div {
 21 |     cursor: url('path-to-image.png'), url('path-to-fallback-image.png'), auto;
 22 | }
 23 | ```
 24 | 
 25 | [Link to Codepen](https://codepen.io/denic/pen/bGVpOPj)
 26 | 
 27 | ## Smooth Scroll
 28 | 
 29 | Smooth scrolling without #javascript, with just one line of CSS.
 30 | 
 31 | ```css
 32 | html {
 33 |     scroll-behavior: smooth;
 34 | }
 35 | ```
 36 | 
 37 | [Link to Codepen](https://codepen.io/denic/pen/bGVeYqN)
 38 | 
 39 | ## Truncate Text
 40 | 
 41 | Did you know that you can truncate text with plain CSS?
 42 | 
 43 | ```css
 44 | .overflow-truncate {
 45 |     text-overflow: ellipsis;
 46 | }
 47 | ```
 48 | 
 49 | [Link to Codepen](https://codepen.io/denic/pen/LYpZKMg)
 50 | 
 51 | ## Truncate Text To The Specific Number Of Lines
 52 | 
 53 | You can use `-webkit-line-clamp` property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped.
 54 | 
 55 | ```css
 56 | .overflow-truncate {
 57 |     display: -webkit-box;
 58 |     -webkit-box-orient: vertical;
 59 |     -webkit-line-clamp: 3;
 60 |     overflow: hidden;
 61 | }
 62 | ```
 63 | 
 64 | [Link to Codepen](https://codepen.io/denic/pen/pojEKGX)
 65 | 
 66 | ## Calc Function
 67 | 
 68 | The `calc()` CSS function lets you perform calculations when specifying CSS property values.
 69 | 
 70 | ```css
 71 | div {
 72 |     width: calc(100% - 30px);
 73 | }
 74 | ```
 75 | 
 76 | ## CSS-only modals
 77 | 
 78 | You can use the :target pseudo-class to create modals with zero JavaScript.
 79 | 
 80 | ```css
 81 | .modal {
 82 |     visibility: hidden;
 83 | }
 84 | 
 85 | /*
 86 |     Selects an element with an id matching the current URL's fragment
 87 |     Example: example.com#demo-modal
 88 | */
 89 | .modal:target {
 90 |     visibility: visible;
 91 | }
 92 | ```
 93 | 
 94 | [Link to Codepen](https://codepen.io/denic/pen/ZEbKgPp)
 95 | 
 96 | ## Center anything
 97 | 
 98 | Easily center anything, horizontally and vertically, with 3 lines of CSS.
 99 | 
100 | ```css
101 | .parent {
102 |     display: flex;
103 |     align-items: center;
104 |     justify-content: center;
105 | }
106 | ```
107 | 
108 | ## Sticky sections
109 | 
110 | You can create sticky section headers with 2 lines of CSS.
111 | 
112 | ```css
113 | .sticky {
114 |     position: sticky;
115 |     top: 0;
116 | }
117 | ```
118 | 
119 | [Link to Codepen](https://codepen.io/denic/pen/jObYpaP)
120 | 
121 | ## `:empty` selector
122 | 
123 | You can use the `:empty` selector to style an element that has no children or text at all:
124 | 
125 | ```css
126 | .box {
127 |   background: #999;
128 | }
129 | 
130 | .box:empty {
131 |   background: #fff;
132 | }
133 | ```
134 | 
135 | [Link to Codepen](https://codepen.io/denic/pen/KKMpZdP)
136 | 
137 | [awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg
138 | 
139 | 


--------------------------------------------------------------------------------
/HTML.md:
--------------------------------------------------------------------------------
  1 | # Awesome HTML Tips ![Awesome][awesome-badge]
  2 | 
  3 | #### Contents
  4 | 
  5 | - [HTML Native Search](#html-native-search)
  6 | - [Fieldset Element](#fieldset-element)
  7 | - [Window Opener](#window-opener)
  8 | - [Base Element](#base-element)
  9 | - [Details Element](#details-element)
 10 | - [Live Reload](#liveReload)
 11 | 
 12 | ## HTML Native Search
 13 | 
 14 | ```html
 15 | <div class="wrapper">
 16 |   <h1>
 17 |     Native HTML Search
 18 |   </h1>
 19 | 
 20 |   <input list="items">
 21 | 
 22 |   <datalist id="items">
 23 |     <option value="Marko Denic">
 24 |     <option value="FreeCodeCamp">
 25 |     <option value="FreeCodeTools">
 26 |     <option value="Web Development">
 27 |     <option value="Web Developer">
 28 |   </datalist>
 29 | </div>
 30 | ```
 31 | 
 32 | [Link to Codepen](https://codepen.io/denic/pen/WNQbvbo)
 33 | 
 34 | ## Fieldset Element
 35 | 
 36 | You can use <fieldset> element to group several controls as well as labels (<label>) within a web form.
 37 | 
 38 | ```html
 39 | <form>
 40 |   <fieldset>
 41 |     <legend>Choose your favorite language</legend>
 42 | 
 43 |     <input type="radio" id="javascript" name="language">
 44 |     <label for="javascript">JavaScript</label><br/>
 45 | 
 46 |     <input type="radio" id="python" name="language">
 47 |     <label for="python">Python</label><br/>
 48 | 
 49 |     <input type="radio" id="java" name="language">
 50 |     <label for="java">Java</label>
 51 |   </fieldset>
 52 | </form>
 53 | ```
 54 | 
 55 | [Link to Codepen](https://codepen.io/denic/pen/BaNXWNj)
 56 | 
 57 | ## Window Opener
 58 | 
 59 | Pages opened with target=”_blank” allow the new page to access the original’s window.opener. This can have security and performance implications. Include rel=”noopener” or rel=”noreferrer” to prevent this.
 60 | 
 61 | ```html
 62 | <a href="https://freecodetools.org" target="_blank" rel="noopener">
 63 |   Free Code Tools
 64 | </a>
 65 | ```
 66 | 
 67 | ## Base Element
 68 | 
 69 | If you want to open all links in the document in a new tab, you can use <base> element:
 70 | 
 71 | ```html
 72 | <head>
 73 |    <base target="_blank">
 74 | </head>
 75 | <!-- This link will open in a new tab. -->
 76 | <div class="wrapper">
 77 |   This link will be opened in a new tab: &nbsp;
 78 |   <a href="https://freecodetools.org/">
 79 |     Free Code Tools
 80 |   </a>
 81 | </div>
 82 | ```
 83 | 
 84 | [Link to Codepen](https://codepen.io/denic/pen/yLYYwJp)
 85 | 
 86 | ## Details Element
 87 | 
 88 | You can use the `details` element to create native HTML accordion.
 89 | 
 90 | ```html
 91 | <div class="wrapper">
 92 |   <details>
 93 |     <summary>
 94 |       Click me to see more details
 95 |     </summary>
 96 | 
 97 |     <p>
 98 |       More details.
 99 |     </p>
100 |   </details>
101 | </div>
102 | ```
103 | 
104 | [Link to Codepen](https://codepen.io/denic/pen/PozobRO)
105 | 
106 | [awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg
107 | 
108 | 
109 | 
110 | ## liveReload
111 |  Heard of VsCode LiveServer Extension? We are going to create something similar to that with a single line of HTML, All you have to do is change the content value to your desired value Example: content = "3000"
112 | 
113 | ```html
114 | <meta http-equiv="refresh" content="value(seconds)">
115 | ```
116 | 


--------------------------------------------------------------------------------
/JAVASCRIPT.md:
--------------------------------------------------------------------------------
  1 | # Awesome JavaScript Tips ![Awesome][awesome-badge]
  2 | 
  3 | #### Contents
  4 | 
  5 | - [Shorten an array](#shorten-an-array)
  6 | - [Short-circuits conditionals](#short-circuits-conditionals)
  7 | - [Assigning the remaining part of an array](#assigning-the-remaining-part-of-an-array)
  8 | - [Object property assigning to a variable with a different name](#object-property-assigning-to-a-variable-with-a-different-name)
  9 | - [Select a subset of columns to display when doing console.table()](#select-a-subset-of-columns-to-display-when-doing-consoletable)
 10 | - [Remove duplicate elements from the array](#remove-duplicate-elements-from-the-array)
 11 | - [Remove all falsy values from an array](#remove-all-falsy-values-from-an-array)
 12 | - [Convert a number to string](#convert-a-number-to-string)
 13 | - [Convert a numeric string to number](#convert-a-numeric-string-to-number)
 14 | - [Calculate the sum of all elements in array](#calculate-the-sum-of-all-elements-in-array)
 15 | - [Use template literals to concatenate strings](#use-template-literals-to-concatenate-strings)
 16 | - [Get the maximum of an array](#get-the-maximum-of-an-array)
 17 | - [Transform the array elements using the map function](#transform-the-array-elements-using-the-map-function)
 18 | - [Calculate the running sum of an array with currying](#calculate-the-running-sum-of-an-array-with-currying)
 19 | 
 20 | ## Shorten an array
 21 | 
 22 | You can set the length property to shorten an array.
 23 | 
 24 | ```javascript
 25 | const numbers = [1, 2, 3, 4, 5];
 26 | 
 27 | numbers.length = 3;
 28 | 
 29 | console.log(numbers); // Array(3) [1, 2, 3]
 30 | ```
 31 | 
 32 | ## Short-circuits conditionals
 33 | 
 34 | If you have to execute a function only if condition is true, you can use short-circuit.
 35 | 
 36 | ```javascript
 37 | // Instead of this
 38 | if (condition) {
 39 |     doSomething();
 40 | }
 41 | 
 42 | // You can use short-circuit
 43 | condition && doSomething();
 44 | ```
 45 | 
 46 | ## Assigning the remaining part of an array
 47 | 
 48 | When destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest pattern:
 49 | 
 50 | ```javascript
 51 | const [a, ...b] = [1, 2, 3, 4, 5];
 52 | console.log(a); // 1
 53 | console.log(b); // [2, 3, 4, 5]
 54 | ```
 55 | 
 56 | ## Object property assigning to a variable with a different name
 57 | 
 58 | A property can be unpacked from an object and assigned to a variable with a different name than the object property:
 59 | 
 60 | ```javascript
 61 | const obj = {a: 42, b: true};
 62 | const {a: foo, b: bar} = obj;
 63 | console.log(foo); // 42
 64 | console.log(bar); // true
 65 | ```
 66 | 
 67 | ## Select a subset of columns to display when doing console.table()
 68 | 
 69 | By default, `console.table()` lists all elements in each row. You can use the optional "columns" parameter to select a subset of columns to display:
 70 | 
 71 | ```javascript
 72 | // an array of objects, logging only firstName
 73 | function Person(firstName, lastName) {
 74 |   this.firstName = firstName;
 75 |   this.lastName = lastName;
 76 | }
 77 | 
 78 | const john = new Person("John", "Smith");
 79 | const jane = new Person("Jane", "Doe");
 80 | 
 81 | console.table([john, jane], ["firstName"]);
 82 | ```
 83 | 
 84 | ## Remove duplicate elements from the array
 85 | 
 86 | ```javascript
 87 | const myArray = [5, 4, 3, 'a', 5, 5, 'a'];
 88 | console.log([... new Set(myArray)]); // [5, 4, 3, "a"]
 89 | ```
 90 | 
 91 | ## Remove all falsy values from an array
 92 | 
 93 | ```javascript
 94 | const myArray = [1, undefined, NaN, 2, null, '@denicmarko', true, 3, false];
 95 | console.log(myArray.filter(Boolean)); // [1, 2, '@denicmarko', true, 3]
 96 | ```
 97 | 
 98 | ## Convert a number to string
 99 | 
100 | ```javascript
101 | const number = 403;
102 | console.log(number + ''); // '403'
103 | ```
104 | 
105 | ## Convert a numeric string to number
106 | 
107 | ```javascript
108 | const numericString = '403';
109 | console.log(+ numericString); // 403
110 | ```
111 | 
112 | ## Calculate the sum of all elements in array
113 | 
114 | You can use `reduce` method to calculate the sum of all elements in array:
115 | 
116 | ```javascript
117 | const myArray = [10, 20, 30, 40];
118 | const reducer = (total, currentValue) => total + currentValue;
119 | console.log(myArray.reduce(reducer)); // 100
120 | ```
121 | 
122 | ## Use template literals to concatenate strings
123 | 
124 | ```javascript
125 | let name = 'Horse';
126 | console.log(`The ${name} is sleeping`); // the Horse is sleeping 
127 | ```
128 | 
129 | ## Get the maximum of an array
130 | 
131 | ```javascript
132 | let arr = [3, 5, 1];
133 | console.log(Math.max(...arr)); // 5
134 | ```
135 | 
136 | ## Transform the array elements using the map function
137 | 
138 |  ```javascript
139 | const myArray = [1,2,3,4];
140 | 
141 | console.log(myArray.map(value => value * 2)); // [2, 4, 6, 8]
142 | ```
143 | 
144 | ## Calculate the running sum of an array with currying
145 | 
146 | Here, a function is called with the initial `sum` value of zero that returns a function which accumulates the values of `myArray`.
147 | 
148 | ```javascript
149 | const myArray = [1,1,1,1];
150 | 
151 | console.log(myArray.map((sum => value => sum += value)(0))); // [1, 2, 3, 4]
152 | ```
153 | 
154 | [awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg
155 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Marko Denic
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Awesome HTML/CSS/JS Tips ![Awesome][awesome-badge]
 2 | 
 3 | This is an awesome project about HTML/CSS/JavaScript tips and tricks. ⚡
 4 | 
 5 | Tips are added frequently! ⚡
 6 | 
 7 | Enjoy!
 8 | 
 9 | - [HTML](HTML.md)
10 | 
11 | - [CSS](CSS.md)
12 | 
13 | - [JavaScript](JAVASCRIPT.md)
14 | 
15 | If you like this repo, be sure to ⭐ it.
16 | 
17 | Please read [`contributing guidelines`](./CONTRIBUTING.md) before submitting new tips.
18 | 
19 | [awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg


--------------------------------------------------------------------------------