Get icon from image file - CSS

CSS to get Carret symbol

.carret{ display: inline-block; width: 0; height: 0; border-top: 10px solid; border-top: 4px solid \9; border-right: 10px solid transparent; border-left: 10px solid transparent; }

---

Use Image icon file, and get the required image by background-position

First icon from the image

Icon from the middle of image

.get-allicons{ background-image: url('https://www.bypeople.com/wp-content/uploads/2020/03/free-svg-icons-ui-development-1.png'); background-repeat: no-repeat; display: inline-block; vertical-align: sub; width: 45px; height: 45px; position: relative; top: 1px; vertical-align: middle; } .iconoff1{ background-position: -10px -10px; } .iconoff2{ background-position: -319px -1348px; }

Clone columns of the table using jQuery

Following is the example where you can clone required columns and sequence from the source table to the new table

table columns like (source table) sr.no | name | address | city | DOB clone to another table with (target table) sr.no | name cloneTable("#source","#target",[0,1]) or clone to another table with (target table) sr.no | name | city cloneTable("#source","#target",[0,3,1]); function cloneTable(source,target,cols) { target = $(target); $(`${source} tr`).each(function() { let tds = $(this).children(), row = $("<tr></tr>"); for(let c of cols) row.append(tds.eq(c).clone()); row.appendTo(target); }); }//cloneTable

Read File Content from SharePoint List Items

Working function, where you can read file content available as an attachment in your SharePoint list item.
#sharepoint #jquery #sharepointsolutions

     <div> <h1>Read File</h1> <div> <input type="file" id="file_input"> </div> <div> <div id="readfiletextarea" rows="5" style="width:400px;"></div> <a href="#" onclick="loadURLToInputFiled('https://domain.sharepoint.com/sites/Lists/myList/Attachments/1/myFile.csv')">Click to Load File</a> <br /> <a href="#" onclick="readfiledata()">Click to Read File</a> <br /> /*Read attachment data and display*/ function readfiledata(){ let input = document.getElementById('file_input') let textarea = document.getElementById('readfiletextarea') let files = input.files; if (files.length == 0) return; const file = files[0]; let reader = new FileReader(); reader.onload = (e) => { const file = e.target.result; const lines = file.split(/\r\n|\n/); textarea.value = lines.join('\n'); }; reader.onerror = (e) => alert(e.target.error.name); reader.readAsText(file); } /*Load URL to input type file */ function loadURLToInputFiled(url){ getURL(url, (fileBlob)=>{ // Load img blob to input // WIP: UTF8 character error let fileName = 'tmpfile.txt' let file = new File([fileBlob], fileName,{type:"text/txt", lastModified:new Date().getTime()}, 'utf-8'); let container = new DataTransfer(); container.items.add(file); document.querySelector('#file_input').files = container.files; }) } // xmlHTTP return blob respond function getURL(url, callback){ var xhr = new XMLHttpRequest(); xhr.onload = function() { callback(xhr.response); }; xhr.open('GET', url); xhr.responseType = 'blob'; xhr.send(); }

VS-Code Cheatsheet

BASICS

Ctrl+Shift+N
New window/instance

Ctrl+Shift+W
Close window/instance

Ctrl+Shift+P or F1
Show Command Palette

Ctrl+P
Quick Open, Go to File

Ctrl+,
User Settings

Ctrl+K Ctrl+S
Keyboard Shortcuts

Ctrl+C
Copy line (empty selection)

Ctrl+X
Cut line (empty selection)

Alt+ ↑ / ↓
Move line up/down

Shift+Alt + ↓ / ↑
Copy line up/down

Ctrl+Shift+K
Delete line
 
Ctrl+Shift+Enter
Insert line above

Ctrl+Home
Go to beginning of file

Ctrl+End
Go to end of file

Home / End
Go to beginning/end of line

Ctrl+↑ / ↓
Scroll line up/down

Ctrl+Shift+\
Jump to matching bracket

Ctrl+Enter
Insert line below Basic editing

Ctrl+] / [
Indent/outdent line

Ctrl+Shift+[
Fold (collapse) region

Ctrl+Shift+]
Unfold (uncollapse) region


Alt+PgUp / PgDn
Scroll page up/down Basic editing
 
Ctrl+/
Toggle line comment

Alt+Z
Toggle word wrap

Ctrl+K Ctrl+U
Remove line comment Navigation

Ctrl+T
Show all Symbols

Ctrl+P
Go to File...

Ctrl+K Ctrl+[
Fold (collapse) all subregions

Ctrl+K Ctrl+0
Fold (collapse) all regions

Ctrl+K Ctrl+J
Unfold (uncollapse) all regions

Ctrl+K Ctrl+]
Unfold (uncollapse) all subregions

Ctrl+K Ctrl+C
Add line comment

Ctrl+Shift+O
Go to Symbol
 
Ctrl+G
Go to Line Navigation

Ctrl+Shift+M
Show Problems panel

Shift+F8
Go to previous error or warning

Ctrl+Shift+Tab
Navigate editor group history

F8
Go to next error or warning

SEARCH AND REPLACE

Ctrl+F
Find

F3 / Shift+F3
Find next/previous

Alt+Enter
Select all occurences of Find match

Ctrl+H
Replace Search and replace

Ctrl+D
Add selection to next find match

Alt+C / R / W
Toggle case
 
Ctrl+K Ctrl+D
Move last selection to next find match

MULTI CURSOR SELECTION

Alt+Click
Insert cursor

Ctrl+U
Undo last cursor operation

Shift+Alt+I
Insert cursor at end of each line selected

Ctrl+Alt+ ↑ / ↓
Insert cursor above / below

Ctrl+L
Select current line

Ctrl+F2
Select all occurrences of current word

Shift+Alt+ →
Expand selection

Ctrl+Shift+L
Select all occurrences of current selection

Shift+Alt+ ←
Shrink selection

Ctrl+Shift+Alt + (arrow key)
Column (box) selection
 
Ctrl+Shift+Alt + PgUp/PgDn
Column (box) selection page up/down

Shift+Alt + (drag mouse)
Column (box) selection

LANGUAGE EDITING

F2
Rename

F12
Go to Definition

Ctrl+K F12
Open Definition to the side

Ctrl+.
Quick Fix

Alt+F12
Peek Definition

Ctrl+Space, Ctrl+I
Trigger suggestion

Shift+Alt+F
Format document

Ctrl+K Ctrl+F
Format selection
 
Ctrl+Shift+Space
Trigger parameter hints

Shift+F12
Show References

Ctrl+K Ctrl+X
Trim trailing whitespace

Ctrl+K M
Change file language

EDITOR

Ctrl+K Ctrl+ ←/→
Focus into previous/next editor group

Ctrl+K ← / →
Move active editor group

Ctrl+F4, Ctrl+W
Close editor

Ctrl+\
Split editor

Ctrl+ 1 / 2 / 3
Focus into 1st, 2nd or 3rd editor group

Ctrl+K F
Close folder

Ctrl+Shift+PgUp / PgDn
Move editor left/right
 
Ctrl+M
Toggle Tab moves

Shift+Alt+A
Toggle block comment

FILE MANAGEMENT

Ctrl+N
New File

Ctrl+S
Save

Ctrl+Shift+S
Save As

Ctrl+O
Open File

Ctrl+K S
Save All

Ctrl+K Ctrl+W
Close All

Ctrl+Shift+T
Reopen closed editor

Ctrl+F4
Close

Ctrl+K
Enter Keep preview mode editor open
 
Ctrl+Shift+Tab
Open previous

Ctrl+K P
Copy path of active file

Ctrl+Tab
Open next

Ctrl+K R
Reveal active file in Explorer

Ctrl+K O
Show active file in new window/instance

DISPLAY

F11
Toggle full screen

Ctrl+Shift+E
Show Explorer / Toggle focus

Ctrl+Shift+G
Show Source Control

Ctrl+Shift+D
Show Debug

Ctrl+Shift+F
Show Search Display

Ctrl+Shift+X
Show Extensions
 
Ctrl+Shift+J
Toggle Search details

Ctrl+Shift+U
Show Output panel

Ctrl+Shift+H
Replace in files

Ctrl+Shift+V
Open Markdown preview

Ctrl+ +/ 
Zoom in/out

Ctrl+B
Toggle Sidebar visibility

Shift+Alt+0
Toggle editor layout (horizontal/vertical)

Ctrl+K Z
Zen Mode (Esc, Esc to exit)

Ctrl+K V
Open Markdown preview to the side

DEBUGGING

F5
Start/Continue Debug

F9
Toggle breakpoint
 
F10
Step over

Shift+F5
Stop

F11 / Shift+F11
Step into/out

Ctrl+K Ctrl+I
Show hover Integrated terminal

Ctrl+`
Show integrated terminal

Ctrl+C
Copy selection

Ctrl+V
Paste into active terminal

Ctrl+Shift+`
Create new terminal Integrated terminal

Ctrl+↑ / ↓
Scroll up/down

Ctrl+Home /
End Scroll to top/bottom

Shift+PgUp / PgDn
Scroll page up/down

Free resources links on web development over the internet

Free resources on web development

ONLINE LEARNING PLATFORM

1. Free Code Camp https://www.freecodecamp.org/
2. Udemy https://www.udemy.com/
3. Treehouse https://teamtreehouse.com/
4. Udacity https://www.udacity.com/
5. Cousera https://www.coursera.org/
6. Sololearn https://www.sololearn.com/
7. Frontend Masters https://frontendmasters.com/
8. W3Schools https://www.w3schools.com/
9. Codeacademy https://www.codecademy.com/
10. Traversy Media https://www.traversymedia.com/

YOUTUBE CHANNELS

1. FreeCodeCamp https://youtube.com/c/Freecodecamp
2. Traversy Media https://youtube.com/c/TraversyMedia
3. Dev Ed https://youtube.com/c/DevEd
4. Programming With Mosh https://youtube.com/c/programmingwithmosh
5. Tyler Moore https://youtube.com/user/Conutant
6. Web Bos https://youtube.com/c/WesBos
7. Coding The Smart Way https://youtube.com/c/Codingthesmartway
8. Code With Harry https://youtube.com/c/CodeWithHarry
9. Clever Programmer https://youtube.com/c/CleverProgrammer
10. Yahoo Baba https://youtube.com/c/YahooBaba
11. Design Course https://youtube.com/c/DesignCourse

DOCUMENTS

1. Dev Docs https://devdocs.io/
2. GeeksForGeeks https://devdocs.io/
3. Tutorials Point https://www.tutorialspoint.com/
4. W3Schools https://www.w3schools.com/
5. Java Point https://www.javatpoint.com/

APPLICATIONS

1. Programming Hub https://programminghub.io/
2. Grasshopper https://careerkarma.com/blog/grasshopper-app-review/
3. Encode https://play.google.com/store/apps/details?id=com.upskew.encode&hl=en
4. Mimo https://getmimo.com/
5. Programming Hero https://www.programming-hero.com/
6. Sololearn https://www.sololearn.com/
7. Khan Academy https://www.khanacademy.org/computing/computer-programming
8. W3Schools https://www.w3schools.com/

BLOG WEBSITES

1. CSS Tricks https://css-tricks.com/
2. Smashing Magazine https://www.smashingmagazine.com/
3. Site Point https://www.sitepoint.com/
4. Dev Community https://dev.to/
5. Evanto Tuts https://tutsplus.com/
6. Medium https://medium.com/

CHEAT SHEETS

1. Over API https://overapi.com/
2. Awesome Cheat Sheets https://lecoupa.github.io/awesome-cheatsheets/
3. HTML5 Element Index http://html5doctor.com/element-index/
4. HTML CheatSheet https://htmlcheatsheet.com/
5. Can I Use https://caniuse.com/
6. CSS Animation http://www.justinaguilar.com/animations/
7. CSS Grid Cheat Sheet https://grid.malven.co/
8. CSS Flexbox Cheat Sheet https://flexbox.malven.co/
9. CSS Easing Functions https://easings.net/

FREE COURSES

1. Web Development Learn By Doing HTML5 & CSS3 From Scratch https://www.u
2. Master The Basics Of HTML5 & CSS3 Beginner Web Development https://www.udemy.com/c
3. HTML And CSS Foundations https://www.udemy.com/course/html-and-css-foundations/
4. Build Your First Website In 1 Week https://www.udemy.com/course/build-your-first-website-in-1-week/
5. Introduction To CSS Beginners Guide To CSS Web Design https://www.udemy.com/course

BOOKS

1. CSS Pocket Reference https://drive.google.com/file/d/1fqKiCvkESei14Oh3RoGCBBJkewZ3-
2. CSS3 The Missing Manual https://drive.google.com/file/d/1deKgQjs9O0MoivQvDH3wyLz_nrU
3. Head First HTML & CSS https://drive.google.com/file/d/1Ig31aq3gEd6qyOuLuvL1aeJXlE_A1B
4. HTML & CSS Design & Build Websites - https://drive.google.
5. HTML5 https://drive.google.com/file/d/1nxYanqOOsA3olZkfIL5BZsMoax_MMQ0R/vi ew?
6. CSS3 https://drive.google.com/file/d/1clN8z5fH0cjR4NiBZTNXbS6dfw0GOjhr/vie w?usp=shari

CODE SNIPPETS

1. Codepen https://codepen.io/
2. Free Frontend https://freefrontend.com/
3. Code My UI https://codemyui.com/
4. Play Code https://playcode.io/
5. JS Bin https://jsbin.com/
6. JS Fiddle https://jsfiddle.net/
7. CodeSandBox https://codesandbox.io/
8. Web Code Tools https://webcode.tools/
9. CSS Flow https://www.cssflow.com/
10. CodePly https://www.codeply.com/
11. CodePad https://coderpad.io/
12. CSS Deck https://cssdeck.com/
13. Code Interview https://codeinterview.io/

FREE WEB HOSTING

1. GitHub Pages https://github.com/
2. Netlify https://www.netlify.com/
3. AWS https://aws.amazon.com/
4. Firebase https://firebase.google.com/
5. Infinity Free https://infinityfree.net/
6. WordPress https://wordpress.com/
7. Wix https://www.wix.com/
8. Weebly https://www.weebly.com/in
9. Shopify https://www.shopify.in/

CODE CHALLENGING WEBSITES

1. TopCoder https://www.topcoder.com/challenges/?pageIndex=1
2. Coderbyte https://www.coderbyte.com/
3. HackerRank https://www.hackerrank.com/domains
4. CodeChef https://www.codechef.com/
5. Codewars https://www.codewars.com/
6. LeetCode https://leetcode.com/

FREE ONLINE GAMES

1. Floxbox Defense http://www.flexboxdefense.com/
2. Unflod https://unfold.com/
3. Grid Garden https://cssgridgarden.com/
4. CSS Diner https://flukeout.github.io/
5. Code Combat https://codecombat.com/
6. Coding Game https://www.codingame.com/
7. Screeps https://screeps.com/
8. Flexbox Froggy https://flexboxfroggy.com/
9. Code Monkey https://www.codemonkey.com/
10. Cyber Dojo https://www.cyber-dojo.org/creator/home

CSS GENERATORS

1. CSS Grid Generator https://cssgrid-generator.netlify.app/
2. CSS Flexbox Generator https://cssflex-generator.netlify.app/
3. CSS Matic https://www.cssmatic.com/
4. Patternify http://www.patternify.com/
5. ColorZilla Gradients https://www.colorzilla.com/gradient-editor/
6. Gradient Generator https://cssgradient.io/
7. CSS Layout Generator https://csslayout.io/
8. Animation Generator https://cssanimate.com/
9. CSS3 Generator https://css3generator.com/
10. Web Code Tools https://webcode.tools/generators/css

FREE TEMPLATES

1. Templated https://themewagon.com/author/templated/
2. Zero Theme https://www.zerotheme.com/
3. UI Deck https://uideck.com/
4. Admin UI Themes https://athemes.com/collections/free-bootstrap-admin-templates/
5. HTML5 Up https://html5up.net/
6. Theme Wagon https://themewagon.com/
7. ColorLib https://colorlib.com/
8. W3Layouts https://w3layouts.com/

GITHUB REPOSITORIES

1. Awesome CSS https://github.com/awesome-css-group/awesome-css
2. Web Developer Roadmap https://github.com/kamranahmedse/developer-roadmap
3. JavaScript Algorithms https://github.com/trekhleb/javascript-algorithms
4. Awesome Learning Resources https://github.com/lauragift21/awesome-learning-resources
5. Clean Code JavaScript https://github.com/ryanmcdermott/clean-code-javascript
6. Frontend Checklist https://github.com/thedaviddias/Front-End-Checklist
7. JavaScript Concepts https://github.com/leonardomso/33-js-concepts
8. 30 Seconds Of Code https://github.com/30-seconds/30-seconds-of-code
9. CSS Protips https://github.com/AllThingsSmitty/css-protips

COLOR PALETTES

1. Color Hunt https://colorhunt.co/
2. HTML Color Code https://htmlcolorcodes.com/
3. Coolors https://coolors.co/
4. UI Gradients https://uigradients.com/
5. Gradient Genarator https://www.colorzilla.com/gradient-editor/
6. Flat UI Colors https://flatuicolors.com/

CHROME EXTENSIONS

1. CSS Peeper https://chrome.google.com/webstore/detail/css- peeper/mbnbehi
2. Colorpick Eyedropper https://chrome.google.com/webstore/detail/
3. Window Resizer https://chrome.google.com/webstore/detail/window- res
4. Lorem Ipsum Generator https://chrome.google.com/webstore/d
5. CSS Scan https://chrome.google.com/webstore/detail/css- scan/gieabiemggnpn
6. CSS Viewer https://chrome.google.com/webstore/detail/css-v
7. HTML Validator https://chrome.google.com/webstore/detail/k
8. Wappalyzer https://chrome.google.com/webstore/detail/wappalyzer/gppongmhj
9. JSON Viewer https://chrome.google.com/webstore/detail/json- 19
10. viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=en US

ICONS

1. Font Awesome https://fontawesome.com/
2. Icons8 https://icons8.com/
3. Flaticon https://www.flaticon.com/
4. Pixeden https://www.pixeden.com/
5. Fontello https://fontello.com/
6. Icon Finder https://www.iconfinder.com/
7. Captain Icon https://mariodelvalle.github.io/CaptainIconWeb/
8. Endless Icons https://endlessicons.com/
9. Icon Icons - https://icon-icons.com/
10. Round Icons https://roundicons.com/

ILLUSTRATIONS

1. Freepik https://www.freepik.com/
2. Undraw https://undraw.co/
3. Drawkit https://www.drawkit.io/
4. Humaaans https://www.humaaans.com/
5. Handz https://www.handz.design/
6. Open Doodles https://www.opendoodles.com/
7. Illustration. co http://illustration.co/
8. Vivid Js https://webkul.github.io/vivid/
9. Many Pixels https://www.manypixels.co/

NEWSLETTERS

1. JavaScript Weekly https://javascriptweekly.com/
2. Node.js Weekly https://nodeweekly.com/
3. FrontEnd Focus https://frontendfoc.us/
4. WebTools Weekly https://webtoolsweekly.com/
5. CSS Weekly https://css-weekly.com/
6. JavaScript Kicks https://javascriptkicks.com/

WEB DESIGN INSPIRATION

1. Behance https://www.behance.net/
2. Awwwards http://www.awwwards.com/
3. CSS Nectar http://cssnectar.com/
4. SiteInspire https://www.siteinspire.com/
5. Frontend Mentor https://www.frontendmentor.io/

ANIMATION LIBRARIES

1. Animate. CSS http://daneden.github.io/animate.css/
2. Bounce JS http://bouncejs.com/
3. Anime JS http://anime-js.com/
4. CSShake http://elrumordelaluz.github.io/csshake/#1
5. Hover. CSS http://ianlunn.github.io/Hover/

SOME MORE USEFUL WEBSITES

1. Hidden Tools https://hiddentools.dev/
2. Iconscout https://iconscout.com/
3. CSS Zen Garden http://www.csszengarden.com/
4. A List Apart https://alistapart.com/
5. Code Project https://www.codeproject.com/
6. Scotch https://scotch.io/
7. The Odin Project https://www.theodinproject.com/
8. CSS Autor https://cssauthor.com/
9. Gradient Magic https://www.gradientmagic.com/
10. Trianglify https://trianglify.io/
11. CSS Reference https://cssreference.io/
12. HTML Reference https://htmlreference.io/
13. Free CSS https://www.free-css.com/
14. Fun JavaScript Projects https://fun-javascript-projects.com/
15. Daily Dev https://daily.dev/
16. Dev Docs https://devdocs.io/
17. What Runs https://www.whatruns.com/
18. 1LOC https://1loc.dev/
19. Am i Responsive http://ami.responsivedesign.is/
20. Shape Divider https://www.shapedivider.app/

SOME MORE USEFUL WEBSITES

1. Fancy Border Radius https://9elements.github.io/fancy-border-radius/
2. CSS Clip Path https://bennettfeely.com/clippy/
3. 30 Seconds Of Code https://www.30secondsofcode.org/
4. Undraw https://undraw.co/
5. Humaaans https://www.humaaans.com/

Helpful Tools for Web-Developer on internet

Small Dev Tools

Free tools for devs like HTML/CSS/Javascript formatters, minifies, fake or test data generators, and many more.

https://smalldev.tools/

Code Snippets

Create and share beautiful images of your source code. Start typing or drop a file into the text area to get started.

https://carbon.now.sh

Code Converter

It's a useful tool where you can write and convert code from one programming language to another language.

https://ide.onelang.io

CSS Tricks

 1) Custom input colour using the accent-colour property.

You can use the CSS property accent-colour to change the colour of your input element, and yes you can use input[type="inputType"] for selecting a specific input element based on its type.

<input type = "checkbox">

<input type = "radio">

<input type = "range">

CSS

input[type="checkbox"]{
   accent-color:lime;
}

input[type="radio"]{
   accent-color:red;
}

input[type="range"]{
   accent-color:blue;
}

2) Text cut-out using the mix-blend-mode property.

You can use the mix-blend-mode CSS property to cut out your text which gives your text a transparent look.

<div class = "container">

   <h1 class="text-cutout">CSS Tricks</h1>

</div>

CSS

.container{

   background-image: url("https://cutt.ly/nNnH6GG");

}

.text-cutout{

  background-color:#f1f1f1;

  border-radius:8px;

  padding:2rem 5rem;

  mix-blend-mode:screen;

}

3) Shadow effect for PNG images.

You might know that we can use the box-shadow property to give a shadow effect to any element, but when we use it on some image element which contains a transparent PNG image then sometimes you might want a different result than what box-shadow gives you. You can use the drop shadow CSS property to get a shadow effect on a PNG image.

<img class="image1" src="fish.png">

<img class="image2" src="fish.png">

CSS

.image1{

   box-shadow:5px 5px 5px #808080;

}

.image2{

   filter: drop-shadow(5px 5px 5px #808080);

}

Reference post