react

import React, { Component } from "react";

class IconList extends Component {
  static defaultProps = {
    options: [
      "angry",
      "anchor",
      "archive",
      "at",
      "archway",
      "baby",
      "bell",
      "bolt",
      "bone",
      "car",
      "city",
      "cloud",
      "couch"
    ]
  };
  constructor(props) {
    super(props);
    this.state = { icons: ["bone", "cloud"] };
    this.addIcon = this.addIcon.bind(this);
  }
  //DON'T DO THIS!!!!
  // addIcon() {
  //   let idx = Math.floor(Math.random() * this.props.options.length);
  //   let newIcon = this.props.options[idx];
  //   let icons = this.state.icons;
  //   icons.push(newIcon);
  //   this.setState({ icons: icons });
  // }

  addIcon() {
    // get random index
    let idx = Math.floor(Math.random() * this.props.options.length);
 	// get new element
    let newIcon = this.props.options[idx];
    // update the state of the icons array (spread icons into new array, add new icon to it)
    this.setState({ icons: [...this.state.icons, newIcon] });
  }
  render() {
    // render newly mapped icons array
    const icons = this.state.icons.map(i => <i className={`fas fa-${i}`} />);
    return (
      <div>
        <h1>Icons: {icons}</h1>
        <button onClick={this.addIcon}>Add New Icon</button>
      </div>
    );
  }
}

export default IconList;
//What are pure functions?
//Pure functions take an input value (a parameter or argument) and produce an output value. //Like with hashing, the same input it will always return the same output 

const myPureFunction = number => return number * 4

//Pure functions must:
//1. Contain no side effects
//2. When given the same input, return the same output.
// A pure component avoids any use of state.
map
filter
reduce
// This is what I've been using, pretty straight forward
// It passes the JSON to the children as props
// Of course, you fetch what you will
 
import React, { Component, Fragment } from 'react';
 
export class FetchJsonController extends Component
{
	constructor(props) {
		super(props);
		this.state = {
			data: null,
		};
	}
 
	componentDidMount() {
		fetch(this.props.src)
			.then(response => response.json())
			.then(data => {
				console.log(data);
				this.setState({ data })
			});
	}
 
	render() {
		const _data = this.state.data;
		const children = React.Children.map(this.props.children, child => {
			return React.cloneElement(child, {
				jsonData: _data
			});
		});
		return (
			<div>{ children }</div>
		)
	}
}
 
// This is how it's used
// SomeCompnent will receive the JSON data
<FetchJsonController src="somefile.json">
  <SomeComponent />
</FetchJsonController>
import React from 'react';

const names = ['James', 'John', 'Paul', 'Ringo', 'George'];

function App() {
  return (
    <div>
      {names.filter(name => name.includes('J')).map(filteredName => (
        <li>
          {filteredName}
        </li>
      ))}
    </div>
  );
}

export default App;
import React from 'react';

const people = [
  {
    name: 'James',
    age: 31,
  },
  {
    name: 'John',
    age: 45,
  },
  {
    name: 'Paul',
    age: 65,
  },
  {
    name: 'Ringo',
    age: 49,
  },
  {
    name: 'George',
    age: 34,
  }
];

function App() {
  return (
    <div>
      {people.filter(person => person.age < 60).map(filteredPerson => (
        <li>
          {filteredPerson.name}
        </li>
      ))}
    </div>
  );
}

export default App;
//app.js
import React, { useState } from 'react';
import './App.css';
import Switch from "./Switch";

function App() {
  const [value, setValue] = useState(false);
  return (
    <div className="app">
      <Switch
        isOn={value}
        onColor="#EF476F"
        handleToggle={() => setValue(!value)}
      />
    </div>
  );
}

export default App;

//Switch.js
import React from 'react';

const Switch = ({ isOn, handleToggle, onColor }) => {
  return (
    <>
      <input
        checked={isOn}
        onChange={handleToggle}
        className="react-switch-checkbox"
        id={`react-switch-new`}
        type="checkbox"
      />
      <label
        style={{ background: isOn && onColor }}
        className="react-switch-label"
        htmlFor={`react-switch-new`}
      >
        <span className={`react-switch-button`} />
      </label>
    </>
  );
};

export default Switch;

//css
.react-switch-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
}

.react-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: grey;
  border-radius: 100px;
  position: relative;
  transition: background-color .2s;
}

.react-switch-label .react-switch-button {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 45px;
  height: 45px;
  border-radius: 45px;
  transition: 0.2s;
  background: #fff;
  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
}

.react-switch-checkbox:checked + .react-switch-label .react-switch-button {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

.react-switch-label:active .react-switch-button {
  width: 60px;
}
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: 0,
    };
  }
  
  // this.checkAge is passed as the callback to setState
  updateAge = (value) => {
    this.setState({ age: value}, this.checkAge);
  };

  checkAge = () => {
    const { age } = this.state;
    if (age !== 0 && age >= 21) {
      // Make API call to /beer
    } else {
      // Throw error 404, beer not found
    }
  };

  render() {
    const { age } = this.state;
    return (
      <div>
        <p>Drinking Age Checker</p>
        <input
          type="number"
          value={age}
          onChange={e => this.updateAge(e.target.value)}
        />
      </div>
    );
  }

}

export default App;
import React, { useEffect, useState } from 'react';

function App() {
  const [age, setAge] = useState(0);
  
  updateAge(value) {
    setDisplayUsaStudents(
            (prevDisplayUsaStudents) => !prevDisplayUsaStudents
          );
    setAge({prevAge: value});
  };

  useEffect(() => {
    if (age !== 0 && age >= 21) {
      // Make API call to /beer
    } else {
      // Throw error 404, beer not found
    }
//the square parentheses with the age state variable inside is called the dependency array. //it tells the useEffect function to listen for any changes to the state of age.
//when age changes, useEffect executes
  }, [age]);

  return (
    <div>
      <p>Drinking Age Checker</p>
      <input
        type="number"
        value={age} 
        onChange={e => setAge(e.target.value)}
      />
    </div>
  );
}

export default App;
//app.js
import React, { useState } from 'react';
import './App.css';

function App() {
  const [firstDieResult, setFirstDieResult] = useState(1);
  const [secondDieResult, setSecondDieResult] = useState(6);
  //OR
  //const [diceResult, setDiceResult] = useState({
  	//firstDieResult: 1,
  	//secondDieResult: 6,
	//});

  const firstDieImage = require(`./assets/${firstDieResult}.png`);
  const secondDieImage = require(`./assets/${secondDieResult}.png`);

  function rollDice() {
    setFirstDieResult(Math.floor(Math.random() * 6) + 1);
    setSecondDieResult(Math.floor(Math.random() * 6) + 1);
  }

  return (
    <div className="App">
      <header className="App-header">
        <div style={{ display: 'flex', margin: 20 }}>
          <img src={firstDieImage} className="die" alt="Die one" />
          <img src={secondDieImage} className="die" alt="Die two" />
        </div>
        <span>{firstDieResult + secondDieResult}</span>
        <button className="button" onClick={rollDice}>Roll</button>
      </header>
    </div>
  );
}

export default App;

//css

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(16px + 2vmin);
  color: white;
}

.die {
  width: 50px;
  height: 50px;
  margin: 10px;
}

.button {
  margin-top: 20px;
  outline: none;
  animation: button-gradient 25s ease infinite;
  background-image: -webkit-linear-gradient(65deg,#21d4fd,#b721ff 50%,#017eff);
  background-image: linear-gradient(25deg,#21d4fd,#b721ff 50%,#017eff);
  background-size: 500%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 3px 0 0 #5664a7;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  height: 40px;
  width: 150px;
}

.button:hover {
  box-shadow: 0 2px 0 0 #5664a7;
}

.button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.05);
}
// get images => https://upmostly.com/wp-content/uploads/react-dice-assets.zip
import React, { useState } from 'react'

const MyComponent = () => {
  const [toggle, setToggle] = useState(false)

  return(
    <>
      <button onClick={() => setToggle(!toggle)}>Toggle Dropdown Markup</button>
      {toggle && (
        <ul>
          <li>Show me</li>
          <li>Only when</li>
          <li>Toggle === true</li>
        </ul>
      )}
    </>
  )
}
//Provider Component
import React, { Component } from 'react';

// Create new context
const MyContext = React.createContext();

// Create the Provider that will pass down state and methods to the rest of the application.
class MyProvider extends Component {
  state = {
    name: 'Dominic',
    age: 28,
  };
  render() {
    return (
      <MyContext.Provider value={{
        state: this.state,
        addYear: () => this.setState({
          age: this.state.age + 1
        })
      }}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

// Create the consumer that will consume the data provided by the Provider.
class Company extends Component {
  render() {
    return(
      <div className="company">
        <MyContext.Consumer>
          {(context) => (
            //Fragment added here since you can only return one child
            <>
              <p>Welcome to {context.state.name}</p>
              <p>We are {context.state.age} years old!</p>
              <button onClick={context.addYear}>Add Year</button>
            </>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}

// We'll nest our Consumer inside another component just to show that we don't need to pass props to each component.
const Companies = () => (
  <div>
    <Company />
  </div>
)

class App extends Component {
  render() {
    return (
      // Ensure the provider wraps all the components you want to share data between.
      <MyProvider>
        <div className="App">
          <Companies />
        </div>
      </MyProvider>
    );
  }
}

export default App;
//Using Inline Styles
import React from 'react';

function App() {
  return (
    <div
      style={{
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      }}
    />
  );
}

export default App;

//Conditional Changing the Background Color in React
import React from 'react';

function App() {
  const isBackgroundRed = true;

  return (
    <div
      style={{
        backgroundColor: isBackgroundRed ? 'red' : 'blue',
      }}
    />
  );
}

export default App;

//OR

//App.js
import React from 'react';
import './App.css';

function App() {
  const isBackgroundRed = true;
  
  return (
    <div className={isBackgroundRed ? 'background-red' : 'background-blue'} />
  );
}

export default App;
//App.css
.background-red {
  background-color: red;
}

.background-blue {
  background-color: blue;
}
import React, { useState } from "react";
import "./App.css";

const App = () => {
  const [counterA, setCounterA] = useState(0);
  const [counterB, setCounterB] = useState(0);

  return (
    <div>
      <button
        onClick={() => {
          setCounterA(counterA + 1);
        }}
      >
        Increment A
      </button>
      <button
        onClick={() => {
          setCounterB(counterB + 1);
        }}
      >
        Increment B
      </button>
      <div>counterA: {counterA}</div>
      <div>counterB: {counterB}</div>
    </div>
  );
};

export default App;
const Nav = styled.div`
    div > a.active > div {
        color: ${props => props.color}
     }
`
function Header() {
    const {DefaultColor} = useContext(GlobalContext)
    return <Nav color={DefaultColor?.success} />
}

Similiar Collections

Python strftime reference pandas.Period.strftime python - Formatting Quarter time in pandas columns - Stack Overflow python - Pandas: Change day - Stack Overflow python - Check if multiple columns exist in a df - Stack Overflow Pandas DataFrame apply() - sending arguments examples python - How to filter a dataframe of dates by a particular month/day? - Stack Overflow python - replace a value in the entire pandas data frame - Stack Overflow python - Replacing blank values (white space) with NaN in pandas - Stack Overflow python - get list from pandas dataframe column - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to lowercase a pandas dataframe string column if it has missing values? - Stack Overflow How to Convert Integers to Strings in Pandas DataFrame - Data to Fish How to Convert Integers to Strings in Pandas DataFrame - Data to Fish create a dictionary of two pandas Dataframe columns? - Stack Overflow python - ValueError: No axis named node2 for object type <class 'pandas.core.frame.DataFrame'> - Stack Overflow Python Pandas iterate over rows and access column names - Stack Overflow python - Creating dataframe from a dictionary where entries have different lengths - Stack Overflow python - Deleting DataFrame row in Pandas based on column value - Stack Overflow python - How to check if a column exists in Pandas - Stack Overflow python - Import pandas dataframe column as string not int - Stack Overflow python - What is the most efficient way to create a dictionary of two pandas Dataframe columns? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow python - How do I get the row count of a Pandas DataFrame? - Stack Overflow python - How to save a new sheet in an existing excel file, using Pandas? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow How do I select a subset of a DataFrame? โ€” pandas 1.2.4 documentation python - Delete column from pandas DataFrame - Stack Overflow python - Convert list of dictionaries to a pandas DataFrame - Stack Overflow How to Add or Insert Row to Pandas DataFrame? - Python Examples python - Check if a value exists in pandas dataframe index - Stack Overflow python - Set value for particular cell in pandas DataFrame using index - Stack Overflow python - Pandas Dataframe How to cut off float decimal points without rounding? - Stack Overflow python - Pandas: Change day - Stack Overflow python - Clean way to convert quarterly periods to datetime in pandas - Stack Overflow Pandas - Number of Months Between Two Dates - Stack Overflow python - MonthEnd object result in <11 * MonthEnds> instead of number - Stack Overflow python - Extracting the first day of month of a datetime type column in pandas - Stack Overflow
MySQL MULTIPLES INNER JOIN How to Use EXISTS, UNIQUE, DISTINCT, and OVERLAPS in SQL Statements - dummies postgresql - SQL OVERLAPS PostgreSQL Joins: Inner, Outer, Left, Right, Natural with Examples PostgreSQL Joins: A Visual Explanation of PostgreSQL Joins PL/pgSQL Variables ( Format Dates ) The Ultimate Guide to PostgreSQL Date By Examples Data Type Formatting Functions PostgreSQL - How to calculate difference between two timestamps? | TablePlus Date/Time Functions and Operators PostgreSQL - DATEDIFF - Datetime Difference in Seconds, Days, Months, Weeks etc - SQLines CASE Statements in PostgreSQL - DataCamp SQL Optimizations in PostgreSQL: IN vs EXISTS vs ANY/ALL vs JOIN PostgreSQL DESCRIBE TABLE Quick and best way to Compare Two Tables in SQL - DWgeek.com sql - Best way to select random rows PostgreSQL - Stack Overflow PostgreSQL: Documentation: 13: 70.1.ย Row Estimation Examples Faster PostgreSQL Counting How to Add a Default Value to a Column in PostgreSQL - PopSQL How to Add a Default Value to a Column in PostgreSQL - PopSQL SQL Subquery - Dofactory SQL IN - SQL NOT IN - JournalDev DROP FUNCTION (Transact-SQL) - SQL Server | Microsoft Docs SQL : Multiple Row and Column Subqueries - w3resource PostgreSQL: Documentation: 9.5: CREATE FUNCTION PostgreSQL CREATE FUNCTION By Practical Examples datetime - PHP Sort a multidimensional array by element containing date - Stack Overflow database - Oracle order NULL LAST by default - Stack Overflow PostgreSQL: Documentation: 9.5: Modifying Tables PostgreSQL: Documentation: 14: SELECT postgresql - sql ORDER BY multiple values in specific order? - Stack Overflow How do I get the current unix timestamp from PostgreSQL? - Database Administrators Stack Exchange SQL MAX() with HAVING, WHERE, IN - w3resource linux - Which version of PostgreSQL am I running? - Stack Overflow Copying Data Between Tables in a Postgres Database php - How to remove all numbers from string? - Stack Overflow
Clear config cache Eloquent DB::Table RAW Query / WhereNull Laravel Eloquent "IN" Query get single column value in laravel eloquent php - How to use CASE WHEN in Eloquent ORM? - Stack Overflow AND-OR-AND + brackets with Eloquent - Laravel Daily Database: Query Builder - Laravel - The PHP Framework For Web Artisans ( RAW ) Combine Foreach Loop and Eloquent to perform a search | Laravel.io Access Controller method from another controller in Laravel 5 How to Call a controller function in another Controller in Laravel 5 php - Create a Laravel Request object on the fly php - Laravel 5.6 Upgrade caused Logging to break Artisan Console - Laravel - The PHP Framework For Web Artisans What to include in gitignore for a Laravel and PHPStorm project php - Create a Laravel Request object on the fly Process big DB table with chunk() method - Laravel Daily How to insert big data on the laravel? - Stack Overflow php - How can I build a condition based query in Laravel? - Stack Overflow Laravel Chunk Eloquent Method Example - Tuts Make Database: Migrations - Laravel - The PHP Framework For Web Artisans php - Laravel Model Error Handling when Creating - Exception Laravel - Inner Join with Multiple Conditions Example using Query Builder - ItSolutionStuff.com laravel cache disable phpunit code example | Newbedev In PHP, how to check if a multidimensional array is empty? ยท Humblix php - Laravel firstOrNew how to check if it's first or new? - Stack Overflow get base url laravel 8 Code Example Using gmail smtp via Laravel: Connection could not be established with host smtp.gmail.com [Connection timed out #110] - Stack Overflow
PostgreSQL POSITION() function PostgresQL ANY / SOME Operator ( IN vs ANY ) PostgreSQL Substring - Extracting a substring from a String How to add an auto-incrementing primary key to an existing table, in PostgreSQL PostgreSQL STRING_TO_ARRAY()function mysql FIND_IN_SET equivalent to postgresql PL/pgSQL Variables ( Format Dates ) The Ultimate Guide to PostgreSQL Date By Examples Data Type Formatting Functions PostgreSQL - How to calculate difference between two timestamps? | TablePlus Date/Time Functions and Operators PostgreSQL - DATEDIFF - Datetime Difference in Seconds, Days, Months, Weeks etc - SQLines CASE Statements in PostgreSQL - DataCamp SQL Optimizations in PostgreSQL: IN vs EXISTS vs ANY/ALL vs JOIN PL/pgSQL Variables PostgreSQL: Documentation: 11: CREATE PROCEDURE Reading a Postgres EXPLAIN ANALYZE Query Plan Faster PostgreSQL Counting sql - Fast way to discover the row count of a table in PostgreSQL - Stack Overflow PostgreSQL: Documentation: 9.1: tablefunc PostgreSQL DESCRIBE TABLE Quick and best way to Compare Two Tables in SQL - DWgeek.com sql - Best way to select random rows PostgreSQL - Stack Overflow How to Add a Default Value to a Column in PostgreSQL - PopSQL How to Add a Default Value to a Column in PostgreSQL - PopSQL PL/pgSQL IF Statement PostgreSQL: Documentation: 9.1: Declarations SQL Subquery - Dofactory SQL IN - SQL NOT IN - JournalDev PostgreSQL - IF Statement - GeeksforGeeks How to work with control structures in PostgreSQL stored procedures: Using IF, CASE, and LOOP statements | EDB PL/pgSQL IF Statement How to combine multiple selects in one query - Databases - ( loop reference ) DROP FUNCTION (Transact-SQL) - SQL Server | Microsoft Docs SQL : Multiple Row and Column Subqueries - w3resource PostgreSQL: Documentation: 9.5: CREATE FUNCTION PostgreSQL CREATE FUNCTION By Practical Examples datetime - PHP Sort a multidimensional array by element containing date - Stack Overflow database - Oracle order NULL LAST by default - Stack Overflow PostgreSQL: Documentation: 9.5: Modifying Tables PostgreSQL: Documentation: 14: SELECT PostgreSQL Array: The ANY and Contains trick - Postgres OnLine Journal postgresql - sql ORDER BY multiple values in specific order? - Stack Overflow sql - How to aggregate two PostgreSQL columns to an array separated by brackets - Stack Overflow How do I get the current unix timestamp from PostgreSQL? - Database Administrators Stack Exchange SQL MAX() with HAVING, WHERE, IN - w3resource linux - Which version of PostgreSQL am I running? - Stack Overflow Postgres login: How to log into a Postgresql database | alvinalexander.com Copying Data Between Tables in a Postgres Database PostgreSQL CREATE FUNCTION By Practical Examples php - How to remove all numbers from string? - Stack Overflow
ะกะพะทะดะฐะตะผ callback ะดะปั ัะพั…ั€ะฐะฝะตะฝะธั ะฝะตะนั€ะพะฝะฝะพะน ัะตั‚ะธ ะฝะฐ ะบะฐะถะดะพะน ัะฟะพั…ะต, ะตัะปะธ ะบะฐั‡ะตัั‚ะฒะพ ั€ะฐะฑะพั‚ั‹ ะฝะฐ ะฟั€ะพะฒะตั€ะพั‡ะฝะพะผ ะฝะฐะฑะพั€ะต ะดะฐะฝะฝั‹ั… ัƒะปัƒั‡ัˆะธะปะพััŒ. ะกะตั‚ัŒ ัะพั…ั€ะฐะฝัะตั‚ัั ะฒ ั„ะฐะนะป "ะฝะฐะทะฒะฐะฝะธะต_ะฝะฐัˆะตะน_ะผะพะดะตะปะธ.h5" ะ’ั‹ะฒะพะด ัั…ะตะผั‹ ะผะพะดะตะปะธ (ะทะฐะผะตั‚ัŒั‚ะต ั‡ั‚ะพ ั€ะฐะทะผะตั€ะฝะพัั‚ะธ, ะบะพั‚ะพั€ั‹ะต ะฒั‹ ะฒะธะดะธั‚ะต ะฝะฐ ัั…ะตะผะต ัั‚ะพ ั€ะฐะทะผะตั€ะฝะพัั‚ะธ ะฟะฐะบะตั‚ะพะฒ, ะฐ ะฝะต ะฟะพัะปะตะผะตะฝั‚ะฝั‹ะต ั€ะฐะทะผะตั€ะฝะพัั‚ะธ). ะกะพั…ั€ะฐะฝัะตะผ ะธ ะทะฐะณั€ัƒะถะฐะตะผ ะฒะตัะฐ ะผะพะดะตะปะธ ะŸะพะดะบะปัŽั‡ะฐะตะผ ะณัƒะณะป ะดะธัะบ ะ ะฐัะฟะฐะบะพะฒั‹ะฒะฐะตะผ ะทะธะฟ ะฐั€ั…ะธะฒ, ะธ ัะพะทะดะฐะตะผ ะฟะฐะฟะบัƒ ะฟะพะด ะฝะตะณะพ ะ—ะฐะณั€ัƒะทะธั‚ะต ะฑะพะปัŒัˆะพะน ั„ะฐะนะป ั Google ะ”ะธัะบะฐ. ะ•ัะปะธ ะฒั‹ ะธัะฟะพะปัŒะทัƒะตั‚ะต curl / wget, ะพะฝ ะฝะต ั€ะฐะฑะพั‚ะฐะตั‚ ั ะฑะพะปัŒัˆะธะผ ั„ะฐะนะปะพะผ ะธะท-ะทะฐ ะฟั€ะตะดัƒะฟั€ะตะถะดะตะฝะธั ัะธัั‚ะตะผั‹ ะฑะตะทะพะฟะฐัะฝะพัั‚ะธ ั Google ะ”ะธัะบะฐ. ะ ะฐะทะฑะธะฒะฐะตะผ ะดะฐั‚ะฐัะตั‚ ะ’ั‹ะฒะพะด ะณั€ะฐั„ะธะบะฐ ะพะฑัƒั‡ะตะฝะธั
ๆต่งˆๅ™จ้ป˜่ฎคcssๆ ทๅผๆธ…้™ค ๆต่งˆๅ™จ้ป˜่ฎคcssๆ ทๅผๆธ…้™ค CSS ๆ–‡ๅญ—่ฃ…้ฅฐ -ไธ‹ๅˆ’็บฟ CSS ๆ–‡ๅญ—่ฃ…้ฅฐ text-decoration & text-emphasis ยท Issue #103 ยท chokcoco/iCSS CSS่ฎพ็ฝฎๆ–‡ๅญ—ไธŽ่ฃ…้ฅฐ็บฟ้ขœ่‰ฒๅˆ†็ฆปtext-decoration-color ไธŽ color ๅˆ†็ฆป CSSๆ–‡ๅญ—ๅ’Œ่ฃ…้ฅฐ็บฟๅŠจ็”ป CSS ๆ–‡ๅญ—่ฃ…้ฅฐ text-decoration & text-emphasis CSS ๆ–‡ๅญ—่ฃ…้ฅฐ text-decoration & text-emphasis ยท Issue #103 ยท chokcoco/iCSS CSS ๆ–‡ๅญ—่ฃ…้ฅฐbackgroundๆจกๆ‹Ÿไธ‹ๅˆ’็บฟ CSS ๆ–‡ๅญ—่ฃ…้ฅฐ backgroundๆจกๆ‹Ÿ่™š็บฟ CSS ๆ–‡ๅญ—่ฃ…้ฅฐ-ๅทงๅฆ™ๆ”นๅ˜ background-size ไธŽ background-position ๅฎž็Žฐๆ–‡ๅญ— hover ๅŠจๆ•ˆ CSS ๆ–‡ๅญ—่ฃ…้ฅฐ-ๆ”นๅ˜ background-position ๅฎž็Žฐๆ–‡ๅญ— hover ๅŠจๆ•ˆ(ๅๅ‘ๆ•ˆๆžœ) CSS ๆ–‡ๅญ—่ฃ…้ฅฐ ไธ‹ๅˆ’็บฟๅ˜่‰ฒๆ•ˆๆžœ็š„ๅฎž็Žฐ CSS ไผ ็ปŸๆ–นๅผๅฎž็Žฐ็›ด็บฟ่ทฏๅพ„ๅŠจ็”ป CSS ไผ ็ปŸๆ–นๅผๅฎž็Žฐๆ›ฒ็บฟ่ทฏๅพ„ๅŠจ็”ป CSS Motion Path ๅฎž็Žฐ็›ด็บฟ่ทฏๅพ„ๅŠจ็”ป CSS Motion Path ๅฎž็Žฐๆณขๆตชๅฝข่ทฏๅพ„ๅŠจ็”ป CSS Motion Path ๅฎž็Žฐๆ›ฒ็บฟ่ทฏๅพ„ๅŠจ็”ป CSSไธ‰่ง’ๅฝข็š„ๅฎž็Žฐ CSS-offset-anchor ่ฟๅŠจ้”š็‚น ๅˆฉ็”จ Motion Path ๅˆถไฝœๆŒ‰้’ฎ็‚นๅ‡ปๆ’’็‚นๆ•ˆๆžœ Button Animation with CSS Offset Paths Button Animation with CSS Offset Paths ๆฑฝ่ฝฆๅœฐๅ›พ่กŒ้ฉถๆ•ˆๆžœ ๅˆฉ็”จ Motion-Path ็ป˜ๅˆถ่ทฏๅพ„ๅŠจ็”ป Notebook theme - FoldingText Theme demonstrating multiple header styles - FoldingText How to install a theme? - FoldingText
ื›ืžื” ืขื•ื“ ื ืฉืืจ ืœืžืฉืœื•ื— ื—ื™ื ื ื’ื ืœืขื’ืœื” ื•ืœืฆืงืืื•ื˜ ื”ื•ืกืคืช ืฆ'ืงื‘ื•ืงืก ืœืื™ืฉื•ืจ ื“ื™ื•ื•ืจ ื‘ืฆ'ืงืืื•ื˜ ื”ืกืชืจืช ืืคืฉืจื•ื™ื•ืช ืžืฉืœื•ื— ืื—ืจื•ืช ื›ืืฉืจ ืžืฉืœื•ื— ื—ื™ื ื ื–ืžื™ืŸ ื“ื™ืœื•ื’ ืขืœ ืžื™ืœื•ื™ ื›ืชื•ื‘ืช ื‘ืžืงืจื” ืฉื ื‘ื—ืจื” ืืคืฉืจื•ืช ืื™ืกื•ืฃ ืขืฆืžื™ ื”ื•ืกืคืช ืฆ'ืงื‘ื•ืงืก ืœืื™ืฉื•ืจ ื“ื™ื•ื•ืจ ื‘ืฆ'ืงืืื•ื˜ ืฉื™ื ื•ื™ ื”ืืคืฉืจื•ื™ื•ืช ื‘ืชืคืจื™ื˜ ื”-ืกื™ื“ื•ืจ ืœืคื™ ื‘ื•ื•ืงื•ืžืจืก ืฉื™ื ื•ื™ ื”ื˜ืงืกื˜ "ืื–ืœ ืžื”ืžืœืื™" ื”ืขืจื” ืื™ืฉื™ืช ืœืกื•ืฃ ืขืžื•ื“ ื”ืขื’ืœื” ื”ื’ื‘ืœืช ืจื›ื™ืฉื” ืœื›ืœ ื”ืžื•ืฆืจื™ื ืœืžืงืกื™ืžื•ื 1 ืžื›ืœ ืžื•ืฆืจ ืงื‘ืœืช ืฉื ื”ืžื•ืฆืจ ืœืคื™ ื”-ID ื‘ืขื–ืจืช ืฉื•ืจื˜ืงื•ื“ ื”ื•ืกืคืช ื›ืคืชื•ืจ ื•ื•ืื˜ืกืืค ืœืงื ื™ื™ื” ื‘ืœื•ืค ืืจื›ื™ื•ืŸ ืžื•ืฆืจื™ื ื”ืคื™ื›ื” ืฉืœ ืžื™ืงื•ื“ ื‘ืฆ'ืงืืื•ื˜ ืœืœื ื—ื•ื‘ื” ืžืขื‘ืจ ื™ืฉื™ืจ ืœืฆ'ืงืืื•ื˜ ื‘ืœื—ื™ืชื” ืขืœ ื”ื•ืกืคื” ืœืกืœ (ื“ื™ืœื•ื’ ืขื’ืœื”) ื”ืชืจืื” ืœืงื‘ืœืช ืžืฉืœื•ื— ื—ื™ื ื ื‘ื“ืฃ ืขื’ืœืช ื”ืงื ื™ื•ืช ื’ืจืกื” 1 ื”ืชืจืื” ืœืงื‘ืœืช ืžืฉืœื•ื— ื—ื™ื ื ื‘ื“ืฃ ืขื’ืœืช ื”ืงื ื™ื•ืช ื’ืจืกื” 2 ืงื‘ื™ืขื” ืฉืœ ืžื—ื™ืจ ื”ื–ืžื ื” ืžื™ื ื™ืžืœื™ (ืžื•ืฆื’ ื‘ืขื’ืœื” ื•ื‘ืฆ'ืงืืื•ื˜) ื”ืขื‘ืจืช ืงื•ื“ ื”ืงื•ืคื•ืŸ ืœ-ORDER REVIEW ื”ืขื‘ืจืช ืงื•ื“ ื”ืงื•ืคื•ืŸ ืœ-ORDER REVIEW Kadence WooCommerce Email Designer ืงื‘ื™ืขืช ืคื•ื ื˜ ืืกื™ืกื ื˜ ืœื›ืœ ื”ืžื™ื™ืœ ื‘ืชื•ืกืฃ ืžื•ืฆืจื™ื ืฉืื–ืœื• ืžื”ืžืœืื™ - ื™ื•ืคื™ืขื• ืžืกื•ืžื ื™ื ื‘ืืชืจ, ืื‘ืœ ื‘ืชื—ืชื™ืช ื”ืืจื›ื™ื•ืŸ ื”ื•ืกืคืช ื›ืคืชื•ืจ "ืงื ื” ืขื›ืฉื™ื•" ืœืžื•ืฆืจื™ื ื”ืกืชืจืช ืืคืฉืจื•ื™ื•ืช ืžืฉืœื•ื— ืื—ืจื•ืช ื›ืืฉืจ ืžืฉืœื•ื— ื—ื™ื ื ื–ืžื™ืŸ ืฉื™ื˜ื” 2 ืฉื™ื ื•ื™ ืกื™ืžืŸ ืžื˜ื‘ืข ืฉ"ื— ืœ-ILS ืœื”ืคื•ืš ืกื˜ื˜ื•ืก ื”ื–ืžื ื” ืž"ื”ืฉื”ื™ื™ื”" ืœ"ื”ื•ืฉืœื" ื‘ืื•ืคืŸ ืื•ื˜ื•ืžื˜ื™ ืชืฆื•ื’ืช ื”ื ื—ื” ื‘ืื—ื•ื–ื™ื ืฉื™ื ื•ื™ ื˜ืงืกื˜ "ื‘ื—ืจ ืืคืฉืจื•ื™ื•ืช" ื‘ืžื•ืฆืจื™ื ืขื ื•ืจื™ืืฆื™ื•ืช ื—ื™ืคื•ืฉ ืžื•ืฆืจ ืœืคื™ ืžืง"ื˜ ืฉื™ื ื•ื™ ืชืžื•ื ืช ืžื•ืฆืจ ืœืคื™ ื•ืจื™ืืฆื™ื” ืื—ืจื™ ื‘ื—ื™ืจื” ืฉืœ ื•ืจื™ืืฆื™ื” ืื—ืช ื‘ืžืงืจื” ืฉืœ ื•ืจื™ืืฆื™ื•ืช ืžืจื•ื‘ื•ืช ื”ื ื—ื” ืงื‘ื•ืขื” ืœืคื™ ืชืคืงื™ื“ ื‘ืชืขืจื™ืฃ ืงื‘ื•ืข ื”ื ื—ื” ืงื‘ื•ืขื” ืœืคื™ ืชืคืงื™ื“ ื‘ืื—ื•ื–ื™ื ื”ืกืจื” ืฉืœ ืฉื“ื•ืช ืžืฉืœื•ื— ืœืงื‘ืฆื™ื ื•ื™ืจื˜ื•ืืœื™ื™ื ื”ืกืชืจืช ื˜ืื‘ื™ื ืžืขืžื•ื“ ืžื•ืฆืจ ื”ืฆื’ืช ืชื’ื™ืช "ืื–ืœ ืžื”ืžืœืื™" ื‘ืœื•ืค ื”ืžื•ืฆืจื™ื ืœื”ืคื•ืš ืฉื“ื•ืช ืœ-ืœื ื—ื•ื‘ื” ื‘ืฆ'ืงืืื•ื˜ ืฉื™ื ื•ื™ ื˜ืงืกื˜ "ืื–ืœ ืžื”ืžืœืื™" ืœื•ืจื™ืืฆื™ื•ืช ืฉื™ื ื•ื™ ืฆื‘ืข ื”ื”ื•ื“ืขื•ืช ื”ืžื•ื‘ื ื•ืช ืฉืœ ื•ื•ืงื•ืžืจืก ื”ืฆื’ืช ื”-ID ืฉืœ ืงื˜ื’ื•ืจื™ื•ืช ื”ืžื•ืฆืจื™ื ื‘ืขืžื•ื“ ื”ืงื˜ื’ื•ืจื™ื•ืช ืื–ืœ ืžื”ืžืœืื™- ืฉื™ื ื•ื™ ื”ื”ื•ื“ืขื”, ืชื’ื™ืช ื‘ืœื•ืค, ื”ื•ื“ืขื” ื‘ื“ืฃ ื”ืžื•ืฆืจ ื•ื”ื•ืกืคืช ืื–ืœ ืžื”ืžืœืื™ ืขืœ ื•ืจื™ืืฆื™ื” ื”ื•ืกืคืช ืฉื“ื” ืžื—ื™ืจ ืกืคืง ืœื“ืฃ ื”ืขืจื™ื›ื” ืฉื™ื ื•ื™ ื˜ืงืกื˜ ืื–ืœ ืžื”ืžืœืื™ ืชืžื•ื ื•ืช ืžื•ืฆืจ ื‘ืžืื•ื ืš ืœืฆื“ ืชืžื•ื ืช ื”ืžื•ืฆืจ ื”ืจืืฉื™ืช ื‘ืืœืžื ื˜ื•ืจ ื”ื•ืกืคืช ื›ืคืชื•ืจ ืงื ื” ืขื›ืฉื™ื• ืœืขืžื•ื“ ื”ืžื•ืฆืจ ื‘ืงื ื™ื” ื”ื–ื• ื—ืกื›ืช XX ืฉ''ื— ืœืืคืฉืจ ืœืžื ื”ืœ ื—ื ื•ืช ืœื ืงื•ืช ืงืืฉ ื‘ืจื•ืงื˜ ืœืืคืฉืจ ืจืง ืžื•ืฆืจ ืื—ื“ ื‘ืขื’ืœืช ืงื ื™ื•ืช ื”ื•ืกืคืช ืกื™ืžื•ืŸ ืืจื™ื–ืช ืžืชื ื” ื•ืื–ื•ืจ ืœื”ื•ืจืื•ืช ื‘ืฆ'ืงืืื•ื˜ ืฉืœ ื•ื•ืงื•ืžืจืก ื”ืฆื’ืช ื”ื ื—ื” ื‘ืžืกืคืจ (ื’ื•ื“ืœ ื”ื”ื ื—ื”) ื”ื•ืกืคืช "ืื™ืฉื•ืจ ืชืงื ื•ืŸ" ืœื“ืฃ ื”ืชืฉืœื•ื ื”ืฆื’ืช ืจืฉื™ืžืช ืชื›ื•ื ื•ืช ื”ืžื•ืฆืจ ื‘ืคืจื•ื ื˜
ื”ื—ืœืคืช ื˜ืงืกื˜ ื‘ืืชืจ (ืžืชืื™ื ื’ื ืœืชืจื’ื•ื ื ืงื•ื“ืชื™) ื”ืกืจืช ืคื•ื ื˜ื™ื ืฉืœ ื’ื•ื’ืœ ืžืชื‘ื ื™ืช KAVA ื‘ื™ื˜ื•ืœ ื”ืชืจืื•ืช ื‘ืžื™ื™ืœ ืขืœ ืขื“ื›ื•ืŸ ื•ื•ืจื“ืคืจืก ืื•ื˜ื•ืžื˜ื™ ื”ื•ืกืคืช ืชืžื™ื›ื” ื‘ืงื‘ืฆื™ VCF ื‘ืืชืจ (ืงื‘ืฆื™ ืื™ืฉ ืงืฉืจ VCARD) - ื—ืœืง 1 ืœื”ื—ืจื™ื’ ืงื˜ื’ื•ืจื™ื” ืžืกื•ื™ืžืช ืžืชื•ืฆืื•ืช ื”ื—ื™ืคื•ืฉ ืฉืœื™ืคืช ืชื•ื›ืŸ ืฉืœ ืจื™ืคื™ื˜ืจ ื™ืฆื™ืจืช ื›ืคืชื•ืจ ืฉื™ืชื•ืฃ ืœืžื•ื‘ื™ื™ืœ ื–ื™ื”ื•ื™ ืืœื• ืืœืžื ื˜ื™ื ื’ื•ืจืžื™ื ืœื’ืœื™ืœื” ืื•ืคืงื™ืช ื”ืชืงื ืช SMTP ื”ื’ื“ืจืช ื˜ืงืกื˜ ื—ืœื•ืคื™ ืœืชืžื•ื ื•ืช ืœืคื™ ืฉื ื”ืงื•ื‘ืฅ ื”ื•ืกืคืช ื”ืชืืžืช ืชื•ืกืคื™ื ืœื’ืจืกืช WP ื”ื•ืกืคืช ื˜ื•ืจ ID ืœืžืฉืชืžืฉื™ื ื”ืกืจืช ื›ื•ืชืจืช ื‘ืชื‘ื ื™ืช HELLO ื”ืกืจืช ืชื’ื•ื‘ื•ืช ื‘ืื•ืคืŸ ื’ื•ืจืฃ ื”ืจืฉืืช SVG ื—ื™ืœื•ืฅ ื”ื—ืœืง ื”ืื—ืจื•ืŸ ืฉืœ ื›ืชื•ื‘ืช ื”ืขืžื•ื“ ื”ื ื•ื›ื—ื™ ื—ื™ืœื•ืฅ ื”ืกืœืื’ ืฉืœ ื”ืขืžื•ื“ ื—ื™ืœื•ืฅ ื›ืชื•ื‘ืช ื”ืขืžื•ื“ ื”ื ื•ื›ื—ื™ ืžื ื™ืขืช ื™ืฆื™ืจืช ืชืžื•ื ื•ืช ืžื•ืงื˜ื ื•ืช ื”ืชืงื ืช SMTP ื”ืฆื’ืช ื”-ID ืฉืœ ืงื˜ื’ื•ืจื™ื•ืช ื‘ืขืžื•ื“ ื”ืงื˜ื’ื•ืจื™ื•ืช ืœื”ื•ืจื™ื“ ืžืชืคืจื™ื˜ ื”ื ื™ื”ื•ืœ ืขืžื•ื“ื™ื ื”ื•ืกืคืช Favicon ืฉื•ื ื” ืœื›ืœ ื“ืฃ ื•ื“ืฃ ื”ื•ืกืคืช ืืคืฉืจื•ืช ืฉื›ืคื•ืœ ืคื•ืกื˜ื™ื ื•ื‘ื›ืœืœ (ืฉืœ ืฉืžืขื•ืŸ ืกื‘ื™ืจ) ื”ืกืจืช ืชื’ื•ื‘ื•ืช ื‘ืื•ืคืŸ ื’ื•ืจืฃ 2 ื‘ืงื ื™ื” ื”ื–ื• ื—ืกื›ืช XX ืฉ''ื— ื—ื™ืคื•ืฉ ืืœืžื ื˜ื™ื ืกื•ืจืจื™ื, ื’ืœื™ืฉื” ืฆื“ื™ืช ื‘ืžื•ื‘ื™ื™ืœ ืฉื™ื˜ื” 1 ืœืืคืฉืจ ืจืง ืžื•ืฆืจ ืื—ื“ ื‘ืขื’ืœืช ืงื ื™ื•ืช ื”ืฆื’ืช ื”ื ื—ื” ื‘ืžืกืคืจ (ื’ื•ื“ืœ ื”ื”ื ื—ื”) ื”ื•ืกืคืช "ืื™ืฉื•ืจ ืชืงื ื•ืŸ" ืœื“ืฃ ื”ืชืฉืœื•ื ืฉื™ื ื•ื™ ืฆื‘ืข ื”ืื“ืžื™ืŸ ืœืคื™ ืกื˜ื˜ื•ืก ื”ืขืžื•ื“/ืคื•ืกื˜ ืฉื™ื ื•ื™ ืฆื‘ืข ืื“ืžื™ืŸ ืœื›ื•ืœื ืœืคื™ ื”ืกื›ืžื•ืช ืฉืœ ื•ื•ืจื“ืคืจืก ืชืฆื•ื’ืช ื›ืžื•ืช ืฆืคื™ื•ืช ืžืชื•ืš ื”ื“ืฉื‘ื•ืจื“ ืฉืœ ื•ื•ืจื“ืคืจืก ื”ืฆื’ืช ืกื•ื’ ืžืฉืชืžืฉ ื‘ืคืจื•ื ื˜ ื’ืœื™ืœื” ืื™ืŸ ืกื•ืคื™ืช ื‘ืžื“ื™ื” ืฉืคืช ื”ืžืžืฉืง ืฉืœ ืืœืžื ื˜ื•ืจ ืชื•ืืžืช ืœืฉืคืช ื”ืžืฉืชืžืฉ
ื”ื•ื“ืขืช ืฉื’ื™ืื” ืžื•ืชืืžืช ืื™ืฉื™ืช ื‘ื˜ืคืกื™ื ืœื”ืคื•ืš ื›ืœ ืกืงืฉืŸ/ืขืžื•ื“ื” ืœืงืœื™ืงื‘ื™ืœื™ืช (ืœื—ื™ืฆื”) - ืฉื™ื˜ื” 1 ืœื”ืคื•ืš ื›ืœ ืกืงืฉืŸ/ืขืžื•ื“ื” ืœืงืœื™ืงื‘ื™ืœื™ืช (ืœื—ื™ืฆื”) - ืฉื™ื˜ื” 2 ืฉื™ื ื•ื™ ื”ื’ื‘ืœืช ื”ื–ื™ื›ืจื•ืŸ ื‘ืฉืจืช ื”ื•ืกืคืช ืœื™ื ืง ืœื”ื•ืจื“ืช ืžืกืžืš ืžื”ืืชืจ ื‘ืžื™ื™ืœ ื”ื ืฉืœื— ืœืœืงื•ื— ืœื”ืคื•ืš ื›ืœ ืกืงืฉืŸ/ืขืžื•ื“ื” ืœืงืœื™ืงื‘ื™ืœื™ืช (ืœื—ื™ืฆื”) - ืฉื™ื˜ื” 3 ื™ืฆื™ืจืช ื›ืคืชื•ืจ ืฉื™ืชื•ืฃ ืœืžื•ื‘ื™ื™ืœ ืคืชื™ื—ืช ื“ืฃ ืชื•ื“ื” ื‘ื˜ืื‘ ื—ื“ืฉ ื‘ื–ืžืŸ ืฉืœื™ื—ืช ื˜ื•ืคืก ืืœืžื ื˜ื•ืจ - ื˜ื•ืคืก ื‘ื•ื“ื“ ื‘ื“ืฃ ืคืชื™ื—ืช ื“ืฃ ืชื•ื“ื” ื‘ื˜ืื‘ ื—ื“ืฉ ื‘ื–ืžืŸ ืฉืœื™ื—ืช ื˜ื•ืคืก ืืœืžื ื˜ื•ืจ - ื˜ืคืกื™ื ืžืจื•ื‘ื™ื ื‘ื“ืฃ ื‘ื™ื™ ื‘ื™ื™ ืœืืจื™ืง ื’'ื•ื ืก (ื—ืกื™ืžืช ืกืคืื ื‘ื˜ืคืกื™ื) ื–ื™ื”ื•ื™ ืืœื• ืืœืžื ื˜ื™ื ื’ื•ืจืžื™ื ืœื’ืœื™ืœื” ืื•ืคืงื™ืช ืœื™ื™ื‘ืœื™ื ืžืจื—ืคื™ื ื‘ื˜ืคืกื™ ืืœืžื ื˜ื•ืจ ื™ืฆื™ืจืช ืื ื™ืžืฆื™ื” ืฉืœ "ื—ื“ืฉื•ืช ืจืฆื•ืช" ื‘ื’'ื˜ (marquee) ืฉื™ื ื•ื™ ืคื•ื ื˜ ื‘ืื•ืคืŸ ื“ื™ื ืืžื™ ื‘ื’'ื˜ ืคื•ื ืงืฆื™ื” ืฉืฉื•ืœืคืช ืฉื“ื•ืช ืžื˜ื ืžืชื•ืš JET ื•ืžืืคืฉืจืช ืœืฉื™ื ื”ื›ืœ ื‘ืชื•ืš ืฉื“ื” SELECT ื‘ื˜ื•ืคืก ืืœืžื ื˜ื•ืจ ื”ื•ืกืคืช ืงื• ื‘ื™ืŸ ืจื›ื™ื‘ื™ ื”ืชืคืจื™ื˜ ื‘ื“ืกืงื˜ื•ืค ื•ืœื“ืฆื™ื” ืœืžืกืคืจื™ ื˜ืœืคื•ืŸ ื‘ื˜ืคืกื™ ืืœืžื ื˜ื•ืจ ื—ื™ื‘ื•ืจ ืฉื ื™ ืฉื“ื•ืช ื‘ื˜ื•ืคืก ืœืฉื“ื” ืื—ื“ ืฉืื™ื‘ืช ื ืชื•ืŸ ืžืชื•ืš ื›ืชื•ื‘ืช ื”-URL ืœืชื•ืš ืฉื“ื” ื‘ื˜ื•ืคืก ื•ืงื™ื“ื•ื“ ืœืขื‘ืจื™ืช ืžื“ื™ื” ืงื•ื•ืจื™ ืœืžื•ื‘ื™ื™ืœ ืœื™ื™ื‘ืœื™ื ืžืจื—ืคื™ื ื‘ื˜ืคืกื™ ืืœืžื ื˜ื•ืจ ืชืžื•ื ื•ืช ืžื•ืฆืจ ื‘ืžืื•ื ืš ืœืฆื“ ืชืžื•ื ืช ื”ืžื•ืฆืจ ื”ืจืืฉื™ืช ื‘ืืœืžื ื˜ื•ืจ ื”ืฆื’ืช ืชืืจื™ืš ืขื‘ืจื™ ืคื•ืจืžื˜ ืชืืจื™ืš ืžื•ืชืื ืื™ืฉื™ืช ืชื™ืงื•ืŸ ืฉื“ื” ืชืืจื™ืš ื‘ื˜ื•ืคืก ืืœืžื ื˜ื•ืจ ื‘ืžื•ื‘ื™ื™ืœ ืฉืื™ื‘ืช ืคืจืžื˜ืจ ืžืชื•ืš ื”ื›ืชื•ื‘ืช ื•ื”ื–ื ืชื• ืœืชื•ืš ืฉื“ื” ื‘ื˜ื•ืคืก (PARAMETER, URL, INPUT) ืขืžื•ื“ื•ืช ื‘ืจื•ื—ื‘ ืžืœื ื‘ืืœืžื ื˜ื•ืจ ืขืžื•ื“ื” ื“ื‘ื™ืงื” ื‘ืชื•ืš ืืœืžื ื˜ื•ืจ ื™ืฆื™ืจืช "ืฆืœ" ืื•ืžื ื•ืชื™ ืงื•ื“ ืœืกื•ื•ื™ืฆ'ืจ, ืฉื ื™ ื›ืคืชื•ืจื™ื ื•ืฉื ื™ ืืœืžื ื˜ื™ื ืกืงืจื™ืคื˜ ืœืกื’ื™ืจืช ืคื•ืคืืค ืฉืœ ืชืคืจื™ื˜ ืœืื—ืจ ืœื—ื™ืฆื” ืขืœ ืื—ื“ ื”ืขืžื•ื“ื™ื ื”ื•ืกืคืช ื›ืคืชื•ืจ ืงืจื ืขื•ื“ ืฉืคืช ื”ืžืžืฉืง ืฉืœ ืืœืžื ื˜ื•ืจ ืชื•ืืžืช ืœืฉืคืช ื”ืžืฉืชืžืฉ