Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/theriturajps/sniptix

Boost your web development efficiency with Sniptix by theriturajps. Access ready-to-use code snippets for faster, smoother coding in VSCode.
https://github.com/theriturajps/sniptix

extension javascript marketplace snippets-collections vscode vscode-extension vscode-snippets

Last synced: 18 days ago
JSON representation

Boost your web development efficiency with Sniptix by theriturajps. Access ready-to-use code snippets for faster, smoother coding in VSCode.

Host: GitHub
URL: https://github.com/theriturajps/sniptix
Owner: theriturajps
License: mit
Created: 2024-10-20T14:16:02.000Z (25 days ago)
Default Branch: main
Last Pushed: 2024-10-24T02:50:51.000Z (21 days ago)
Last Synced: 2024-10-27T04:04:10.887Z (18 days ago)
Topics: extension, javascript, marketplace, snippets-collections, vscode, vscode-extension, vscode-snippets
Homepage: https://marketplace.visualstudio.com/items?itemName=riturajps.sniptix
Size: 13.7 KB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # Sniptix: Code Snippets for Web Development

Boost your web development efficiency with **Sniptix** by [theriturajps](https://github.com/theriturajps). Access ready-to-use code snippets for faster, smoother coding in **VSCode**. Designed to streamline your workflow and save time, **Sniptix** provides a collection of useful code snippets for HTML, CSS, JavaScript, and TypeScript.

## Features

- Ready-to-use code snippets for **HTML**, **CSS**, **JavaScript**, and **TypeScript**.

- Effortless workflow integration with VSCode.

- Saves time and increases productivity by reducing the need for repetitive typing.

- Supports multiple languages, including:

  - **HTML**

  - **CSS**

  - **JavaScript**

  - **TypeScript**

  - **JavaScript-React**

  - **TypeScript-React**

## Installation

1. Open **VSCode**.

2. Go to the **Extensions** view by clicking on the Extensions icon in the Activity Bar on the side of the window.

3. Search for **Sniptix** by **theriturajps**.

4. Click **Install**.

Alternatively, you can install it directly from the [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=riturajps.sniptix).

## Usage

Once installed, Sniptix will provide the following snippets:

### HTML Snippets

Easily insert common HTML tags and boilerplate structures.

1. **HTML5 Boilerplate** (`html5`): Create a basic HTML5 template structure.

2. **Anchor Tag** (`a`): Add a hyperlink.

3. **Image Tag** (`img`): Add an image with a source and alt text.

4. **Div Element** (`div`): Create a `div` container.

5. **Script Tag** (`script`): Include an external JavaScript file.

6. **Link Tag (Stylesheet)** (`link`): Link an external CSS stylesheet.

7. **Meta Charset Tag** (`meta-charset`): Set the character encoding.

8. **Meta Viewport Tag** (`meta-viewport`): Set up responsive meta tag for viewport.

9. **Header Tag** (`header`): Create a `header` section.

10. **Footer Tag** (`footer`): Create a `footer` section.

11. **Form Tag** (`form`): Define a form with action and method.

12. **Input Tag** (`input`): Add an input field with type and name.

13. **Button Tag** (`button`): Create a button with a label.

14. **Table Structure** (`table`): Build a table with headers and rows.

15. **Unordered List** (`ul`): Create an unordered list.

16. **Ordered List** (`ol`): Create an ordered list.

17. **List Item** (`li`): Add a list item inside a list.

18. **Section Tag** (`section`): Create a section element.

19. **Article Tag** (`article`): Add an article element.

20. **Nav Tag** (`nav`): Define navigation content.

21. **H1 Tag** (`h1`): Create a main heading.

22. **H2 Tag** (`h2`): Create a secondary heading.

23. **H3 Tag** (`h3`): Create a tertiary heading.

24. **Header4 Tag** (`h4`): Create a fourth-level heading.

25. **Header5 Tag** (`h5`): Create a fifth-level heading.

26. **Header6 Tag** (`h6`): Create a sixth-level heading.

27. **Main Tag** (`main`): Define main content of the document.

28. **Address Tag** (`address`): Display contact information.

29. **Time Tag** (`time`): Mark up a time value.

30. **Paragraph Tag** (`p`): Add a paragraph.

31. **Bold Tag** (`b`): Make text bold.

32. **Italic Tag** (`i`): Make text italic.

33. **Span Tag** (`span`): Apply inline styling or wrap text.

34. **Break Line** (`br`): Insert a line break.

35. **Horizontal Rule** (`hr`): Insert a horizontal line.

36. **Textarea Tag** (`textarea`): Create a multi-line text input.

37. **Select Tag** (`select`): Create a dropdown list.

38. **Option Tag** (`option`): Add an option in a dropdown.

39. **Iframe Tag** (`iframe`): Embed another HTML page inside your page.

40. **Canvas Tag** (`canvas`): Draw graphics via scripting.

41. **Audio Tag** (`audio`): Embed audio files.

42. **Video Tag** (`video`): Embed video files.

43. **Embed Tag** (`embed`): Embed external content like Flash.

44. **Source Tag** (`source`): Provide media sources for audio/video.

45. **Track Tag** (`track`): Add text tracks (subtitles or captions).

46. **Style Tag** (`style`): Add inline CSS styles.

47. **Mark Tag** (`mark`): Highlight text.

48. **Ruby Tag** (`ruby`): Use ruby annotations (used for East Asian typography).

49. **Progress Tag** (`progress`): Display progress of a task.

50. **Meter Tag** (`meter`): Represent a scalar measurement within a known range.

### CSS Snippets

Quickly insert CSS rules and styles.

1. **CSS Variables** (`css-vars`): Using CSS custom properties (variables).

2. **CSS Flexbox Container** (`flexbox`): Basic Flexbox container setup.

3. **CSS Grid Container** (`grid`): Basic Grid container setup.

4. **CSS Media Query** (`media-query`): Basic media query for responsiveness.

5. **CSS Transition** (`transition`): Simple transition for smooth animations.

6. **CSS Box Shadow** (`box-shadow`): Simple box shadow effect.

7. **CSS Gradient Background** (`gradient-bg`): Creating a gradient background.

8. **CSS Centering (Flex)** (`center-flex`): Centering content using flexbox.

9. **CSS Centering (Grid)** (`center-grid`): Centering content using grid.

10. **CSS Hover Effect** (`hover-effect`): Adding a hover effect for scaling.

11. **CSS Animation** (`animate`): Creating a slide-in animation.

12. **CSS Text Shadow** (`text-shadow`): Simple text shadow effect.

13. **CSS Border Radius** (`border-radius`): Add rounded corners to elements.

14. **CSS Box Sizing** (`box-sizing`): Set box-sizing to border-box for better layout control.

15. **CSS Opacity** (`opacity`): Set the opacity of an element.

16. **CSS Box Model** (`box-model`): Basic CSS box model reset.

17. **CSS Flexbox Centering** (`flex-center`): Centering content using Flexbox.

18. **CSS Grid Centering** (`grid-center`): Centering content using Grid.

19. **CSS Keyframe Animation** (`keyframes`): Creating a slide-in animation.

20. **CSS Z-Index** (`z-index`): Setting z-index for layering.

21. **CSS Font Face** (`font-face`): Defining a custom font-face.

22. **CSS Font Size and Line Height** (`font-size-line-height`): Setting font size and line height.

23. **CSS Text Alignment** (`text-align`): Aligning text.

24. **CSS Text Decoration** (`text-decoration`): Adding text decoration (underline, strike-through, etc.).

25. **CSS Display Block** (`display-block`): Changing element display property to block.

26. **CSS Display Inline** (`display-inline`): Changing element display property to inline.

27. **CSS Display Inline Block** (`display-inline-block`): Changing element display property to inline-block.

28. **CSS Vertical Alignment** (`vertical-align`): Aligning elements vertically.

29. **CSS Overflow** (`overflow`): Control the overflow behavior of an element.

30. **CSS List Style** (`list-style`): Remove list bullets or style.

31. **CSS Transform** (`transform`): Applying a transformation to an element.

32. **CSS Transition on Hover** (`transition-hover`): Adding hover transition.

33. **CSS Box Model Reset** (`box-reset`): Reset box model for all elements.

34. **CSS Font Weight** (`font-weight`): Setting font weight.

35. **CSS Cursor Style** (`cursor-style`): Changing cursor style on hover.

### JavaScript Snippets

Get useful JavaScript code snippets for functions, variables, loops, etc.

1. **console.dir** (`cd`): `console.dir($1);`

2. **console.error** (`ce`): `console.error($1);`

3. **console.info** (`ci`): `console.info($1);`

4. **console.log** (`cl`): `console.log($1);`

5. **console.warn** (`cw`): `console.warn($1);`

6. **console.table** (`ct`): `console.table($1);`

7. **debugger** (`de`): `debugger;$1`

8. **addEventListener** (`ae`): `${1:document}.addEventListener('${2:load}', function (e) { ... });`

9. **appendChild** (`ac`): `${1:document}.appendChild(${2:elem});`

10. **removeChild** (`rc`): `${1:document}.removeChild(${2:elem});`

11. **createElement** (`cel`): `${1:document}.createElement(${2:elem});`

12. **createDocumentFragment** (`cdf`): `${1:document}.createDocumentFragment();$2`

13. **classList.add** (`ca`): `${1:document}.classList.add('${2:class}');`

14. **classList.toggle** (`ct`): `${1:document}.classList.toggle('${2:class}');`

15. **classList.remove** (`cr`): `${1:document}.classList.remove('${2:class}');`

16. **getElementById** (`gi`): `${1:document}.getElementById('${2:id}');`

17. **getElementsByClassName** (`gc`): `${1:document}.getElementsByClassName('${2:class}');`

18. **getElementsByTagName** (`gt`): `${1:document}.getElementsByTagName('${2:tag}');`

19. **getAttribute** (`ga`): `${1:document}.getAttribute('${2:attr}');`

20. **setAttribute** (`sa`): `${1:document}.setAttribute('${2:attr}', ${3:value});`

21. **removeAttribute** (`ra`): `${1:document}.removeAttribute('${2:attr}');`

22. **innerHTML** (`ih`): `${1:document}.innerHTML = '${2:elem}';`

23. **textContent** (`tc`): `${1:document}.textContent = '${2:content}';`

24. **querySelector** (`qs`): `${1:document}.querySelector('${2:selector}');`

25. **querySelectorAll** (`qsa`): `${1:document}.querySelectorAll('${2:selector}');`

26. **forEach** (`fe`): `${1:array}.forEach(function(item) { ... });`

27. **function** (`fn`): `function ${1:methodName} (${2:arguments}) { ... }`

28. **Arrow Function** (`af`): `const ${1:name} = (${2:params}) => { ... };`

29. **anonymous function** (`afn`): `function(${1:arguments}) { ... }`

30. **prototype** (`pr`): `${1:object}.prototype.${2:method} = function(${3:arguments}) { ... }`

31. **IIFE (Immediately Invoked Function Expression)** (`iife`): `(function(${1:window}, ${2:document}) { ... })(${1:window}, ${2:document});`

32. **function call** (`call`): `${1:method}.call(${2:context}, ${3:arguments});`

33. **function apply** (`apply`): `${1:method}.apply(${2:context}, [${3:arguments}]);`

34. **function as a property of an object** (`ofn`): `${1:functionName}: function(${2:arguments}) { ... }`

35. **JSON.parse** (`jp`): `JSON.parse(${1:obj});`

36. **JSON.stringify** (`js`): `JSON.stringify(${1:obj});`

37. **setInterval** (`si`): `setInterval(function() { ... }, ${1:1000});`

38. **setTimeout** (`st`): `setTimeout(function() { ... }, ${1:1000});`

39. **use strict** (`us`): `'use strict';`

40. **alert** (`al`): `alert('${1:msg}');`

41. **confirm** (`co`): `confirm('${1:msg}');`

42. **prompt** (`pm`): `prompt('${1:msg}');`

## Contributing

We welcome contributions to make Sniptix better! Here are some ways you can help:

- **Bug Reports**: If you find a bug, please open an issue [here](https://github.com/theriturajps/Sniptix/issues).

- **Feature Requests**: If you'd like to see a new feature, feel free to open an issue or a pull request.

- **Improvement Suggestions**: If you have an idea to improve existing snippets or add new ones, open an issue or PR.

## License

**MIT License**

This project is licensed under the MIT License - see the [LICENSE](https://github.com/theriturajps/Sniptix/blob/main/LICENSE) file for details.

## Contact

For support, please open an issue on the [GitHub repository](https://github.com/theriturajps/Sniptix).

---

Made with ❤️ by [theriturajps](https://github.com/theriturajps).