FRAMER MOTION <👤 >
https://t.me/EthioCodeSoftSelect ጤና ይስጥልኝ የ ECSS ቤተሰቦች ቀጣይ Framer Motion ይቀጥላል ✨

╔════════════════════════════════════════════╗
🌟 ETHIOCODE • PHASE 3 • L05 🌟✨🎬
╚════════════════════════════════════════════╝
📋 FRAMER MOTION 📋
በ React ውስጥ አኒሜሽኖችን በቀላሉ እና እጅግ በሚያምር ሁኔታ ለመስራት ምርጡ መሣሪያ!
ወገኖች ሰላም ነው? 😎🎥
እስካሁን በ CSS @keyframes ብዙ እየጻፋችሁ ትደክሙ ነበር?
Exit animation፣ Stagger፣ Spring physics፣ ወይስ እንደ hover, tap, drag ያሉ የ Gesture አኒሜሽኖች? እያንዳንዱን ነገር በእጅ ለማስተካከልስ ስንት ሰዓት አሳልፋችኋል? 😩
🛑 አቁሙ! አሁን ሁሉም ነገር ቀላል ሆኗል!
══════════════════════════════════════════════
✨ መፍትሄው = Framer Motion
በቃ! motion.divን ብቻ በመጠቀም ሁሉንም አኒሜሽኖች በቀላሉ መቆጣጠር ትችላላችሁ!
╔════════════════════════════════════════════╗
import { motion, AnimatePresence } from "framer-motion";
╚════════════════════════════════════════════╝
ይህ በ React ውስጥ እጅግ ተወዳጅና ለስራ ዝግጁ የሆነ (production-ready) የ animation library ነው!
🚀 ዋና ዋና ጥቅሞቹ፦
⚡ በጣም ፈጣንና ቀላል፦ በትንሽ ኮድ በአጭር ጊዜ ውስጥ ድንቅ ስራዎችን መስራት።
🌿 Spring Physics፦ ተፈጥሯዊና ሳቢ የሆኑ እንቅስቃሴዎች።
🎭 Variants + Stagger፦ ለሊስቶች (lists) የሚሆኑ የተዋቡ አኒሜሽኖች።
🚪 AnimatePresence፦ ዕቃዎች ሲገቡና ሲወጡ የሚታዩ (Enter & Exit) አኒሜሽኖች።
👆 Gestures፦ እንደ whileHover፣ whileTap እና drag ያሉ መስተጋብሮች።
🔄 Layout animations እና ማራኪ የገጽ ሽግግሮች (page transitions)።
══════════════════════════════════════════════
🎯 በዚህ ትምህርት ምን ታገኛላችሁ?
• Framer Motion ምንድን ነው? ከባህላዊ የ CSS አኒሜሽን ጋር ማነጻጸር
• ዋናዎቹን Props (initial, animate, exit, transition) በቀጥታ በተግባር ማየት
• Variants & Stagger — ለሊስቶች ተስማሚ የሆኑ አኒሜሽኖች
• AnimatePresence — Modal, Notification, እና List delete አኒሜሽኖች
• Gestures (Hover, Tap, Drag) + የመለማመጃ ቦታ (Playground)
• ሙሉ ምሳሌ፦ Product Card List + Page Transition + Quiz 🎮
🔥 ትምህርቱን አሁኑኑ በነፃ ጀምሩ! Interactive Playground እና Quiz አብሮት አለው፦
🔗 https://ethiocodesoftselectp3l5.netlify.app
📱 በስልክ ከገባችሁ "Desktop Site" ማብራት እንዳትረሱ!
══════════════════════════════════════════════
◀️👈 PREV: React Hook Form P3·L04 | ▶️➡️ NEXT: Coming Soon!
@EthioCodeSoftSelect
ይህንን በመማር ድረ-ገጾቻችሁን ይበልጥ ውብ፣ ማራኪ እና ፕሮፌሽናል ማድረግ ትችላላችሁ! 💪🎨
ለጓደኛችሁ developer share ማድረጋችሁን እንዳትረሱ! 🚀✨<👤 >

​🚨 አስቸኳይ መልእክት ለECSS ቤተሰቦች 🚨
​ሰላም ለሁላችሁ...
​አሁን በሩሲያ የምኖር በመሆኔ፣ ከዛሬ ጀምሮ ለተወሰኑ ሳምንታት፣ ወራት ወይም አልፎ ተርፎም ለዓመታት በመካከላችን የመገናኘት ክፍተት ሊፈጠር ይችላል። ሁኔታዎች ከእኔ ቁጥጥር ውጭ ቢሆኑም፣ መንፈሳችን ግን ሁልጊዜም አንድ ነው።
​እባካችሁ፦
• ትዕግስት ይኑራችሁ
• እርስ በርሳችሁ ተደጋገፉ
• ቻናሉን እንደ ሁለተኛ ቤታችሁ አድርጋችሁ ጠብቁት
​ተመልሰን ስንመጣ እንደገና በጥንካሬ አንድ ላይ እንሆናለን።
ECSS ቤተሰብ ለዘላለም አንድ ነው! ❤️
​ይህ የሆነበት ምክንያት፦
​የሩሲያ የደህንነት አገልግሎት (FSB) በቴሌግራም መስራች ፓቬል ዱሮቭ ላይ «ሽብርተኝነትን በመደገፍ» ክስ አቅርቧል።
​ለክሱ የተሰጠው ምክንያት፦ የዩክሬን የመረጃ አገልግሎቶች እና ሌሎች አካላት በቴሌግራም ላይ የሚጠቀሙባቸው ቻናሎች፣ ቻቶች እና ቦቶች አልተዘጉም በሚል ነው። እነዚህ አካላት በሩሲያ ውስጥ የመፍረስ እና የሽብር ተግባራትን ለማቀድ ይጠቀሙባቸዋል ተብሏል።
​በዚህም ምክንያት፦
​ዓለም አቀፍ የእስር ትዕዛዝ ወጥቶበታል
​ስሙ በ«ሽብርተኞች ዝርዝር» ውስጥ ተካቷል
​በሩሲያ የሚገኙ ንብረቶቹ ተታግደዋል
​አሁን ቴሌግራም በሩሲያ ውስጥ በምን ሁኔታ ላይ ይገኛል?
ከየካቲት 2026 ጀምሮ የቴሌግራም አገልግሎት በከፍተኛ ሁኔታ ተገድቧል። በመሆኑም ያለ VPN ለመጠቀም በጣም አስቸጋሪ ወይም እጅግ ቀርፋፋ ሆኗል።
​ለወንድማችን ለፓቬል ዱሮቭ ያለንን ደጋፊነት እና መልካም ምኞት ለማሳየት በቴሌግራም አድራሻው t.me/monk ገብታችሁ መልእክት አስቀምጡለት።
​#ECSS #ቤተሰብ #Telegram

owner እና የተውስኑ አአስተዳዳሪዎች ባይኖሩም እኔ አለሁ ብዙ የሚያስከፋ ነገር አይኖርም መልካም 🙏ምኞት ለሁላችሁም

ጤና ይስጥልኝ ትልቅ ገደብ ቢኖርም በ VPN ተመልሰናል እና ትምህታችንን የምንቀጥል ይሆናል 🖐

╔════════════════════════════════════════════╗
🌟 ETHIOCODE • PHASE 3 • L06 🌟✨📅
╚════════════════════════════════════════════╝

ETHIO Code&Soft Select🫧💻:
╔════════════════════════════════════════════╗ 
🌟 ETHIOCODE • PHASE 3 • L06 🌟✨📅 
╚════════════════════════════════════════════╝ 

📋 DAY.JS 📋 
በ React / JavaScript ውስጥ Date እና Timeን በቀላሉ፣ በፍጥነት እና በሚያምር መንገድ ለማስተዳደር ምርጡ መሣሪያ! 

ወገኖች ሰላም ጤና ይስጥልኝ  ተመልሰናል  😎⏰ 
እስካሁን Moment.js በመጠቀም 230KB+ bundle size እያከበዳችሁ ነበር? 
Mutable side-effects፣ tree-shaking ችግር፣ ወይስ ከ 2020 ጀምሮ deprecated ሆኖ የቀረ library? 
Parse፣ Format፣ Add/Subtract፣ Relative Time፣ Timezone... ሁሉንም በእጅ ለማስተካከል ስንት ሰዓት አሳልፋችኋል? 😩 

🛑 አቁሙ! አሁን ሁሉም ነገር ቀላል ሆኗል! 

══════════════════════════════════════════════ 
✨ መፍትሄው = Day.js 
በቃ! dayjs()ን ብቻ በመጠቀም ሁሉንም Date & Time ስራዎች በቀላሉ መቆጣጠር ትችላላችሁ! 

╔════════════════════════════════════════════╗ 
import dayjs from "dayjs"; 
╚════════════════════════════════════════════╝ 

ይህ 2KB ብቻ የሆነ፣ immutable፣ እና Moment.jsን የተካ አዲስና ፈጣን library ነው! 

🚀 ዋና ዋና ጥቅሞቹ፦ 
⚡ እጅግ ቀላልና ፈጣን፦ 2KB ብቻ — Moment.js ከ 100× በላይ ቀላል! 
🔒 Immutable፦ ዋናው date አይቀየርም፣ pure functions ይጠቀማል 
🎭 ተመሳሳይ API፦ Moment.js የምታውቁትን በቀላሉ ትተካላችሁ 
🚪 Plugins፦ relativeTime፣ timezone፣ duration፣ isBetween... ያስፈልጋችሁን ብቻ ጨምሩ 
👆 Live Clock + Date Calculator + Relative Time Playground 
🔄 Parse · Format · Manipulate · Compare · Diff — ሁሉም በአንድ ቦታ 

══════════════════════════════════════════════ 
🎯 በዚህ ትምህርት ምን ታገኛላችሁ? 
• Day.js ምንድን ነው? ለምን Moment.js አንጠቀምም? 
• ዋናዎቹን APIዎች (parse, format, add/subtract, startOf/endOf, diff) በቀጥታ በተግባር ማየት 
• Live Clock Demo + Interactive Date Calculator 
• Plugins (relativeTime, timezone, duration, isBetween...) 
• Relative Time “2 hours ago / in 3 days” Live Demo 
• ሙሉ ምሳሌዎች + Quiz 🎮 

🔥 ትምህርቱን አሁኑኑ በነፃ ጀምሩ! Interactive Playground እና Calculator አብሮት አለው፦ 
🔗 https://ethiocodesoftselectp3l6.netlify.app 

📱 በስልክ ከገባችሁ "Desktop Site" ማብራት እንዳትረሱ! 

══════════════════════════════════════════════ 
◀️👈 PREV: Framer Motion P3·L05 | ▶️➡️ NEXT: Coming Soon! 
@EthioCodeSoftSelect 
&
ይህንን በመማር Date & Time ስራዎቻችሁን ይበልጥ ቀላል፣ ፈጣን እና ፕሮፌሽናል ማድረግ ትችላላችሁ! 💪⏰ 
ለጓደኛችሁ developer share ማድረጋችሁን እንዳትረሱ! 🚀✨ 𝑞𝑒𝑛𝑡𝑖𝑣

ሰላም ቤተሰብ 👋 channel ያለው ሰው በ ውስጥ ያናግረኝ @AppMinds_ET 🖐𝑞𝑒𝑛𝑡𝑖𝑣

አንዳንድ አስፈላጊ የምለውን ማሻሻያ ለማድረግ ሞክሪያለሁ አስተያየት ስጡኝ እንደተለመደው desktop site ማብራታችሁን እንዳትረሱ 👉https://qentivcourse.netlify.app 👊 𝑞𝑒𝑛𝑡𝑖𝑣

ይሄን  ሰሞን netlify watermark ማምጣት ጀምሯል እና netlify በመንካት hide this badge በመንካት ማጥፋት ትችላለህ
38 ደረጃ ያለው ተከታታይ ትምህርት፣ ከቆማችሁብት መቀጠል አማራጭ ጋር 📚
ለእያንዳንዱ ደረጃ ማስታወሻ መያዝ የሚያስችል ገፅታ አለው 📝
HTML/CSS/JS ኮድ ለመሞከር Playground (Run ቁልፍ) አለው እዛው ላይ practices ማድረግ ትችላለህ 💻
25 ደቂቃ Pomodoro/ትኩረት ሰዓት መቆጣጠሪያ አለው ⏱️
እድገት፣ streak እና stats የሚያሳይ ዳሽቦርድ አለው 📊
በመሳሪያዎች መካከል እድገት ለማስተላለፍ Sync Code ሁላ አለው 🔄
ሞክሩት እና መጨመር ያለብኝን ነገር ንገሩኝ መልካም ቀን 𝑞𝑒𝑛𝑡𝑖𝑣 🌟

المولد النبوي الشريف

صلى الله عليه وسلم 🤲
እንኳን ለሞውሊድ በዓል በ ስላም አደረሳችሁ ሰ.ዐ.ወ 𝑞𝑒𝑛𝑡𝑖𝑣 🌙

Python 🐍 ነው አብዛኞቻችሁ የምረጣችሁት 🗳️ ከ Python ቀጥሎ c++, assembly &C ነው አሁን Python እንጀምራለን 🚀 መልካም ቀን ግን 67ሰው አይቶት 28 VOTE 📊 የ ራሳችሁን ነገር እራሳችሁ መወሰን አለባችሁ እና Vote ብታደርጉ ይመረጣል ✅ 𝑞𝑒𝑛𝑡𝑖𝑣

🐍 P1 · L01 — Python ጅምር ተጀምሯል! 🚀
Python ምንድን ነው? ለምን ለጀማሪ ቀላል ነው? print() እንዴት እንደሚሰራ? 💻
ሁሉንም በአማርኛ፣ በቀጥታ በብራውዘር ውስጥ ትማራላችሁ —
ምንም Python አትጭኑ፣ terminal አትከፍቱም። 📱
✅ Python ምን እንደሆነ
✅ የመጀመሪያው function — print()
✅ Comment እንዴት እንደሚጻፍ
✅ Live Playground — ኮድ ጻፉ፣ ወዲያው Run አድርጉ ⚡
✅ አጭር ፈተና (Quiz)
👉 ትምህርቱን ጀምሩ፦
https://pythoncoursebyqentivp1l1.netlify.app እንደተለመደው netlify watermark የሚረብሻችሁ ከሆነ netlify በመንካት

hide this badge

በማለት ማጥፋት ትችላላችሁ እና ፈጣሪ ብሎ በራሳችን ....... እንመጣለን 👊
አዳዲስ ትምህርቶች እና ቀጥታ ድጋፍ እዚህ ቻናል ላይ ብቻ ይለቀቃሉ። 📢
ገና ካልተቀላቀላችሁ → @EthioCodeSoftSelect
ያዘጋጀው፦ @AppMinds_ET
ETHIO CODE ─── & ─── SOFT SELECT
#Python #ኮዲንግ #EthioCode #AppMindsET #Pythonበአማርኛ 𝑞𝑒𝑛𝑡𝑖𝑣

Lesson 2 በቅርብ ሰዓታት ጠብቁን ⏳
ግን እኔ የሚገርመኝ ነገር ምንድነው? Ethiopia ውስጥ ለ Coding ፈላጎት ያላቸው ተማሪዎች ብዙ የሉም እንዴ? 🤔
ለዚሁም በአማርኛ በከፍተኛ ጥራት እያስተማርን እና Cyber Security COURSE ለመጀመር አስበናል 💻🛡️
እና ግዴታ 900+ ተማሪዎች መሆን ግድ ይላል 📈
እናም እናንተ በተቻላችሁ መጠን እኛን ለማገዝ ሞክሩ 🤝
በጣም ልዩ ነገሮችን በጣም ትርፋማ የምትሆኑበትን ነገር ለማስተማር ቃል እገባለሁ ✨ 𝑞𝑒𝑛𝑡𝑖𝑣

🚀 P1·L02: Variables & Data Types 🐍
✅ variables ምን ማለት እንደሆነ
✅ 4 መሰረታዊ Data Types
✅ እንዴ በትክክል variables እንደሚፈጥር
✅ f-strings እንዴት እንደምንጠቀም
✅ Live Playground — ኮድ ጻፉ፣ ወዲያው
Run አድርጉ ⚡
ትምህርቱን ለመክፈት ትንሽ ሊቆይ ይችላል እና ጠብቁት
✅ አጭር ፈተና (Quiz)
👉 ትምህርቱን አሁኑኑ ጀምሩ፦
https://pythoncoursebyqentivp1l2.netlify.app/
👉 አስተያየታችሁን ንገሩን ያስፈልገናል ማሻሻል /መጨመር ያለብንን ነገር or የተሰማችሁ በ comment ላይ አስቀምጡልን
እንደተለመደው netlify watermark የሚረብሻችሁ ከሆነ netlify በመንካት

hide this badge

በማለት ማጥፋት ትችላላችሁ እና ፈጣሪ ብሎ በራሳችን ....... እንመጣለን 👊
አዳዲስ ትምህርቶች እና ቀጥታ ድጋፍ እዚህ ቻናል ላይ ብቻ ይለቀቃሉ። 📢
ገና ካልተቀላቀላችሁ አሁኑኑ ተቀላቀሉን→ @EthioCodeSoftSelect
አዘጋጅ ፦ @AppMinds_ET
ETHIO CODE ─── & ─── SOFT SELECT
#Python #EthioCode #AppMindsET #Pythonበአማርኛ 𝑞𝑒𝑛𝑡𝑖𝑣

በጣም እናመሰግናለን 🙏 logo ምርጫ ነበር እና ለማንኛውም የ cyber security ትምህርት ከጀመርን የትኛውን ሞያ ነው መማር የምትፈልጉት 🎓 red=🔥, blue=😍 , or black(👹👺🤒😵‍💫🫩🫣😶😧🙀 ) = <👤> reaction አስቀምጡ

Every human being needs encouragement 🌟
If you can't support us in any other way, at least drop a reaction or leave a comment 💬 it truly means a lot to us. Silence can be discouraging, but even a small ❤️ or a few words keep us going.
ቆይ ምንድነው
አስተያየት ሰጡን ኧር ይደብራል ወይ share አታደርጉ ወይ reaction አታደርጉ 😞ነው ወይስ ምን እንደሆነ አታውቁም 😏 በነፃ ነው እያስተማርን ያለነው 👇 ፈጠን በሉ አሁን ልያችህ እስቲ

╔════════════════════════════════════════════╗
🌟 ETHIOCODE • PHASE 3 • L07 🌟✨📅
╚════════════════════════════════════════════╝

📋 LODASH 📋
Array፣ Object፣ String — ሁሉንም በ JavaScript ውስጥ ለማስተዳደር (manipulate ለማድረግ) ምርጡ Utility Library!

ወገኖች ሰላም ጤና ይስጥልኝ ተመልሰናል 😎🔧
JSON.parse(JSON.stringify(obj)) እየተጠቀማችሁ Dates እና undefined ሲበላሹባችሁ አይታችሁ ያውቃል?
Deep clone፣ groupBy፣ debounce፣ throttle... ሁሉንም በእጅ (manual) reduce/loop እየፃፋችሁ ስንት መስመር ኮድ አባከናችሁ? 😩

🛑 አቁሙ! አሁን ሁሉም ነገር በ 1 መስመር ብቻ ይቻላል!

══════════════════════════════════════════════
✨ መፍትሄው = Lodash
በቃ! _.functionName()ን ብቻ በመጠቀም ውስብስብ ስራዎችን ሁሉ በቀላሉ መስራት ትችላላችሁ!

╔════════════════════════════════════════════╗
import _ from "lodash";
╚════════════════════════════════════════════╝

🚀 ዋና ዋና ጥቅሞቹ፦
🪆 cloneDeep፦ Dates፣ undefined፣ Functions ሳይበላሹ ትክክለኛ Deep Clone
📊 groupBy/sumBy፦ Dashboard analytics በቀላሉ
⏱️ debounce/throttle፦ Search input እና Scroll performance ማሻሻያ —

.debounce

ለ Search ካገኛችሁ በኋላ ወደኋላ አትመለሱም! 💡
🔗 _.chain()፦ ብዙ operations በቅደም ተከተል ማያያዝ

⚠️ ግን ጠቃሚ ማስታወሻ — ሁሉንም lodash በ default አትጫኑ!
📦 lodash-es ተጠቀሙ — ESM ስለሆነ tree-shaking በትክክል ይሰራል፣ bundle size 70%+ ይቆጥባል!

// ❌ ሁሉንም ያመጣል (70KB+)
import _ from 'lodash';

// ✅ tree-shakeable — named import ብቻ
import { debounce, groupBy } from 'lodash-es';

🌱 ለ Simple Deep Clone ደግሞ — lodash እንኳን ላያስፈልጋችሁ ይችላል!
Modern browsers/Node ላይ native structuredClone() አለ፦

// ✅ Native — ለ simple objects ይበቃል!
const clone = structuredClone(obj);

Functions ወይም class instances ካልያዘ obj ላይ structuredClone() በቂ ነው። ውስብስብ (custom prototypes, merge, deep comparison) ስራ ሲኖር ብቻ ወደ

_.cloneDeep

ሂዱ።

══════════════════════════════════════════════
🎯 በዚህ ትምህርት ምን ታገኛላችሁ?
• Lodash ምንድን ነው? ለምን Native JS ብቻ አይበቃም?
• Array · Object · String · Function · Collection Categories
• Interactive Function Explorer + Live Playground
• lodash-es vs lodash — Bundle Size ንፅፅር
• structuredClone() vs _.cloneDeep — መቼ የትኛውን
• _.chain() Pipeline Pattern በእውነተኛ ምሳሌ (EthioShop orders)
• Production-ready ምሳሌዎች + Quiz 🎮

🔥 ትምህርቱን አሁኑኑ በነፃ ጀምሩ፦
🔗 https://ethiocodesoftselectp3l7.netlify.app

📱 በስልክ ከገባችሁ "Desktop Site" ማብራት እንዳትረሱ!

══════════════════════════════════════════════
◀️👈 PREV: Day.js P3·L06 | ▶️➡️ NEXT: Socket.io P3·L08
@EthioCodeSoftSelect
&
ይህንን በመማር ኮዳችሁን ይበልጥ ንፁህ፣ አጭር፣ Production-ready እና lightweight ማድረግ ትችላላችሁ! 💪🔧
ለጓደኛችሁ developer share ማድረጋችሁን እንዳትረሱ! 🚀✨