Tech_updates
Tech_updates
January 25, 2025 at 01:07 AM
30-days learning plan to master web development, covering HTML, CSS, JavaScript, and foundational concepts 👇👇 ### Week 1: HTML and CSS Basics Day 1-2: HTML Fundamentals - Learn the structure of HTML documents. - Tags: , , , , , <h1> to <h6>, <p>, <a>, <img>, <div>, <span>, <ul>, <ol>, <li>, <table>, <form>. - Practice by creating a simple webpage. Day 3-4: CSS Basics - Introduction to CSS: Selectors, properties, values. - Inline, internal, and external CSS. - Basic styling: colors, fonts, text alignment, borders, margins, padding. - Create a basic styled webpage. Day 5-6: CSS Layouts - Box model. - Display properties: block, inline-block, inline, none. - Positioning: static, relative, absolute, fixed, sticky. - Flexbox basics. Day 7: Project - Create a simple multi-page website using HTML and CSS. ### Week 2: Advanced CSS and Responsive Design Day 8-9: Advanced CSS - CSS Grid. - Advanced selectors: attribute selectors, pseudo-classes, pseudo-elements. - CSS variables. Day 10-11: Responsive Design - Media queries. - Responsive units: em, rem, vh, vw. - Mobile-first design principles. Day 12-13: CSS Frameworks - Introduction to frameworks (Bootstrap, Tailwind CSS). - Basic usage of Bootstrap. Day 14: Project - Build a responsive website using Bootstrap or Tailwind CSS. ### Week 3: JavaScript Basics Day 15-16: JavaScript Fundamentals - Syntax, data types, variables, operators. - Control structures: if-else, switch, loops (for, while). - Functions and scope. Day 17-18: DOM Manipulation - Selecting elements (getElementById, querySelector). - Modifying elements (text, styles, attributes). - Event listeners. Day 19-20: Working with Data - Arrays and objects. - Array methods: push, pop, shift, unshift, map, filter, reduce. - Basic JSON handling. Day 21: Project - Create a dynamic webpage with JavaScript (e.g., a simple to-do list). ### Week 4: Advanced JavaScript and Final Project Day 22-23: Advanced JavaScript - ES6+ features: let/const, arrow functions, template literals, destructuring. - Promises and async/await. - Fetch API for AJAX requests. Day 24-25: JavaScript Frameworks/Libraries - Introduction to React (components, state, props). - Basic React project setup. Day 26-27: Version Control with Git - Basic Git commands: init, clone, add, commit, push, pull. - Branching and merging. Day 28-29: Deployment - Introduction to web hosting. - Deploy a website using GitHub Pages, Netlify, or Vercel. Day 30: Final Project - Combine everything learned to build a comprehensive web application. - Include HTML, CSS, JavaScript, and possibly a JavaScript framework like React. - Deploy the final project. ### Additional Resources - HTML/CSS: MDN Web Docs, W3Schools. - JavaScript: MDN Web Docs, Eloquent JavaScript. - Frameworks/Libraries: Official documentation for Bootstrap, Tailwind CSS, React. - Version Control: Pro Git book. Practice consistently, build projects, and refer to official documentation and online resources for deeper understanding. </div> <div class="flex items-center justify-start mt-6 pt-4 border-t border-gray-100"> <div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg"> <div class="flex items-center text-gray-700"> <div class="flex items-center space-x-2"> <span class="text-2xl transform hover:scale-110 transition-transform cursor-default"> ❤️ </span> <span class="text-2xl transform hover:scale-110 transition-transform cursor-default"> 👍 </span> <span class="text-2xl transform hover:scale-110 transition-transform cursor-default"> 👏 </span> <span class="ml-2 font-semibold text-gray-800 text-sm"> 22 </span> </div> </div> </div> </div> </div> </div> <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 mb-6"> <h2 class="text-xl font-semibold mb-6 flex items-center"> <i class="fas fa-comments mr-2 text-blue-500"></i> Comments </h2> <div class="mb-8"> <form id="commentForm" class="space-y-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label for="user_name" class="block text-sm font-medium text-gray-700 mb-1">Name *</label> <input type="text" id="user_name" name="user_name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your name"> </div> <div> <label for="user_email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label> <input type="email" id="user_email" name="user_email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your email"> </div> </div> <div> <label for="content" class="block text-sm font-medium text-gray-700 mb-1">Comment *</label> <textarea id="content" name="content" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your comment"></textarea> </div> <div class="flex justify-end"> <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors font-medium"> Submit Comment </button> </div> </form> </div> <div id="commentsList" class="space-y-6"> </div> <div id="noComments" class="text-center py-8 text-gray-500 hidden"> No comments yet </div> </div> </article> <aside class="lg:w-1/3 order-2"> <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300"> <h2 class="text-lg font-semibold mb-4 flex items-center"> <i class="fas fa-layer-group mr-2 text-blue-500"></i> Similar Channels </h2> <div class="space-y-3"> <a href="/channel/67a0f15b7626af808d11b916/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors"> <div class="relative flex-shrink-0"> <img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/la-opinion-noticias-cover_bb8e937fc6035183e8380509d5228e29.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="La Opinión Noticias WhatsApp Channel"> <div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div> </div> <div class="flex-1"> <h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">La Opinión Noticias</h4> <p class="text-xs text-gray-500 flex items-center"> <i class="fas fa-users mr-1 text-blue-500"></i> 111.0K </p> </div> </a> <a href="/channel/67a0f15b7626af808d11b921/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors"> <div class="relative flex-shrink-0"> <img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/el-tiempo-ultima-hora-cover_a5c38643c247df58948305bdcade8fe9.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="EL TIEMPO Última Hora WhatsApp Channel"> <div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div> </div> <div class="flex-1"> <h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">EL TIEMPO Última Hora</h4> <p class="text-xs text-gray-500 flex items-center"> <i class="fas fa-users mr-1 text-blue-500"></i> 585.7K </p> </div> </a> <a href="/channel/67a0f15f7626af808d11b927/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors"> <div class="relative flex-shrink-0"> <img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/at-endocrinorosero-cover_23b443c6046a9ffa007179012b7682e2.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="@endocrinorosero WhatsApp Channel"> <div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div> </div> <div class="flex-1"> <h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">@endocrinorosero</h4> <p class="text-xs text-gray-500 flex items-center"> <i class="fas fa-users mr-1 text-blue-500"></i> 107.6K </p> </div> </a> <a href="/channel/67a0f15f7626af808d11b95a/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors"> <div class="relative flex-shrink-0"> <img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/la-silla-vacia-el-desatrase-cover_6cce8114da85989e939f96cda8af1e25.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="La Silla Vacía🪑- El Desatrase WhatsApp Channel"> <div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div> </div> <div class="flex-1"> <h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">La Silla Vacía🪑- El Desatrase</h4> <p class="text-xs text-gray-500 flex items-center"> <i class="fas fa-users mr-1 text-blue-500"></i> 151.5K </p> </div> </a> <a href="/channel/67a0f15f7626af808d11b937/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors"> <div class="relative flex-shrink-0"> <img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/adriana-meaury-cover_909ef2345f8c72831013136d30db9224.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="Adriana Meaury WhatsApp Channel"> <div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div> </div> <div class="flex-1"> <h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">Adriana Meaury</h4> <p class="text-xs text-gray-500 flex items-center"> <i class="fas fa-users mr-1 text-blue-500"></i> 49.7K </p> </div> </a> <a href="/channel/67a0f1587626af808d11b90a/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors"> <div class="relative flex-shrink-0"> <img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/blu-radio-cover_a350a9f2da5f5573cd70feff9304152b.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="BLU Radio WhatsApp Channel"> <div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div> </div> <div class="flex-1"> <h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">BLU Radio</h4> <p class="text-xs text-gray-500 flex items-center"> <i class="fas fa-users mr-1 text-blue-500"></i> 904.4K </p> </div> </a> <a href="/channel/67a0f24d7626af808d11c5df/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors"> <div class="relative flex-shrink-0"> <img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/lowyat-net-cover_5776290ec785d806dde1dd42e8d9235e.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="Lowyat NET WhatsApp Channel"> <div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div> </div> <div class="flex-1"> <h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">Lowyat NET</h4> <p class="text-xs text-gray-500 flex items-center"> <i class="fas fa-users mr-1 text-blue-500"></i> 145.2K </p> </div> </a> <a href="/channel/67a0f1597626af808d11b90c/" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 transition-colors"> <div class="relative flex-shrink-0"> <img src="https://cdn1.wapeek.io/whatsapp/2025/02/25/12/cocinando-con-minuto30-cover_f11d03d8c24b2a9a37527a106accbd80.webp" class="w-10 h-10 rounded-full object-cover lazy-load" loading="lazy" alt="Cocinando Con Minuto30 WhatsApp Channel"> <div class="absolute -bottom-1 -right-1"><span class="bg-green-100 text-green-600 p-0.5 rounded-full text-xs"><i class="fas fa-check-circle"></i></span></div> </div> <div class="flex-1"> <h4 class="font-medium text-gray-800 hover:text-blue-600 transition-colors text-sm line-clamp-1">Cocinando Con Minuto30</h4> <p class="text-xs text-gray-500 flex items-center"> <i class="fas fa-users mr-1 text-blue-500"></i> 358.8K </p> </div> </a> </div> </div> </aside> </div> </main> </div> <!-- Footer --> <footer class="bg-gradient-to-br from-gray-900 to-gray-900 text-white mt-12"> <div class="container mx-auto max-w-7xl px-4 py-12"> <!-- Main Footer Content --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Brand Section --> <div> <div class="flex items-center space-x-2 mb-4"> <img src="/img/logo-color.svg" alt="Logo" width="235"> </div> <p class="text-gray-400 text-sm leading-relaxed mb-4">Discover and join the best WhatsApp channels that match your interests.</p> </div> <!-- Explore --> <div> <h3 class="text-base font-semibold mb-4">Explore</h3> <ul class="space-y-2 text-sm text-gray-400"> <li><a href="/verified-channels" class="hover:text-green-400 transition-colors">Verified Channels</a></li> <li><a href="/add" class="hover:text-green-400 transition-colors">Add Your Channel</a></li> <!-- <li><a href="https://blog.wapeek.io" class="hover:text-green-400 transition-colors">Blog</a></li> --> </ul> </div> <!-- Help & Support --> <div> <h3 class="text-base font-semibold mb-4">Help & Support</h3> <ul class="space-y-2 text-sm text-gray-400"> <li><a href="/page/contact" class="hover:text-green-400 transition-colors">Contact Us</a></li> <li><a href="/page/privacy" class="hover:text-green-400 transition-colors">Privacy Policy</a></li> <li><a href="/page/terms" class="hover:text-green-400 transition-colors">Terms of Service</a></li> </ul> </div> </div> <!-- Bottom Footer --> <div class="border-t border-gray-800 mt-8 pt-6 flex flex-col md:flex-row items-center justify-between text-gray-500 text-sm"> <p>© 2025 WhatsApp Channels Directory</p> </div> </div> </footer> </body> </html> <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.css"> <script> document.addEventListener('DOMContentLoaded', function() { // Plyr.js Video Player Initialization const videoPlayer = document.querySelector('.video-player'); if (videoPlayer) { const player = new Plyr(videoPlayer, { controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'], hideControls: true, resetOnEnd: true }); } // Lazy load images const lazyImages = document.querySelectorAll('img.lazy-load'); if ('IntersectionObserver' in window) { const imageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { const img = entry.target; img.classList.remove('lazy-load'); imageObserver.unobserve(img); } }); }, { rootMargin: "0px 0px 200px 0px" }); lazyImages.forEach(img => imageObserver.observe(img)); } else { lazyImages.forEach(img => img.classList.remove('lazy-load')); } // Share Button Logic const shareButton = document.getElementById('shareButton'); const shareOptions = document.getElementById('shareOptions'); const copyLinkButton = document.getElementById('copyLink'); if (shareButton && shareOptions) { shareButton.addEventListener('click', (event) => { event.stopPropagation(); shareOptions.classList.toggle('hidden'); }); document.addEventListener('click', (event) => { if (!shareOptions.contains(event.target) && !shareButton.contains(event.target)) { shareOptions.classList.add('hidden'); } }); } if (copyLinkButton) { copyLinkButton.addEventListener('click', () => { navigator.clipboard.writeText(window.location.href).then(() => { const originalText = copyLinkButton.innerHTML; copyLinkButton.innerHTML = '<i class="fas fa-check text-green-500 mr-2"></i> Copied!'; setTimeout(() => { copyLinkButton.innerHTML = originalText; shareOptions.classList.add('hidden'); }, 1500); }).catch(err => console.error('Failed to copy link: ', err)); }); } // Comments Logic const commentForm = document.getElementById('commentForm'); const commentsList = document.getElementById('commentsList'); const noComments = document.getElementById('noComments'); const postId = '67b206f38646045dc1fcc7bb'; const channelId = '120363297233107559'; // Show 'no comments' message if list is initially empty if (commentsList && noComments && commentsList.children.length === 0) { noComments.classList.remove('hidden'); } if (commentForm) { commentForm.addEventListener('submit', async function(e) { e.preventDefault(); const submitButton = commentForm.querySelector('button[type="submit"]'); submitButton.disabled = true; submitButton.classList.add('opacity-50'); const formData = { user_name: document.getElementById('user_name').value, user_email: document.getElementById('user_email').value, content: document.getElementById('content').value, post_id: postId, channel_id: channelId }; try { const response = await fetch('/comments/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); const data = await response.json(); // Clear previous alerts commentForm.querySelector('.alert')?.remove(); const alertDiv = document.createElement('div'); alertDiv.className = 'alert mb-4 p-4 rounded-lg'; if (data.success) { alertDiv.classList.add('bg-green-100', 'text-green-700'); alertDiv.textContent = data.message; commentForm.reset(); } else { alertDiv.classList.add('bg-red-100', 'text-red-700'); alertDiv.textContent = data.message || 'An error occurred.'; } commentForm.insertBefore(alertDiv, commentForm.firstChild); setTimeout(() => alertDiv.remove(), 5000); } catch (error) { console.error('Error submitting comment:', error); } finally { submitButton.disabled = false; submitButton.classList.remove('opacity-50'); } }); } }); </script> <script> document.addEventListener('DOMContentLoaded', () => { const postContainer = document.querySelector('.post-body'); if (!postContainer) { console.warn('.post-body elementi bulunamadı.'); return; } // GÜNCELLENMİŞ VE DAHA GÜÇLÜ REGEX: // Bu Regex, linkin tamamını yakalar ve sadece video ID'sini (1. grup) bize verir. // &t=... gibi ek parametreleri de eşleşmeye dahil ederek temizler. const youtubeRegex = /https?:\/\/(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[?&]?[^"'\s<]*)?/gi; // .post-body içeriğini alıp üzerinde değişiklik yapıyoruz. let content = postContainer.innerHTML; // Bulunan her YouTube linki için değiştirme işlemi yap // Callback fonksiyonu: (fullMatch, videoId) // - fullMatch: Regex'in yakaladığı tüm link (örn: https://.../S6jLC1Dl5TE&t=41s) // - videoId: Sadece parantez içindeki yakalama grubu (örn: S6jLC1Dl5TE) content = content.replace(youtubeRegex, (fullMatch, videoId) => { // Eğer bir videoId yakalandıysa, Plyr HTML'i ile değiştir. if (videoId) { console.log(`YouTube linki bulundu. Video ID: ${videoId}`); return ` <div class="plyr-container" style="margin: 20px 0;"> <div class="js-plyr-player" data-plyr-provider="youtube" data-plyr-embed-id="${videoId}"></div> </div> `; } // Eğer bir sorun olursa orijinal metni koru return fullMatch; }); // .post-body içeriğini yeni oluşturduğumuz HTML ile güncelliyoruz. postContainer.innerHTML = content; // Yeni eklenen tüm Plyr oynatıcılarını bul ve başlat. const players = document.querySelectorAll('.js-plyr-player'); if (players.length > 0) { const plyrInstances = Array.from(players).map(p => new Plyr(p, { // Plyr seçeneklerini buraya ekleyebilirsiniz: // https://github.com/sampotts/plyr/#options // Örneğin: captions: { active: true } })); // Oynatıcı nesnelerine konsoldan erişmek için (isteğe bağlı) window.plyrInstances = plyrInstances; console.log(`${plyrInstances.length} adet YouTube oynatıcısı başarıyla başlatıldı.`); } }); </script>