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

Dropdown Menu with Checkbox

     <script> $(".chkbox-menu").on("change", "input[type='checkbox']", function() { $(this).closest("li").toggleClass("active", this.checked); }); $(document).on('click', '.allow-focus', function (e) { e.stopPropagation(); }); </script> <style> .chkbox-menu li label { display: block; padding: 3px 10px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; margin:0; transition: background-color .4s ease; } .chkbox-menu li input { margin: 0px 5px; top: 2px; position: relative; } .chkbox-menu li.active label { background-color: #cbcbff; font-weight:bold; } .chkbox-menu li label:hover, .chkbox-menu li label:focus { background-color: #f5f5f5; } .chkbox-menu li.active label:hover, .chkbox-menu li.active label:focus { background-color: #b8b8ff; } </style> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="DDMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown Menu <span class="caret"></span> </button> <ul class="dropdown-menu chkbox-menu allow-focus" aria-labelledby="DDMenu"> <li > <label> <input type="checkbox"> Item 1 </label> </li> <li > <label> <input type="checkbox"> Item 2 </label> </li> <li > <label> <input type="checkbox"> Item 3 </label> </li> </ul> </div>

Push into an Array in JavaScript

let myarray = [1,2,3,4,5]

// Add to the start of an array

Array.unshift(element);

myarray.unshift(100); // output 100,1,2,3,4,5

// Add to the end of an array

Array.push(element);

myarray.push(100); // output 1,2,3,4,5,100

// Add to a specified location

Array.splice(start_position, 0, new_element...);

myarray.splice(2, 0, 100,200); // output 1,2,100,200,3,4,5

// Add with concat method without mutating original array

let newArray = [].concat(element);

let newmyarray = myarray.concat(10,20);