Skip to content

Commit

Permalink
ui and ux adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
dostonnabotov committed Dec 14, 2024
1 parent a0d7395 commit c4b281a
Show file tree
Hide file tree
Showing 13 changed files with 249 additions and 138 deletions.
16 changes: 8 additions & 8 deletions public/data/css.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
"description": "Adjusts font size based on viewport width.",
"code": "h1 {\n font-size: calc(1.5rem + 2vw);\n}",
"tags": ["css", "font", "responsive", "typography"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Letter Spacing",
"description": "Adds space between letters for better readability.",
"code": "p {\n letter-spacing: 0.05em;\n}",
"tags": ["css", "typography", "spacing"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -26,14 +26,14 @@
"description": "Ensures the footer always stays at the bottom of the page.",
"code": "body {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\nfooter {\n margin-top: auto;\n}",
"tags": ["css", "layout", "footer", "sticky"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Equal-Width Columns",
"description": "Creates columns with equal widths using flexbox.",
"code": ".columns {\n display: flex;\n justify-content: space-between;\n}\n\n.column {\n flex: 1;\n margin: 0 10px;\n}",
"tags": ["css", "flexbox", "columns", "layout"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -45,14 +45,14 @@
"description": "Creates a hover effect with a color transition.",
"code": ".button {\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.button:hover {\n background-color: #0056b3;\n}",
"tags": ["css", "button", "hover", "transition"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "3D Button Effect",
"description": "Adds a 3D effect to a button when clicked.",
"code": ".button {\n background-color: #28a745;\n color: white;\n padding: 10px 20px;\n border: none;\n border-radius: 5px;\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.1s;\n}\n\n.button:active {\n transform: translateY(2px);\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n}",
"tags": ["css", "button", "3D", "effect"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -64,14 +64,14 @@
"description": "Applies a blur effect to the background of an element.",
"code": ".blur-background {\n backdrop-filter: blur(10px);\n background: rgba(255, 255, 255, 0.5);\n}",
"tags": ["css", "blur", "background", "effects"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Hover Glow Effect",
"description": "Adds a glowing effect on hover.",
"code": ".glow {\n background-color: #f39c12;\n padding: 10px 20px;\n border-radius: 5px;\n transition: box-shadow 0.3s ease;\n}\n\n.glow:hover {\n box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);\n}",
"tags": ["css", "hover", "glow", "effects"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
}
Expand Down
20 changes: 10 additions & 10 deletions public/data/javascript.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
"description": "Removes duplicate values from an array.",
"code": "const removeDuplicates = (arr) => [...new Set(arr)];\n\n// Usage:\nconst numbers = [1, 2, 2, 3, 4, 4, 5];\nconsole.log(removeDuplicates(numbers)); // Output: [1, 2, 3, 4, 5]",
"tags": ["javascript", "array", "deduplicate", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Flatten Array",
"description": "Flattens a multi-dimensional array.",
"code": "const flattenArray = (arr) => arr.flat(Infinity);\n\n// Usage:\nconst nestedArray = [1, [2, [3, [4]]]];\nconsole.log(flattenArray(nestedArray)); // Output: [1, 2, 3, 4]",
"tags": ["javascript", "array", "flatten", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -26,14 +26,14 @@
"description": "Capitalizes the first letter of a string.",
"code": "const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);\n\n// Usage:\nconsole.log(capitalize('hello')); // Output: 'Hello'",
"tags": ["javascript", "string", "capitalize", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Reverse String",
"description": "Reverses the characters in a string.",
"code": "const reverseString = (str) => str.split('').reverse().join('');\n\n// Usage:\nconsole.log(reverseString('hello')); // Output: 'olleh'",
"tags": ["javascript", "string", "reverse", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -45,14 +45,14 @@
"description": "Formats a date in 'YYYY-MM-DD' format.",
"code": "const formatDate = (date) => date.toISOString().split('T')[0];\n\n// Usage:\nconsole.log(formatDate(new Date())); // Output: '2024-12-10'",
"tags": ["javascript", "date", "format", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Get Time Difference",
"description": "Calculates the time difference in days between two dates.",
"code": "const getTimeDifference = (date1, date2) => {\n const diff = Math.abs(date2 - date1);\n return Math.ceil(diff / (1000 * 60 * 60 * 24));\n};\n\n// Usage:\nconst date1 = new Date('2024-01-01');\nconst date2 = new Date('2024-12-31');\nconsole.log(getTimeDifference(date1, date2)); // Output: 365",
"tags": ["javascript", "date", "time-difference", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -64,14 +64,14 @@
"description": "Delays a function execution until after a specified time.",
"code": "const debounce = (func, delay) => {\n let timeout;\n return (...args) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => func(...args), delay);\n };\n};\n\n// Usage:\nwindow.addEventListener('resize', debounce(() => console.log('Resized!'), 500));",
"tags": ["javascript", "utility", "debounce", "performance"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Throttle Function",
"description": "Limits a function execution to once every specified time interval.",
"code": "const throttle = (func, limit) => {\n let lastFunc;\n let lastRan;\n return (...args) => {\n const context = this;\n if (!lastRan) {\n func.apply(context, args);\n lastRan = Date.now();\n } else {\n clearTimeout(lastFunc);\n lastFunc = setTimeout(() => {\n if (Date.now() - lastRan >= limit) {\n func.apply(context, args);\n lastRan = Date.now();\n }\n }, limit - (Date.now() - lastRan));\n }\n };\n};\n\n// Usage:\ndocument.addEventListener('scroll', throttle(() => console.log('Scrolled!'), 1000));",
"tags": ["javascript", "utility", "throttle", "performance"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -83,14 +83,14 @@
"description": "Toggles a class on an element.",
"code": "const toggleClass = (element, className) => {\n element.classList.toggle(className);\n};\n\n// Usage:\nconst element = document.querySelector('.my-element');\ntoggleClass(element, 'active');",
"tags": ["javascript", "dom", "class", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Smooth Scroll to Element",
"description": "Scrolls smoothly to a specified element.",
"code": "const smoothScroll = (element) => {\n element.scrollIntoView({ behavior: 'smooth' });\n};\n\n// Usage:\nconst target = document.querySelector('#target');\nsmoothScroll(target);",
"tags": ["javascript", "dom", "scroll", "ui"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
}
Expand Down
20 changes: 10 additions & 10 deletions public/data/python.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
"description": "Reverses the characters in a string.",
"code": "def reverse_string(s):\n return s[::-1]\n\n# Usage:\nprint(reverse_string('hello')) # Output: 'olleh'",
"tags": ["python", "string", "reverse", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Check Palindrome",
"description": "Checks if a string is a palindrome.",
"code": "def is_palindrome(s):\n s = s.lower().replace(' ', '')\n return s == s[::-1]\n\n# Usage:\nprint(is_palindrome('A man a plan a canal Panama')) # Output: True",
"tags": ["python", "string", "palindrome", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -26,14 +26,14 @@
"description": "Flattens a multi-dimensional list into a single list.",
"code": "def flatten_list(lst):\n return [item for sublist in lst for item in sublist]\n\n# Usage:\nnested_list = [[1, 2], [3, 4], [5]]\nprint(flatten_list(nested_list)) # Output: [1, 2, 3, 4, 5]",
"tags": ["python", "list", "flatten", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Remove Duplicates",
"description": "Removes duplicate elements from a list while maintaining order.",
"code": "def remove_duplicates(lst):\n return list(dict.fromkeys(lst))\n\n# Usage:\nprint(remove_duplicates([1, 2, 2, 3, 4, 4, 5])) # Output: [1, 2, 3, 4, 5]",
"tags": ["python", "list", "duplicates", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -45,14 +45,14 @@
"description": "Reads all lines from a file and returns them as a list.",
"code": "def read_file_lines(filepath):\n with open(filepath, 'r') as file:\n return file.readlines()\n\n# Usage:\nlines = read_file_lines('example.txt')\nprint(lines)",
"tags": ["python", "file", "read", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Write to File",
"description": "Writes content to a file.",
"code": "def write_to_file(filepath, content):\n with open(filepath, 'w') as file:\n file.write(content)\n\n# Usage:\nwrite_to_file('example.txt', 'Hello, World!')",
"tags": ["python", "file", "write", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -64,14 +64,14 @@
"description": "Calculates the factorial of a number.",
"code": "def factorial(n):\n if n == 0:\n return 1\n return n * factorial(n - 1)\n\n# Usage:\nprint(factorial(5)) # Output: 120",
"tags": ["python", "math", "factorial", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Check Prime Number",
"description": "Checks if a number is a prime number.",
"code": "def is_prime(n):\n if n <= 1:\n return False\n for i in range(2, int(n**0.5) + 1):\n if n % i == 0:\n return False\n return True\n\n# Usage:\nprint(is_prime(17)) # Output: True",
"tags": ["python", "math", "prime", "check"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -83,14 +83,14 @@
"description": "Measures the execution time of a code block.",
"code": "import time\n\ndef measure_time(func, *args):\n start = time.time()\n result = func(*args)\n end = time.time()\n print(f'Execution time: {end - start:.6f} seconds')\n return result\n\n# Usage:\ndef slow_function():\n time.sleep(2)\n\nmeasure_time(slow_function)",
"tags": ["python", "time", "execution", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Generate Random String",
"description": "Generates a random alphanumeric string.",
"code": "import random\nimport string\n\ndef random_string(length):\n letters_and_digits = string.ascii_letters + string.digits\n return ''.join(random.choice(letters_and_digits) for _ in range(length))\n\n# Usage:\nprint(random_string(10)) # Output: Random 10-character string",
"tags": ["python", "random", "string", "utility"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
}
Expand Down
28 changes: 14 additions & 14 deletions public/data/scss.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,28 @@
"description": "A Sass mixin to clamp text to a specific number of lines.",
"code": "@mixin line-clamp($number) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: $number;\n overflow: hidden;\n}",
"tags": ["sass", "mixin", "typography", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Text Overflow Ellipsis",
"description": "Ensures long text is truncated with an ellipsis.",
"code": "@mixin text-ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}",
"tags": ["sass", "mixin", "text", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Font Import Helper",
"description": "Simplifies importing custom fonts in Sass.",
"code": "@mixin import-font($family, $weight: 400, $style: normal) {\n @font-face {\n font-family: #{$family};\n font-weight: #{$weight};\n font-style: #{$style};\n src: url('/fonts/#{$family}-#{$weight}.woff2') format('woff2'),\n url('/fonts/#{$family}-#{$weight}.woff') format('woff');\n }\n}",
"tags": ["sass", "mixin", "fonts", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Text Gradient",
"description": "Adds a gradient color effect to text.",
"code": "@mixin text-gradient($from, $to) {\n background: linear-gradient(to right, $from, $to);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}",
"tags": ["sass", "mixin", "gradient", "text", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -40,21 +40,21 @@
"description": "Creates a responsive grid container with customizable column counts.",
"code": "@mixin grid-container($columns: 12, $gap: 1rem) {\n display: grid;\n grid-template-columns: repeat($columns, 1fr);\n gap: $gap;\n}",
"tags": ["scss", "grid", "layout", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Flex Center",
"description": "A mixin to center content using flexbox.",
"code": "@mixin flex-center {\n display: flex;\n justify-content: center;\n align-items: center;\n}",
"tags": ["scss", "flex", "center", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Aspect Ratio",
"description": "Ensures elements maintain a specific aspect ratio.",
"code": "@mixin aspect-ratio($width, $height) {\n position: relative;\n width: 100%;\n padding-top: ($height / $width) * 100%;\n > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n}",
"tags": ["scss", "aspect-ratio", "layout", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -66,14 +66,14 @@
"description": "Animates the fade-in effect.",
"code": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@mixin fade-in($duration: 1s, $easing: ease-in-out) {\n animation: fade-in $duration $easing;\n}",
"tags": ["scss", "animation", "fade", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Slide In From Left",
"description": "Animates content sliding in from the left.",
"code": "@keyframes slide-in-left {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@mixin slide-in-left($duration: 0.5s, $easing: ease-out) {\n animation: slide-in-left $duration $easing;\n}",
"tags": ["scss", "animation", "slide", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -85,14 +85,14 @@
"description": "Generates media queries for responsive design.",
"code": "@mixin breakpoint($breakpoint) {\n @if $breakpoint == sm {\n @media (max-width: 576px) { @content; }\n } @else if $breakpoint == md {\n @media (max-width: 768px) { @content; }\n } @else if $breakpoint == lg {\n @media (max-width: 992px) { @content; }\n } @else if $breakpoint == xl {\n @media (max-width: 1200px) { @content; }\n }\n}",
"tags": ["scss", "responsive", "media-queries", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Clearfix",
"description": "Provides a clearfix utility for floating elements.",
"code": "@mixin clearfix {\n &::after {\n content: '';\n display: block;\n clear: both;\n }\n}",
"tags": ["scss", "clearfix", "utility", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -104,14 +104,14 @@
"description": "Applies a customizable border-radius.",
"code": "@mixin border-radius($radius: 4px) {\n border-radius: $radius;\n}",
"tags": ["scss", "border", "radius", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
},
{
"title": "Box Shadow Helper",
"description": "Generates a box shadow with customizable values.",
"code": "@mixin box-shadow($x: 0px, $y: 4px, $blur: 10px, $spread: 0px, $color: rgba(0, 0, 0, 0.1)) {\n box-shadow: $x $y $blur $spread $color;\n}",
"tags": ["scss", "box-shadow", "css", "effects"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
},
Expand All @@ -123,7 +123,7 @@
"description": "Generates a styled primary button.",
"code": "@mixin primary-button($bg: #007bff, $color: #fff) {\n background-color: $bg;\n color: $color;\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n\n &:hover {\n background-color: darken($bg, 10%);\n }\n}",
"tags": ["scss", "button", "primary", "css"],
"author": "@technoph1le"
"author": "dostonnabotov"
}
]
}
Expand Down
Loading

0 comments on commit c4b281a

Please sign in to comment.