Skip to main content

pelatihan.orgLearn. Practice. Grow.

Sign in Sign up

pelatihan.org

Learn web development with a clear roadmap, code practice, and quizzes with instant feedback.

Catalog Sign in Subscription

Web Developer Tools Curriculum: 28 Chapters, 369 Lessons — pelatihan.org

Home/Catalog/Web Developer Tools/Curriculum

Curriculum

Web Developer Tools Curriculum

Learn Web Developer Tools online with 369 structured lessons, code examples, and 1845 quiz questions.

369 lessons 28 chapters 1845 questions

Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.

01

Developer Tools

1 lessons

01Tools HomeThis page introduces a collection of online tools for a developer's everyday work, from refining code to changing the format of data. All the tools run in the browser, so you…

02

Formatters

11 lessons

01JSON FormatterJSON Formatter adds indentations and new lines to the JSON text so that the structure is easy for humans to read. The data that was once piled in a single line will be broken…02JSON MinifierJSON Minifier removes spaces, tabs, and new lines that are outside the string, so that JSON becomes as short as possible. The result is similar in meaning to the smooth version,…03JSON ValidatorJSON Validator checks that JSON text complies with syntax rules, and then indicates the error location if any. The important rule among others is that the key must be double…04JSON StringifyJSON.stringify is a JavaScript function that converts values such as an object or array into JSON strings. This function is used when sending data to a server, storing it in…05Sort JSON KeysJSON Keys sort sort the key names of each object alphabetically, including the object that is nested. The order of the array elements is unchanged because the array order is part…06HTML FormatterHTML Formatter refines the tag layout with tiered indentation so that parent-child relationships are clear. This tool is useful for long HTML files or copy-paste results from…07CSS FormatterCSS Formatter rearranges CSS rules so that each selector, property, and value appears neatly with consistent indentation. The expanded style puts one declaration per line so it's…08JS FormatterJS Formatter refines JavaScript code by adding indentations, spaces, and new lines according to the block structure. Code that was once compressed in one line became easier to…09SQL FormatterSQL Formatter arranges queries so that clauses such as SELECT, FROM, WHERE, and ORDER BY are on a readable line. SQL keywords are usually capitalized, while table and column…10XML FormatterXML Formatter arranges XML elements with tiered indentations so that parent-child relationships are easily seen. Each child element is usually placed on its own line, and the…11YAML FormatterYAML Formatter refines YAML structures with spatial-based indentations to make mapping and lists easy to read. YAML is very sensitive to indentation: tabs should not be used, and…

03

Encoders / Decoders

10 lessons

01Base64Base64 is a way to convert binary data into text using 64 characters that is securely sent over text-based media. Each three bytes of data is converted to four Base64 characters,…02URL Encode/DecodeURL Encoder converts an unsafe or special meaning character in a URL into a percentage form, e.g. spaces to %20. Encoding is required because the URL can only contain certain…03HTML EntitiesHTML Entities is a special code for displaying characters that if written directly could be considered part of a markup. For example, to display a sign smaller than and to…04JWT DecoderThe JWT Decoder breaks the JSON Web Token into three parts: header, payload, and signature. The header and payload are encoded with Base64URL, so they can be read without a…05Base32 Encode/DecodeBase32 is an encoding scheme that converts binary data into text using 32 characters, namely the letters A to Z and the numbers 2 to 7. Each five byte input produces eight output…06Base58 Encode/DecodeBase58 is a 58 character-based encoding that intentionally eliminates easily interchangeable symbols, such as zero, O, I, l, plus, and slash. The alphabet is widely used in…07ROT13 / ROT47 CipherROT13 is a substitution cipher that shifts each letter by 13 positions in the alphabet, so that a becomes n and vice versa. Since the Latin alphabet has 26 letters, applying…08CRC32 ChecksumCRC32 calculates 32-bit checksums of data to detect unintended changes or damage. The value is quickly calculated and is often used in file formats such as ZIP and PNG. Small…09Punycode ConverterPunycode is encoding that converts a domain label containing Unicode characters into an ASCII form, for example münchen.de to xn--mnchen-3ya.de. The xn-- prefix is needed for…10Quoted-PrintableQuoted-Printable is an encoding for email that converts the byte outside the safe text character into the form =HH, i.e. the equals sign followed by two hexadecimal digits. This…

04

Converters

19 lessons

01JSON to YAMLThe JSON to YAML converter converts JSON objects and arrays into YAML text using the indentation as a structural marker. JSON is more compact with curly braces and quotes, while…02JSON to TOMLThe JSON to TOML converter converts JSON data into a TOML configuration format that uses a row key = value and a nested table. A nested object is usually a table with a header…03YAML to TOMLThe YAML to TOML converter translates the configuration structure of YAML into a table and a pair of TOML keys. Mapping YAML into tables, list into arrays, and objects within the…04JSON to CSVThe JSON to CSV converter converts an array of objects into a table with a row of data and a column named after the key. The first line usually contains a header, whereas each…05XML to JSONThe XML to JSON converter converts XML elements into JSON objects and arrays. Attributes are usually mapped with a special prefix such as @, whereas text within the element can…06JSON to TypeScriptThe JSON to TypeScript converter produces an interface declaration or type that describes the JSON data form. Objects become interfaces with typed properties, arrays become array…07JSON to PythonJSON to Python converters convert JSON data into equivalent Python literal, such as dict, list, string, and number. The values of true, false, and null of JSON are mapped to…08JSON to JavaThe JSON to Java converter produces a POJO class with a field that matches the key name on the JSON. Each field has a type such as a String, int, boolean, or List, and can be…09JSON to C#A JSON to C# converter produces a class with properties that match the JSON structure. Public properties in C# typically use PascalCase, whereas JSON keys often use camelCase or…10JSON to GoThe JSON to Go converter produces a struct declaration with a field representing each JSON key. The field must be prefixed with capital letters in order to be accessible from…11JSON Schema GeneratorJSON Schema Generator creates a schema document that describes the form of JSON data, including types, properties, and mandatory properties. Schemas can be used to validate data…12SQL to JSONThe SQL to JSON converter converts the resulting line of a query or INSERT statement into an array of JSON objects. The column name is usually a key, while the value of each row…13Query String ConverterQuery String Converter changes the URL after the question mark to a key-value pair, or vice versa. Query strings use the symbol & as a separator of parameters and = between key…14Number BaseNumber Base Converter converts numbers between number systems such as binary (base 2), octales (base 8), decimals (base 10), and hexadecimal (base 16). Each number system…15Unix TimestampThe Unix timestamp is the number of seconds that have passed since January 1, 1970 at 00:00:00 UTC. This value is often used because it is concise and does not depend on time…16Case ConverterCase Converter changes the style of writing of words in an identifier or text, for example from space to camelCase, snake_case, kebab-case, or PascalCase. Conversion usually…17Text to HTMLText to HTML converts plain text into HTML pieces that are ready to be displayed, generally by wrapping paragraphs using the p tag and new line with br. Special characters such…18CSV to MarkdownThe CSV to Markdown converter converts the table data into a Markdown table format that uses the pipe mark as a column separator. The first row of CSV is considered a header,…19HTML to MarkdownThe HTML converter to Markdown converts elements such as heading, paragraph, link, list, and emphasis into the equivalent Markdown syntax. The results are more concise and easy…

05

Generators

17 lessons

01UUID GeneratorUUID Generator makes a 128 bit Unique Identifier that is universally unique in the format of 8-4-4-12, for example 550e8400-e29b-41d4-a716-446655440000. Version 4 UUID is…02Hash GeneratorHash Generator converts the input to a hash value of fixed length through a one-way function. The same input always produces the same hash, but the hash cannot be reversed into…03Password GeneratorPassword Generator creates a random password based on the length and type of characters selected, such as uppercase, lowercase, number, and symbol. The longer the password and…04Lorem IpsumLorem Ipsum is a Latin-language placeholder text used to fill out a design layout before original content is available. The goal is to focus on visuals such as font size,…05QR CodeQR codes are two-dimensional barcodes that store data in a black and white module arrangement. QR generators turn text, URLs, or other data into images that the camera can scan.…06QR Code ScannerQR Code Scanner reads a QR image and then decodes the contents into text, URL, or other data formats. The camera can be used directly, or you upload an existing image file. The…07Barcode GeneratorA barcode generator converts text or numbers into a barcode image that can be pasted onto a product, label, or document. The tool typically provides some type of barcode symbol,…08Slug GeneratorSlug generators turn the title or sentence into a short, small, easy-to-read URL section. Spaces and punctuation are usually replaced by hyphens, while the letter accented…09Meta Tag GeneratorThe meta tag generator helps to organize tags in the HTML header section to explain the page to browsers and search engines. Important tags include charset, viewport,…10Placeholder ImageA placeholder image is a temporary image that fills the design space before the photo or final asset is available. Generators usually set the size, background color, text color,…11HTML Table GeneratorHTML table generator creates a ready-to-use table structure with a specified number of rows and columns. A good table uses a caption, thead, tbody, and th elements for the header…12Markdown Table GeneratorThe Markdown table generator compiles a pipeline-format table supported by many Markdown editors. You set the number of columns and rows, and then the tool generates the header,…13robots.txt GeneratorThe generator helps create text files in the root domain that give clues to the search engine crawler. This file contains the user-agent, Allow, Disallow, and sitemap location…14.htaccess GeneratorThe generator makes configuration pieces for Apache servers at the directory level. The general rules include redirects, HTTPS enforcement, URL rewriting, custom page errors, and…15Mock Data GeneratorMock data generators create fake data sets to fill in applications during development and testing. Data such as name, email, address, and date can be generated in JSON, CSV, or…16README GeneratorThe README generator helps compile the initial documentation of the repository with the standard parts. A good README describes the project functionality, how to install, how to…17Random Number GeneratorA random number generator generates random numbers within a specified range. For ordinary needs, the built-in random functions of a programming language are sufficient, but for…

06

Testers

11 lessons

01RegEx TesterThe RegEx tester helps test the regular expression patterns of the sample text and see the appropriate sections. You can study flag effects like global, case-insensitive, and…02Text DiffText diff compares two versions of text and marks the lines or characters that have been added, deleted, or changed. This tool is especially helpful when reviewing changes in…03Markdown PreviewMarkdown preview converts Markdown text into HTML directly so you can see the end result. This tool helps check the headings, lists, links, tables, and blocks of code before…04String InspectorString inspector helps to check the content of the string in detail, including length, character code, number of bytes, and invisible characters. This tool is useful when…05JSON Path EvaluatorJSONPath evaluator allows the retrieval of specific sections of JSON documents with concise expressions. You can select property, element array, whole value with a specific name,…06CSV ViewerThe CSV viewer reads the comma-separated values file and displays it as an easy-to-check table. You can see columns, the number of rows, and the values that might contain extra…07JSON Tree ViewerJSON tree viewer displays JSON documents as hierarchical structures that can be opened and closed. This display makes it easy to search for cluster objects, arrays, and value…08Live Code PreviewLive code preview provides HTML, CSS, and JavaScript editors with results that appear directly in the browser. Any changes can be viewed without saving files or refreshing pages…09SVG PreviewThe SVG preview displays the SVG code render results so you can check the shape, color, and position of the elements. SVG is an XML-based vector format that stays sharp at any…10JSON CompareJSON compare compares two JSON documents structurally, not just text. This tool shows the added, deleted, or changed values of the property, making it suitable for checking API…11Responsive TesterThe responsive tester displays the site on a variety of viewport sizes to check the display on mobile phones, tablets, and desktops. You can test breakpoints, orientations, and…

07

CSS Visual Tools

18 lessons

01Gradient GeneratorGradient generators create CSS code for the gradual color transition, either straight, radial, or circular. You can set the direction, the color stop position, and the…02Box Shadow GeneratorBox shadow generators help create shadows around elements by setting offsets, blur, spread, and colors. You can add some layers of shadow or use insets for effects inside the…03Flexbox PlaygroundFlexbox playground helps to try out one-dimensional layout properties interactively. You can change the flex-direction, justify-content, align-items, gaps, and flex on the item…04Grid GeneratorGrid generators help to arrange a two-dimensional layout with rows and columns that can be precisely adjusted. You can use the units fr, and you can name the area with…05CSS Unit ConverterCSS unit converters help understand and convert units such as px, brake, em, percentage, vw, and vh. The relative value depends on the context, for example the size of the root…06Border RadiusThe Border Radius generator helps set the angles of rotation on the element with a direct preview. You can use one value for all angles, four separate values, or the syntax slash…07Text ShadowText shadow generators create shadows on text by setting offsets, blur, and colors. Several layers of shadow can be combined for glow, emboss, or layered shadow effects. Use the…08Animation GeneratorAnimation generators help create CSS animations from keyframes to duration and repetition properties. You can set the animation stage, timing, direction, and fill mode and then…09Filter GeneratorFilter generators create visual effects such as blur, brightness, contrast, grayscale, and drop shadow through the CSS filter properties. Several functions can be combined into a…10Transform GeneratorTransform generator helps create translate, rotate, scale, and skew effects on the elements. You can combine some transforms, set the reference dots with the…11Clip Path GeneratorClip path generators help cut elements into specific shapes such as circles, ellipses, polygons, or round squares. You can set the coordinates and see which areas remain visible.…12Multi-ColumnMulti-column generators set text to flow to multiple columns like newspaper pages. Properties such as column-count, column-width, column-gap, and column-rule govern the number of…13Glassmorphism GeneratorThe glassmorphism generator helps create blurry glass effects with a semi-transparent background and blurry backdrop-filters. This effect is usually combined with a bright thin…14Neumorphism GeneratorThe neumorphism generator creates elements with soft shadows that appear to merge with the background. This effect uses two shadows, one light and one dark, on the same…15CSS Loader GeneratorThe CSS loader generator helps create loading indicators like spinners, pulsing dots, or skeletons without images. Animations typically use keyframes, transforms, and borders to…16CSS Button GeneratorThe CSS button generator helps design buttons with consistent padding, color, border, radius, and hover effects. A good button also has a clear focus, active, and disabled state.…17Cubic Bezier EditorThe cubic bezier editor helps design the timing curve for CSS transitions and animations. You set up two control dots so that the movement can be accelerated, slowed down, or…18CSS Blob GeneratorCSS blob generators help create uncoordinated organic shapes for background decoration or illustration. The shape can be formed by an eight-valued border-radius or by an SVG…

08

Colors & Accessibility

7 lessons

01Color PickerColor picker helps to visually select colors and read their values in HEX, RGB, or HSL format. Some tools provide eye drops to take color from the screen as well as alpha…02Color ConverterColor converter converts one color value to another format such as HEX, RGB, HSL, HSV, or CMYK. The same color can be written in different ways, but the range and use of each…03Palette GeneratorPalette generators help to arrange harmonious color combinations based on the relationship on the color wheel. Popular schemes include analog, complementary, triadic, tetradic,…04Contrast CheckerThe contrast checker calculates the contrast ratio between text color and background color. This ratio is compared to WCAG guidelines, for example 4.5:1 for normal text and 3:1…05Color Blindness SimulatorThe simulator of color blindness estimates how colors look to users with certain types of color vision. Common simulations include deuteranopia, protanopia, tritanopia, and…06Shades & Tints GeneratorShades and tints generators create a variation of colors that are darker or brighter than the base colors. Tints are produced by adding white, while shades are produced by adding…07Color Name FinderThe color name finder matches the value of a color such as HEX or RGB with the color name closest. CSS provides about 140 built-in color names that can be used directly on color…

09

Text Utilities

34 lessons

01Escape/UnescapeThis tool converts a particular character in the text into an escape form preceded by a backslash, and then it can return it to its original form. Escape is required when text is…02SQL EscapeSQL escape makes text secure for inclusion in a query by marking characters that have a specific meaning, especially single quotes. In standard SQL, a single quote in a string is…03Regex EscapeRegex escape adds backslashes in front of characters that have a special meaning in regular expression to search for text as literal. Without escape, a dot means any character…04XML EscapeXML escape replaces characters that have structural meaning in XML with entities, e.g. & become & and < become < Without this step, text containing tags or ampersand can…05CSV EscapeCSV escape takes care of values containing commas, quotes, or new lines to remain considered as a single field. The general rule of RFC 4180 states that such a field is encased…06Backslash EscapeBackslash escape uses the backslash character to indicate that the next character should be treated specifically or literally. In a literal string, sequences like \n mean new…07URL ParserThe URL parser breaks down the web address into easy-to-read parts, such as schema, host, port, path, query string, and fragment. By understanding these parts, you can take value…08Word CounterWord counter counts the number of words, characters, sentences, and paragraphs in a text. Words are usually separated by spaces or punctuation, whereas characters can be counted…09Emoji PickerEmoji picker is a panel for searching and copying emoji characters into text, documents, or code. Emojis are actually Unicode characters, so they can be stored in strings like…10Encoding DetectorEncoding detectors predict how text bytes should be interpreted, for example UTF-8, ISO-8859-1, or Windows-1252. Guess it helps when old files show strange characters like that.…11Find and ReplaceFind and replace search for a particular text and replace it with another text, either one appearance or all at once. Case-sensitive, whole word, and regex options make…12Censor WordsCensor words replace certain words with a pseudonym like a star, usually to filter out the rough word. The tool needs to match the variations of the capital letters and the word…13Extract Email AddressesThe tool scans text and takes email addresses that match the common name pattern. Extraction is useful for filtering a contact list from a document or log, but a simple pattern…14Extract a SubstringA substring is a piece of text taken from a particular position in a string. You can take it based on the initial and the long index, or between two markers like parentheses. In…15Find Hidden CharactersThe tool displays invisible characters such as non-breaking space, zero-width space, tab, and carriage. These types of characters often cause bugs to be difficult to track, for…16Add Quotes to TextThe tool wrapped each row or word with a quotation mark so that the text was ready to be pasted to an SQL list, JSON array, or spreadsheet. You can add a comma separator at once…17Repeat TextRepeat text doubles a text by the number of times it is specified, with the option of separating between repetitions. This feature is useful for creating separator lines,…18Truncate TextTruncate cuts text that is too long to a certain extent, often with an ellipse at the end. A good cut is made at the word boundary so that the sentence does not break in the…19Reverse TextReverse text reverses the order of characters, words, or lines in a text. Character inversions are often used for string and puzzle exercises, whereas word or line inversions are…20Rotate TextRotate text shifts each letter as much as a certain position in the alphabet, similar to Caesar's code. Letters that pass through the end of the alphabet will return to the…21Randomize CaseRandomize cases randomly change up capital letters and lower case letters in a text, usually for a casual writing style on social media. Each letter of the alphabet is chosen at…22Text to UnicodeConverting text to Unicode converts each character into code points, usually written in U+XXXX or decimal number format. The process of reversing the code back to the original…23Palindrome CheckerThe palindrome checker checks whether the text reads the same from the front and back after spacing, punctuation, and difference in the lower case letters are ignored. A classic…24Create a PalindromeThis tool converts plain text into palindromes, usually by adding an inverted copy to the back. The result is always the same in both directions, even though the meaning is often…25Whitespace CleanerWhitespace cleaner removes excess spaces, tabs, and new lines to make text easier to read. Usually, this tool cuts the spaces at the beginning and end and combines the double…26Remove Extra SpacesRemove extra spaces removes excess spaces, both at the beginning and end of a line or the row of spaces in the middle of a sentence. Unlike a thoroughly white space cleaner, this…27Remove Blank LinesRemove blank lines removes blank lines or lines that only contain spaces from a text. This is useful for debugging copy-paste results, or code that has many pauses is not…28Tabs to SpacesTabs to spaces convert the tab character into a number of spaces according to the width chosen, usually 2, 4, or 8. Conversion makes the indexing appear consistent across…29Character CounterThe character counter counts the number of characters in a text, sometimes separated between by spaces, without spaces, letters, numbers, and bytes. This is important for form…30Text to BinaryText to binary converts each character into a binary representation of its byte value. For ASCII text, one character is usually 8 bits, while non-ASCII characters in UTF-8 can…31Morse Code TranslatorMorse code translates letters and numbers into a sequence of dots and lines. Each letter is separated by a space, while the word is separated by a slash or wider space. The…32NATO Phonetic AlphabetThe NATO phonetic alphabet replaces each letter with a clear word, such as Alpha, Bravo, and Charlie, so that it is not misheard during radio or telephone communication. This…33Online NotepadAn online notepad is a simple text editor in a browser for quick, unformatted recording. Most tools store the draft in localStorage so that the records remain when the tab is…34Text to SpeechText to speech converts text into sound using synthetic sounds in a device or browser. On the web, the Web Speech API provides SpeechSynthesisUtterance to organize text,…

10

Dev Utilities

20 lessons

01Cron ParserThe cron parser reads five-part cron expressions that determine when a task is running: minutes, hours, dates, months, and days in a week. The star symbol signifies each value,…02Cron Expression BuilderThe Cron expression builder helps you compile a cron expression through menu selections, and then displays results like 0 8**1. You don't have to memorize the sequence of the…03Chmod CalculatorChmod calculator helps calculate the permissions of a Unix file from a combination of read, write, and execute to an octal number like 755. Permissions are divided into owner,…04HTTP Status CodesHTTP status code is a three-digit number that a server sends to inform the result of a request. Code 2xx means successful, 3xx means redirect, 4xx means client-side error, and…05MIME Type LookupMIME type lookup indicates the appropriate content type for a file extension, for example .html to text/html and .png to image/png. This type is sent to the server via the…06Aspect Ratio CalculatorThe aspect ratio calculator helps maintain the ratio of width and height when changing the size of an image or video. The 16:9 ratio means 16 units wide for every 9 units high.…07Social Share PreviewSocial share preview shows the estimated link views when shared on social media. The display is controlled by Open Graph meta tags and Twitter Card, such as og:title,…08Font PreviewFont preview allows you to type a text sample and then look at it in different fonts, sizes, and thicknesses. This tool helps you choose the right font before adding it to your…09CSS MinifierThe CSS minifier removes unnecessary spaces, comments, and characters from the style sheet to make it smaller. The resulting CSS remains valid and can be directly used by the…10JavaScript MinifierJavaScript minifiers shorten code by removing comments and spaces, sometimes also replacing local variable names. The file size shrinks so that pages are downloaded faster, but…11Pixel RulerPixel ruler measures the distance and size of the elements on the screen in units of pixels. This tool helps check the margins, padding, width of the image, or distance between…12Device MockupThe device mockup places the design into the frame of a device such as a phone, tablet, or laptop to see how it looks. This tool helps to present and roughly check responsive…13cURL ConverterThe cURL converter converts curl commands into code in other languages like JavaScript fetch, Python requests, or PHP, and vice versa. Conversion helps move proven HTTP requests…14User Agent ParserThe User Agent Parser reads the user-agent string that the browser sends on each HTTP request, then breaks it down into browser names, versions, rendering machines, operating…15JavaScript Key Code InfoThis page displays information about the keyboard keys you press, such as event.key, event.code, keyCode, and which. With this data, you can choose the right values when creating…16Online StopwatchOnline stopwatches measure intervals with start, stop, and reset buttons, and often provide lap time. In JavaScript, the runtime is calculated from the time stamp difference…17Docker Run to ComposeThe tool translates the docker run command into an equivalent docker-compose.yml file, so that containers that were previously manually run can be managed declaratively. Compose…18ASCII Text ArtASCII Text Art transforms plain text into capital letters consisting of ASCII characters, so that it can be used as a banner in a terminal, code comment, or README. Each letter…19Device InformationThe Device Information page displays browser-accessible device data, such as screen resolution, viewport size, device pixel ratio, language, number of CPU cores, memory…20HTTP Header AnalyzerHTTP Header Analyzer checks the header on request and response to help understand site behavior. You can see Content-Type, cache rules, cookies, CORS, as well as security header…

11

Calculators

33 lessons

01IP Subnet CalculatorIP Subnet Calculator calculates the details of a subnet from the IP address and CIDR prefix, such as network address, broadcast address, range of usable hosts, subnet mask, and…02IP Address ConverterIP Address Converter converts IPv4 between pointed decimal notations, binaries, hexadecimal, and 32-bit integers. Each octet is 0-255 and represents 8 bits, so conversion is…03IP Range ExpanderIP Range Expander converts the CIDR notation or early-end range into a list of IP addresses one by one. The results are useful for compiling allowlist firewalls, checking…04IPv6 ULA GeneratorThe ULA IPv6 generator creates a unique local address prefix with an fc00::/7 range, generally starting with fd, for internal networks not connected to the internet. The…05MAC Address GeneratorMAC Address Generator creates a random 48-bit MAC address in the form of a colon, hyphen, or point notation. This address is useful for network testing, documentation, device…06MAC Address LookupMAC Address Lookup matches the first three octets of MAC addresses with the OUI database to guess the device manufacturer. The OUI is a 24-bit IEEE-registered vendor, so the…07Binary CalculatorA binary calculator performs arithmetic operations on base numbers 2, such as addition, subtraction, multiplication, and division, and often displays results in binary, decimal,…08Bitwise CalculatorBitwise Calculator implements logic operations per bit such as AND, OR, XOR, NOT, as well as left and right shifts on integers. This operation is used to set flags, masks, access…09Unit ConverterUnit Converter is a versatile tool for converting values between units in categories such as length, mass, temperature, area, volume, speed, time, and data storage. Most…10Length ConverterLength Converter converts units of length such as millimeters, centimeters, meters, kilometers, inches, feet, yards, and miles. All units are converted through the meter as the…11Weight ConverterWeight Converter converts units of mass such as milligrams, grams, kilograms, tons, pounds, ounces, and stone. In physics, mass is different from weight, but everyday devices…12Temperature ConverterThe temperature converter changes the temperature between Celsius, Fahrenheit, and Kelvin using a formula that involves offsets, not just the displacement factor. Celsius to…13Data Storage ConverterThe Data Storage Converter changes the size of data between bits, bytes, kilobyte, megabyte, gigabyte, and terabyte, with both a decimal base of 1000 and a binary of 1024. One…14Area ConverterArea Converter converts units of area like square meters, square centimeters, hectares, acres, square feet, and square miles. Since the area is the length of the square, the…15Speed ConverterSpeed Converter converts units of speed like meters per second, kilometers per hour, miles per hour, knots, and feet per second. The easiest conversion is to make the meter per…16Time ConverterTime Converter converts units of time like seconds, minutes, hours, days, weeks, months, and years. Units to weeks have fixed values, whereas months and years depend on calendars…17Volume ConverterThe volume converter converts the units of content such as milliliters, liters, cubic meters, gallons, pint, cups, and fluid ounces. The volume factor is a third of the length…18Roman Numeral ConverterThe Roman Numeral Converter converts ordinary numbers into Roman numbers and vice versa. The system uses the symbols I, V, X, L, C, D, and M with rules of deduction for values…19Date & Age CalculatorDate & Age Calculator calculates the difference between two dates in a year, month, and day, or determines the age from the date of birth. The calculations were based on the…20Age CalculatorAge calculator determines age based on birth and reference dates, usually today. The age in the year is calculated by subtracting the previous year to adjust whether the birthday…21Date DifferenceDate Difference calculates the distance between two dates in a day, week, month, or year. If the date is calculated as a pure date, the difference in days can be obtained from…22Add or Subtract DaysThe Add or Subtract Days tool adds or subtracts a number of days, weeks, months, or years from a date. For days, the addition can automatically exceed the month and year limits.…23Leap Year CheckerThe Leap Year Checker determines whether a leap year is a leap year, which is a year with 366 days and the date is February 29. The rule is divide by 4, except for the year of…24Day of the WeekDay of the Week counts the names of days for a specific date, for example for a schedule, archive, or data analysis. JavaScript provides getDay() with 0 for Sunday, while ISO…25Percentage CalculatorPercentage Calculator addresses three common questions: what is X percent of Y, what is X percent of Y, and what is the percentage change from the old value to the new value.…26Math Expression EvaluatorMath Expression Evaluator reads mathematical expressions such as (3 + 5) x 2 and calculates the result in the order of operations. The multiplication and division operators are…27Number Sequence GeneratorNumber Sequence Generators make a sequence of numbers based on the rules of the beginning, end, and step, or on specific patterns such as multiples and square numbers. The…28Arithmetic Sequence CalculatorArithmetic Sequence Calculator calculates the nth term and the first term of n of the arithmetic line. This row has a fixed difference d between successive tribes, so the formula…29Number to WordsNumber to Words turns a number into a word, for example, 4,305 into four thousand three hundred five. The process is to divide the numbers into three-digit groups like thousands,…30Sum a List of NumbersSum a List of Numbers sums the set of numbers separated by commas, spaces, or new lines. The tool also typically displays the amount of data, the mean, the minimum, and the…31Ohm's Law CalculatorOhm's Law Calculator calculates the relationship between voltage (V), current (I), and impedance (R) using V = I x R. Of the two known values, the third value can be calculated,…32Random Port GeneratorA Random Port Generator generates a random port number for testing purposes or local server configuration. A port is a 16-bit number from 0 to 65535, which is divided into…33Time Zone ConverterTime Zone Converter converts time from one time zone to another, taking into account offset and daylight saving time. The zone should be referred to as an IANA such as…

12

SVG Tools

7 lessons

01SVG OptimizerSVG Optimizer reduces the size of the SVG file by removing metadata, comments, unused attributes, and rounding path coordinates. SVG is a text-based vector format, so many excess…02SVG Placeholder GeneratorSVG Placeholder Generator creates a specific-sized placeholder image with background and text, for example 400 x 200 pixels written Preview. Because it is SVG-shaped, the…03SVG to PNGSVG to PNG converts a vector image to a PNG raster at a given pixel size. PNG is suitable for platforms that do not support SVG or when requiring images with a transparent…04SVG to Data URISVG to Data URI converts SVG code to data URI:image/svg+xml that can be directly pasted in HTML or CSS. URI data eliminates one HTTP request, but magnifies the size of the…05SVG Blob GeneratorSVG Blob Generator packs the SVG code into a Blob object of the image/svg+xml type, and then creates a temporary URL with createObjectURL. The URL can be used to preview in an…06SVG Wave GeneratorSVG Wave Generator creates a waveform with an SVG path to be used as a section limiter or background. The curve is usually formed by the C command for the Bezier cubic or Q for…07SVG Pattern GeneratorSVG Pattern Generator creates repeating patterns by defining tiles within the pattern element, then using them as a fill. Tile sizes, shapes, and colors can be adjusted to…

13

Project Files

6 lessons

01.gitignore GeneratorThe .gitignore generator helps compile a list of file and folder patterns that Git does not need to track, such as node_modules, build results, or secret .env files. You select a…02License GeneratorLicense generators help select open source licenses and generate a LICENSE file that is ready to be placed at the root of the project. You fill out the year and the copyright…03package.json GeneratorThe package.json generator creates a Node.js project manifest that contains names, versions, scripts, and dependency lists. This file is read npm when running a command such as…04.editorconfig GeneratorThe .editorconfig generator generates a code-style rule file that is read by many editors and IDE's. Rules such as the type of indentation, the size of the indentation, the end…05Dockerfile GeneratorThe Dockerfile generator compiles the Docker image creation recipe from language selection, runtime version, port, and start command. The Dockerfile contains the sequence of…06.env Example GeneratorThe .env generator helps create templates of environmental variables for applications, such as API keys, database addresses, and server ports. The file .env contains the…

14

Image Editing

24 lessons

01Background RemoverThe background remover automatically separates the main object in the photo from the background, and then produces a transparent background image. The result is usually stored as…02Change Image ColorsImage color-changing tools are used to shift hue, adjust saturation, or change a particular color without changing the shape of an object. The basic concept is the HSL color…03Change Image OpacityThe opacity controller makes the image semi-transparent by changing the alpha value of each pixel. A 0% value means the image is not visible at all, while 100% means completely…04Make Background TransparentThe transparent background maker transforms a particular background color into transparent based on the chosen color and its tolerance. This is similar to a chroma key: it's…05Crop ImageCrops cut out specific parts of the image so that the framing and dimensions change. This process eliminates pixels outside the selected area, instead of shrinking the entire…06Rotate ImageRotate the image at a certain angle, for example 90, 180, or free angle to balance the horizon. The rotation of the elbow-angle can be done without pixel interpolation, whereas…07Flip ImageFlip reflects the image horizontally or vertically without turning the contents. The horizontal flip switches the left and right sides, while the vertical flip switches the up…08Resize ImageResize changes the number of pixels in an image, either shrinking for web needs or enlarging for a particular view. When you shrink, the detail is discarded and the file size…09Image UpscalerImage upscalers magnify image resolution, both with classical interpolation and artificial intelligence models. AI-based tools try to add details that seem reasonable, but those…10Grayscale ImageThe grayscale converts a colored image to a grayish hue by maintaining a brightness level. Conversions typically use different weights for red, green, and blue because the human…11Blur ImageBlur softened the image by mixing the pixel value with its neighboring pixel. The larger the blur radius, the stronger the effect and the more details are lost. These effects are…12Pixelate ImageThe pixelate divides the image into square blocks and fills each block with a single color, usually the average color of the area. The bigger the block, the rougher the result…13Add Border to ImageThe border adder provides a frame around the image with adjustable width and color. Border helps separate images from the background, unifies visual styles, or creates a look…14Watermark ImageWatermarks attach text or logo to an image as a property or source marker. The important setting is the position, size, and opacity so that the watermark is visible but does not…15Add Text to ImageText-adding tools attach text to images as part of a pixel, not as an editable layer of text. You can set the type, size, color, position, and edge so that the writing stays…16Circle CropCircle crop cuts images following a circular shape, usually for profile photos or avatars. The outer part of the circle is discarded or made transparent, so the result requires…17Join ImagesJoin images combine several images into one canvas, either side by side, stacked, or in grid arrangement. For a smooth result, the size and ratio of the image must be aligned…18Image SplitterImage splitters divide one image into several parts according to the number of rows and columns. Each section can be saved as a separate file, for example for Instagram grids,…19Image Color PickerImage color picker takes the color value of a particular pixel on an image and displays it in HEX, RGB, or HSL format. This tool is useful for matching brand colors, taking…20EXIF Metadata ViewerThe EXIF viewer displays metadata stored in the photo file, such as camera models, lenses, ISO, aperture, shutter speed, date, orientation, and GPS location. This metadata is…21Remove EXIF DataRemove EXIF deletes metadata from image files before sharing, so that camera information, GPS location, and device serial numbers do not get shared. Removing metadata without…22Image to Text (OCR)OCR, or optical character recognition, transforms text that appears in an image into digital text that can be edited and searched for. The quality of the result is highly…23Color Palette from ImageThe palette from image tool extracts the dominant colors from an image and displays them as reusable color codes. The process typically groups pixels based on color similarities,…24Signature MakerSignature makers provide canvases to draw signatures using a mouse, trackpad, or touch screen, and then store them as an image file. Digital signatures like this are usually…

15

Image Converters

27 lessons

01Image ConverterImage converter converts images from one format to another, such as PNG to JPG or WebP to PNG. When converting, you can set the quality of compression and you have to consider…02PNG to JPGPNG to JPG conversion converts lossless images to smaller lossy formats, especially for photos. Since JPG does not support transparency, the alpha area will be filled with the…03PNG to WebPPNG to WebP conversion converts lossless images into modern formats that support lossless and lossless compression as well as transparency. For logos and illustrations, WebP…04PNG to BMPPNG to BMP conversion produces a bitmap that simply stores pixels, but is much larger in size because it is generally uncompressed. 24-bit BMP does not store alpha, so PNG…05PNG to GIFPNG to GIF conversion is useful when you need a highly compatible format or want to create a simple animation. GIFs only support 256 colors per frame and one bit transparency, so…06JPG to PNGConverting JPG to PNG converts a lossy photo to a lossless file, but does not recover lost details. PNGs are usually larger and useful if you need to edit repeatedly or add…07JPG to WebPConverting JPG to WebP converts lossy photos into a modern format that usually produces smaller files of equal visual quality. Since JPG has no transparency, no alpha needs to be…08JPG to BMPConversion of JPG to BMP stores photos back to a generally uncompressed bitmap, so that the size can be many times larger. The decoding result pixel value is maintained, but the…09JPG to GIFConversion of JPG to GIF converts photos to a palette of up to 256 colors, so the fine gradation often turns into a color tape. Dithering can mask the effect, but the detail…10WebP to PNGWebP to PNG conversion converts images into lossless formats that are widely compatible and support transparency. If the source WebP uses lossy compression, PNG will not recover…11WebP to JPGWebP to JPG conversion is useful when the application or target device does not yet support WebP. Since JPGs do not have an alpha, the transparent area of WebP should be leveled…12WebP to BMPConversion of WebP to BMP converts images to bitmaps that are generally uncompressed, making them much larger in size. This conversion maintains the decoding result pixel value,…13WebP to GIFWebP to GIF conversion converts images into a highly compatible 256 color palette format. The fine WebP transparency will be simplified to a bit, so the edges of the object can…14BMP to PNGBMP to PNG conversion resets the bitmap to a lossless format that is much more space-saving and widely supported. The pixel value remains the same, but the file size usually…15BMP to JPGConversion of BMP to JPG uses lossy compression to reduce the size of very large files, especially in photos. Since JPG does not support alpha, BMP transparency must be leveled…16BMP to WebPBMP to WebP conversion produces much smaller files that are ready for use on the modern web. WebP supports both lossy and lossless modes, as well as alpha if the source image has…17BMP to GIFBMP to GIF conversion reduces the file size by converting pixels to a maximum palette of 256 colors. Space savings can be huge, but fine-grained photos and gradations will lose…18GIF to PNGThe GIF to PNG converter converts GIF images into PNG files that store pixels losslessly. GIFs can only accommodate 256 colors per frame and one bit transparency, whereas PNGs…19GIF to JPGGIF to JPG conversion is useful when the destination system only accepts JPEG files, such as application forms or print services. JPG uses very efficient lossy compression for…20GIF to WebPWebP is a modern format that supports static and animated images, alpha transparency, as well as lossy and lossless modes. Converting GIFs to WebP often reduces file sizes…21GIF to BMPBMP is an older bitmap format of Windows environments that stores pixels with little or no compression. Converting GIFs to BMP makes the files much larger and eliminates…22HEIC to JPGHEIC is an iPhone's built-in photo format that uses HEIF containers and HEVC codecs to save storage space. Unfortunately, this format is not yet supported by all applications,…23HEIC to PNGPNG stores the decoding results of HEIC photos in a lossless container, so there is no additional compression when the file is written. However, the details that were lost when…24HEIC to WebPThe conversion of HEIC to WebP combines the efficiency of iPhone photos with web-friendly image formats. WebP supports lossless and lossless compression, transparency, and…25AVIF to JPGAVIF is a very size-efficient, modern AV1 codec-based image format, but not yet open by all old applications. Converting it to JPG makes it easier to use photos in offices,…26AVIF to PNGPNG stores the AVIF decoding results in a lossless container, so there is no extra compression when the file is stored. Still, the details that were lost when AVIF was created…27AVIF to WebPWebP is a web format that supports lossless and lossless compression, transparency, and animation. Converting AVIF to WebP is often chosen when the browser or destination…

16

Image Compression

11 lessons

01Compress ImageImage compression reduces file size by discarding less visible data, lowering dimensions, or clearing metadata. There are two approaches: lossy that reduces quality controlled,…02Bulk Image CompressorBulk image compressors apply the same compression settings to many images at once. This kind of tool saves time compared to opening images one at a time, especially for product…03Increase Image SizeEnlarging an image means increasing the number of pixels, usually by interpolating an existing pixel. This process does not create new details, so the result can appear soft or…04Compress to 10 KBCompression to 10 KB is a very aggressive and realistic target for tiny images like icons, emoji, or small thumbnails. The device will reduce the quality, narrow the dimensions,…05Compress to 20 KBThe 20 KB limit forces images to be so compact, that they are usually used for icons, mini-avatars, or list thumbnails. The tool will lower the dimensions and quality until the…06Compress to 50 KBThe 50 KB target often appears on profile photo upload forms or simple product listings. At this size, a photo can still look decent if the dimensions are not too large and the…07Compress to 100 KBA 100 KB image gives more room for an article photo, product card, or a large thumbnail. The key to a sharp result is always to start with the high-resolution original file, not…08Compress to 200 KBThe 200 KB limit is suitable for product photos, hero images, or medium-sized content images on the web. At this size you can maintain pretty good detail as long as the…09Compress to 500 KBThe 500 KB target is loose and provides space for large-scale high-quality web photos. The final size is heavily influenced by pixel dimensions and the complexity of detail:…10Compress to 1 MBOne megabyte is the limit of enough space for high-resolution photos, mockups, or images to zoom in. At this point, lowering the quality further is often not the same because…11Compress to 2 MBThe 2 MB limit is generally used for high-quality images, such as enlarged catalog photos or presentation materials. This size is rarely needed for a regular web page because it…

17

Social Media

27 lessons

01SOME Image ResizerSocial media image resizer provides preset sizing for multiple platforms in one place. You just select the upload destination, and then the tool adapts dimensions, ratios, and…02Resize to IG PostInstagram posts are square using 1080 x 1080 pixels canvas with a 1:1 ratio. This size is safe for product photos, quotes, and carousels because it appears neatly on the profile…03Resize to IG Portrait PostInstagram portrait posts use canvas 1080 x 1350 pixels with a ratio of 4:5. This ratio fills the phone screen more fully so that the image appears larger in the feed than it does…04Resize to IG LandscapeInstagram landscape posts are 1080 x 566 pixels, with a ratio of 1.91:1. This format is suitable for scenes, banners, and wide-broadcast video, but appears smaller on a mobile…05Resize to IG StoryInstagram Story uses a 1080 x 1920-pixel vertical display with a 9:16 ratio. The top and bottom areas are covered with interface elements such as account names and response…06Resize to IG Profile PhotoInstagram profile photos are displayed as small circles, with a recommendation size of 320 x 320 pixels. Because it's round, the angle of the image will be cut and the subject…07Resize to FB PostFacebook posts for links and images generally use canvas of 1200 x 630 pixels with a ratio of about 1.91:1. This ratio gives space for titles, descriptions, and visual elements…08Resize to FB Cover PhotoFacebook's cover photo uses a wide area, with a reference size of 851 x 315 pixels for desktop. The phone's display cuts different parts, so the logo and text should be placed in…09Resize to FB Profile PhotoFacebook profile photos are displayed in a circle frame measuring about 320 x 320 pixels. The platform will cut the rectangle, so the main subject should be in the middle with…10Resize to FB StoryFacebook Story uses a full vertical display that measures 1080 x 1920 pixels. The interface elements at the top and bottom can cover the content, so the safe area is in the…11Resize to FB Event CoverFacebook's event covers typically use a 16:9 aspect ratio with a reference size of 1920 x 1080 pixels. It needs to have the name of the event, the date, and the visual elements…12Resize to X Post ImageThe post image on X is most neatly displayed with canvas of 1600 x 900 pixels and a 16:9 ratio. This size is quite large for desktop and mobile timelines, and it's still below…13Resize to X HeaderThe X profile header uses a 1500 x 500 pixel wide banner with a ratio of 3:1. Profile photos and interface elements cover some areas, especially the lower left side, so design…14Resize to X Profile PhotoThe X profile picture is displayed as a circle with a reference size of 400 x 400 pixels. Because it's small in the timeline, use a simple, contrasting face or logo. The platform…15Resize to YT ThumbnailYouTube's thumbnail uses canvas of 1280 x 720 pixels with a 16:9 aspect ratio and a 2 MB file size limit. Thumbnails are the first thing that a potential audience sees, so text…16Resize to YT BannerThe YouTube channel banner measures 2048 x 1152 pixels, but only the center area of about 1235 x 338 pixels is always visible on all devices. Areas outside the safe zone can be…17Resize to YT Profile PhotoYouTube profile photos are displayed as a circle with a reference size of 800 x 800 pixels. Since the logo or face appears small under the video and in the channel list, it…18Resize to LI Post ImageLinkedIn post images generally use a 1200 x 627 pixel size with a ratio of close to 1.91:1. LinkedIn feeds are professional, so clean design and concise text are usually more…19Resize to LI Cover BannerLinkedIn's cover banners for corporate pages use a reference size of 1584 x 396 pixels with a 4:1 ratio. The area is wide and short, so the text should be concise and the…20Resize to LI Profile PhotoLinkedIn profile photos are displayed as a circle with a reference size of 400 x 400 pixels. Professional profiles typically use a clear face, good lighting, and a simple…21Resize to LI LogoThe LinkedIn company logo is displayed in a small box measuring about 300 x 300 pixels. Because of its narrow space, a logo with simple shapes and high contrast is easier to…22Resize to TT Video CoverThe video cover of TikTok uses a 1080 x 1920-pixel vertical display with a 9:16 ratio. The top, bottom, and right of the screen are filled with buttons and app text, so the main…23Resize to TT Profile PhotoTikTok profile photos are displayed as small circles with a reference size of 200 x 200 pixels. Since it's so small, use a single subject with a simple background and enough…24Resize to PIN PinPinterest pins use a 2:3 vertical ratio with a reference size of 1000 x 1500 pixels. This ratio gives space for both the main image and the explicit text without making the pins…25Resize to PIN ProfilePinterest profile photos are displayed as a circle with a reference size of 165 x 165 pixels. Because they're so small, the photographs should have a clear subject and a…26Resize to WA ProfileWhatsApp profile photos are displayed as a small circle in the chat list and contact page. The safe reference size is 500 x 500 pixels with a 1:1 ratio. Because of its small…27Resize to WA StatusThis tool prepares images to fit as a vertical WhatsApp status. The commonly used size is 1080 x 1920 pixels with a 9:16 ratio, so landscape photos need to be cut or added to…

18

Video Tools

11 lessons

01Video TrimmerThe video trimmer cuts the beginning and end of the video so that only the required parts remain. You set the start and end dots on the timeline, and then the tool generates new…02Video CompressorVideo compressors reduce file sizes to make uploading or sending easier. Size is affected by resolution, bitrate, codec, and duration; lowering one of these will reduce size but…03Rotate a VideoThe rotate feature rotates the entire video frame by 90, 180, or 270 degrees. This is useful for mobile video that looks sloppy because it's recorded with different orientations.…04Flip a VideoFlip reflects video against horizontal or vertical axes. The horizontal flip makes the image look like looking in a mirror, while the vertical flip swaps up and down. This…05Crop a VideoCrop cuts the video image area so that only a portion of the frame remains. You determine the width, height, and position of the left dot above the area of the cut. This feature…06Resize a VideoResize the video pixel dimensions, for example from 1920 x 1080 to 1280 x 720. If the aspect ratio is not maintained, the image will appear flat or elongated. Reducing resolution…07Change Video SpeedThe speed change feature speeds up or slows down video playback. At 2x, the duration is half; at 0.5x, the duration is doubled. The change in speed must be applied to video and…08Loop a VideoThe video loop device repeats the clip several times and then combines it into one file. You can set the number of repetitions, so that the short video feels longer without…09MP4 to MP3MP4 to MP3 converter takes audio tracks from video files and stores them as standalone audio files. The process separates audio from images, then compresses it with an MP3 codec.…10Video to GIFVideo to GIF converter converts video clips into animations that can be played automatically in almost any application. GIFs have no audio and only support 256 colors per frame,…11Video Frame ExtractorVideo frame extractor stores one or more silent images of the video at a given time. You can pick the seconds to how many frames are taken, and then download it as JPEG or PNG.…

19

Recorders & Device Tests

4 lessons

01Microphone TestMicrophone test checks to see if the microphone is working and how loud the sound is captured. Once permission is granted, the browser displays the meter level moving as you…02Webcam TestThe webcam test shows a preview of the camera directly in the browser to make sure the camera works properly. Once permission is granted, you can see the focus, lighting, and…03Voice RecorderThe voice recorder records the sound from the microphone and stores it as an audio file on the device. Modern browsers use the MediaRecorder API to capture audio, then generate…04Screen RecorderThe screen recorder captures images from a screen, application window, or browser tab and stores them as video. You pick the source of the capture, and the browser asks for…

20

Meme Tools

3 lessons

01Meme GeneratorThe meme generator adds funny text or comments to an image so it becomes a meme ready to share. Typically text is placed at the top and bottom of the image with white and black…02Demotivational PosterDemotivational posters are images with thick black frames and one sentence at the bottom. Unlike the meme that covers text on an image, this poster separates images from text to…03Video Meme GIFA GIF meme video converts short clips into repeated GIFs with the addition of text. This format is popular because it is instantly played without a play button and easily shared…

21

PDF Tools

10 lessons

01Image to PDFImage to PDF combines one or more images into a PDF document. Each image can be a single page, with a set of paper sizes, orientations, margins, and sequences. The PDF format…02Merge PDFMerge PDFs to combine several PDF documents into one file. You can arrange the order of documents, select a specific page range, and sometimes add bookmarks between sections. The…03Split PDFSplit PDFs break a document into several smaller files. You can separate each page into its own file, divide it by its range, or take a particular page. This feature is useful…04PDF to ImagePDF to image converts each page of PDF into an image file like PNG or JPEG. This process is called rasterization: the page that originally contained text and vectors is converted…05Extract Images from PDFExtract images from PDF takes images embedded in a PDF document. Unlike PDF to image, which renders entire pages, this tool tries to extract the original image assets and…06Compress PDFPDF compresses reduce the size of documents to make them faster to send or upload. The biggest reductions typically come from lower image resolution, deletion of metadata, and…07PDF to TextPDF to text extracts text characters from PDF documents into a plain text file. This only works on PDFs that have a text layer, which is digital text that is stored as…08Rotate PDFThe rotate PDF rotates the pages of a document by 90, 180, or 270 degrees. You can turn all the pages at once or just a certain page that is actually wrong orientation. These…09Organize PDF PagesOrganize PDF pages allows you to rearrange the pages of a document by dragging, deleting, duplicating, or inserting pages. You can throw out unnecessary pages and organize a more…10Add Page Nr to PDFAdd page numbers add page numbers to a PDF document automatically. You can choose the position, the size of the letters, the format of the numbers, and the start of the numbering…

22

GIF Tools

5 lessons

01GIF MakerGIF makers compose some images into repeating GIF animations. You set the order of the images, the intervals between frames, the size of the canvas, and whether the animation…02GIF to FramesGIF to frames breaks down GIF animations into image files for each frame. The result can be a PNG or JPEG sequence that makes it easy for you to edit, analyze movements, or…03Add Text to GIFAdd text to GIF adds text directly to the animated frame so that the text moves or blinks with the GIF. You choose the content of the text, the font size, the color, the…04Change GIF SpeedChange GIF speed regulates how quickly frames change by changing the delay between frames. Smaller delays make animation move faster, while larger delays make it slow. The total…05Reverse GIFReverse GIFs rotate the frame sequence from back to front so that the animation moves in reverse. This effect is often used to make a motion of a squeeze, for example, forward…

23

Audio Tools

8 lessons

01Audio CutterThe audio cutter cuts the beginning and end of the audio file so that only the desired range remains. You can see the waveform to determine the cutting point more precisely.…02Audio JoinerAudio joiner combines two or more audio files into one recording in sequence. You sort the file order, pause, or add a crossfade to make the transfer sound smooth. For consistent…03Change Audio VolumeChange audio volume to increase or decrease the level of loudness. Changes are usually measured in decibels (dB); positive values magnify the volume, negative values reduce it.…04Change Audio SpeedChange audio speed to speed up or slow down audio playback without having to change the duration of the video. If the tempo is changed without pitch adjustment, the sound can be…05Loop an Audio FileThe audio loop repeats a recording several times to make it longer. You set the number of repetitions or the duration of the target, and then the tool composes the audio copies…06Audio Fade In and OutAudio fade in and fade out makes sounds appear or disappear gradually. Fade in is usually worn at the beginning of a song to avoid collapsing, while fade out is worn at the end…07Audio to WAV ConverterThe audio converter converts files from one format to another, in this case producing WAV. WAV stores audio as a PCM without lossy compression, making it suitable for editing and…08Audio Metadata ViewerThe audio metadata viewer displays technical information and tags stored in the audio file. You can see the title, the artist, the album, the genre, the duration, the bitrate,…

24

Audio Converters

8 lessons

01MP3 to WAVMP3 to WAV converts compressed MP3 audio to uncompressed PCM WAV. This process decodes MP3s and then stores audio samples in WAV format. The result is larger and more compatible…02OGG to WAVOGG to WAV converts the Ogg file, which usually contains Vorbis or Opus audio, to WAV PCM. Ogg is an efficient container for streaming and small sizes, while WAV provides broader…03M4A to WAVM4A to WAV converts the M4A file that usually contains AAC audio to WAV PCM. M4A is popular with iTunes and Apple devices because of its efficient size, while WAV is easier to…04FLAC to WAVFLAC to WAV converts audio lossless FLAC to WAV PCM. Since FLAC stores audio data without loss of quality, the WAV results have the same quality as the source. The difference is…05WAV to MP3WAV to MP3 converts large PCM audio to a more compact MP3 with lossy compression. You can choose bitrate; higher values give better quality but larger files. MP3s are perfect for…06OGG to MP3OGG is an open audio container format that generally contains Vorbis codecs, whereas MP3 is a lossy audio format that is supported by almost all music players, mobile phones, and…07M4A to MP3M4A is an audio file in an MP4 container that typically uses the AAC codec, and is produced largely by Apple devices, iTunes, and music services. The M4A to MP3 tool converts it…08FLAC to MP3FLAC is a compressed lossless audio format, meaning that all original audio data remains stored even though the file size is smaller than WAV. MP3 is a lossy format that throws…

25

SEO Tools

5 lessons

01Favicon GeneratorFavicon is a small icon that appears in the browser tabs, bookmarks, and device shortcuts. The favicon generator helps to convert one image into several sizes and formats that…02Sitemap GeneratorAn XML sitemap is a file that tells a search engine a list of important URLs on a site. A sitemap generator helps to compile the file from a list of pages or site search results,…03JSON-LD SchemaJSON-LD is a way of writing structured data in JSON format that is placed inside HTML pages. This data uses the word schema.org to describe an entity such as an article, product,…04UTM Link BuilderUTM parameters are the query bits in a URL that help analytics tools know where visitors are coming from. UTM Link Builder compiles parameters such as source, medium, campaign,…05Hreflang Tag GeneratorThe hreflang attribute tells the search engine the language version and region of a page that contains equivalent content. Hreflang Tag Generator helps to create the correct tags…

26

Security & Crypto

10 lessons

01AES Encrypt / DecryptAES is a symmetric encryption algorithm that uses a single key to lock and unlock data. The AES Encrypt/Decrypt tool helps to see how plaintext changes to ciphertext and returns…02Key Pair GeneratorKey pair generators create asymmetric key pairs consisting of public and private keys. Public keys may be shared for signature verification or encryption, whereas private keys…03HMAC GeneratorHMAC is a message authentication code that combines hash functions with a secret key. The results prove that the message was unchanged and actually came from the same key holder.…04JWT SignerJWT (JSON Web Token) is a token made up of header, payload, and signature separated by a point. The payload contains claims such as user identity and expiration time, then the…05Token GeneratorThe token generator creates a random string that is difficult to predict for session, API key, password reset, or CSRF protection. The quality of the token depends on a random…06TOTP Generator and ValidatorTOTP (Time-based One-Time Password) is a verification code that changes every time period, usually 30 seconds. The code is calculated from the shared secret and the current time,…07ULID GeneratorULID (Universally Unique Lexicographically Sortable Identifier) is a 128-bit identifier written as 26 Crockford Base32 characters. The initial section contains a millisecond…08Basic Auth Header GeneratorHTTP Basic Authentication sends the username and password in the Authorization header in the Base64 format from username:password. Base64 is just encoding, not encryption, so…09Bcrypt Hash GeneratorBcrypt is a password hashing algorithm that was deliberately created slow and adaptive. Each hash uses a unique salt, so the same two passwords still produce different hashes.…10Password Strength CheckerPassword strength checker estimates how difficult a password is to guess by calculating entropy and matching common patterns. Length and randomness are far more important than…

27

CSV Tools

9 lessons

01Change CSV SeparatorCSV uses separator or delimiter characters to limit columns, and commas are the most common option. In some regions, semicolons or tabs are more commonly used because the comma…02Transpose CSVTranspose CSV to change the position of rows and columns, so that the column header changes to the first column and each row of data to a new column. This operation is useful for…03Find Incomplete CSV RecordsAn incomplete CSV record occurs when the number of fields on a row is different from the number of columns on the header. The common cause is a blank value at the end of a line,…04Insert a CSV ColumnInsert a CSV Column adds a new column to a specific position on each row. New columns need header names and values for all records to keep the number of fields consistent. This…05Swap CSV ColumnsSwap CSV Columns swaps the positions of the two columns without changing the contents of each value. This operation is useful when the column sequence needs to be adjusted to the…06CSV to TSVCSV and TSV both store data tables, but CSV uses a comma while TSV uses the tab character as a separator. TSVs are convenient for attaching data to spreadsheets and are often…07CSV to XMLCSV to XML converts the table data into XML documents that have hierarchical structures. Each row of CSV is usually a single element of the record, while the column name is the…08CSV to YAMLCSV to YAML converts the table data to YAML, a format that relies on indentations to show structure. Each row of CSV is usually a single mapping within the list, with the column…09TSV to JSONTSV to JSON converts tab-separated data into an easy-to-use JSON structure for applications. The header row is used as the key, whereas each row of data becomes one object within…

28

Lines & Lists

13 lessons

01Sort LinesSort Lines sort lines of text based on their contents, either alphabetically, numerically, or according to a particular arrangement. The alphabetical order compares characters by…02Remove Duplicate LinesRemove Duplicate Lines removes lines that contain exactly the same content and usually retains the first appearance. Matching can be influenced by spaces, uppercase, and hidden…03Find Duplicate LinesFind Duplicate Lines searches for lines that appear more than once and usually displays the number of appearances. This tool helps find double entries to lists, customer data, or…04Shuffle LinesShuffle Lines trace the sequence of lines without changing the content of each line. A good implementation uses the Fisher-Yates algorithm so that every permutation has a fair…05Reverse Line OrderReverse Line Order reverses the order of the lines from the last to the first, without reversing the characters within each line. This command differs from rev that flips text…06Join LinesJoin Lines combine several lines into one line with a specific separator, such as a comma, spacetime, or semicolon. This tool is useful for converting vertical lists into the…07Split TextSplit Text breaks a text into several sections based on delimiter, pattern, character width, or line. This tool is often used to separate comma-separated lists, break down long…08Wrap Each LineWrap Each Line breaks long lines into a few short lines to be easily read at a certain width. Hard wrap inserts the actual newline into the file, whereas soft wrap only folds the…09Unwrap LinesUnwrap Lines combines previously folded lines into one paragraph back. Separators such as blank lines are usually maintained to mark the boundary of paragraphs. Be careful when…10Group LinesGroup Lines arrange the row into several groups based on a particular number, pattern, or key. Clustering helps read long data, create reports per category, or set up batch…11Find Most Common LinesFind Most Common Lines calculates the frequency of each row and displays the most frequently occurring. This tool is useful for analyzing large numbers of open comments,…12Rotate LinesRotate Lines move the line circularly as much as a certain position, so that the outgoing line at one end reappears at the other end. The left-hand rotation moves the upper line…13Truncate a ListTruncate a List limits the number of rows that are displayed or saved, for example only the first 10 rows or the last 5 rows. This tool is useful for previewing, sampling, or…

All-course subscription

$5.00 / 30 days

Access every course, lesson, and quiz. Progress is saved automatically.

This curriculum is free to browse. Activate a subscription to unlock full lessons, code examples, and quizzes.

Activate subscription Back to course