ÖRNEK BİR REACT/FRONTEND MÜLAKAT DENEYİMİ
HTML-код
- Опубликовано: 27 июл 2024
- Bu videoda Barış Şenyerli'nin benim için seçtiği case üzerinden bir mülakat denemesi gerçekleştiriyoruz. İş arayan, mülakat korkusu yaşayan ve çekinen arkadaşlara faydası olacağını umduğumuz, benim çaresizce çırpınışlarımla dolu olan bu videoyu umarım beğenirsiniz.
Videoda Uğraştığım Case: codesandbox.io/s/github/devmn...
-- VİDEO BÖLÜMLERİ --
00:00 Giriş
2:50 Case'i İnceleme
4:10 Beyin Fırtınası Yapma
10:23 Barış Abi'yle Case'i İnceleme
12:50 Geri Sayım Başladı
13:55 Case İle Uğraşma
26:16 Ufaktan Hallediyor Gibiyim
36:49 Ve... Bir Şeyler Oluyor...
41:43 Süre Doluyor
44:14 Mülakatın Değerlendirmesi
49:02 Son Muhabbet ve Kapanış
-- BARIŞ ŞENYERLİ --
Twitter: / barisxcode
Linkedin: / barisx
-- BANA ULAŞMAK İÇİN --
Twitter: / burakdmr09
Instagram: / burakdmr.dev
Github: github.com/burakndmr
Linkedin: / burak-demir-8a5410189
Video işinize yaradıysa abone olarak destek olabilirsiniz.
çok güzel videoydu hatalarını düzelttiğini görmek bizede bilgi kattı video için teşekkürler
Fayda sağlamasına sevindim :)
bunun çözümü gelir umarım bir sonraki videoda
Çok iyi video olmuş kardeşim emeğine sağlık. Bana sürekli case çözerek ilerlenebileceği fikrini verdi bu video. Doğru bir düşünce mi bilmiyorum ama :)
Teşekkür ederim. Bence kesinlikle doğru, frontendmentor'da çok güzel challangelar var, mutlaka bakmalısın.
Çok keyifliydi
Beğenmene sevindim :)
Barış abinin sabrı...🤣 Ağzınıza sağlık, güzel içerik
Edit yaparken fark ettim adama neler çektirdiğimi :D
çok güzel olmuş :)
Teşekkür ederim :)
güzel örnekmiş , öğrenme aşamasında güzel
Ellerine sağlık Burak.
Teşekkür ederim Baran :)
Abi Efsane çok iyi bir format bayıldım.Bu mesleği neden istediğimi ve sevdiğimi hatırlattı bana.😄😄😄
Çok sevindim buna sebep olduğumuza.
tailwind css ile alakalı hızlandırılmış bir eğitim videosu gelse çok iyi olur ülkenin buna ihtiyacı var
Daha izleyemedim ama video başı çok güzeldi not aldım izleyeceğim kesinlikle elinize sağlık
Teşekkürler, umarim geri kalanını da beğenirsin.
Çok güzel bir içerik olmuş
Teşekkür ederim 🙏🏻👊🏻
Güzeldi, beğendim. 😄
Teşekkürler :)
bu tarz junior mülakatta sorulabilecek soruları nerden bulabiliriz?
Gayet güzel olmuş ellerinize sağlık. bir de NodeJS/Backend mülakat'ı olsa tadından yenmez :)
Ah be abi, onu bi öğrenelim de önce :D
Bu video ile keşfettim sizi. NodeJS mülakat videosu gelirmi ki@@BurakDemiryt
@@suatcelik7834 Hala öğrenmedim nodejs'i :D
hocam ben vs code de yazarken hiç hata mesajı gelmiyor, kullandığınız bir eklenti mi var? varsa adı nedir?
Eheheheh müthiş olmuş 😅
Teşekkürler 🙏🏻⚡
File read write ile file i obje gibi düşünüp buradan yol aliamazmi
Part 2yi bekliyoruz 🙂
Yakında çekeceğiz :)
@@BurakDemiryt hep onlar mı bizim yaklaşımımızı merak edecek. Biz de seniorlar nasıl yaklaşıyor onu merak ediyoruz 😉
@@GarfieLD-Mami ahahaah, aynen :D
@@BurakDemiryt 2. video ne zaman gelir?
selamlar. çözüm videosu geldi mi?
Case'i ben de çok beğendim. Baskı altında anca bu kadar olurdu zaten. React ile karşıma ne gelse harcarım diye düşünüyordum ama bu tarz bir şeyi izleyerek hayal edemedim ben de. 😄
Ben de Barış abiyle mülakat videosu çekelim diye konuştuğumuzda böyle bir şey beklemiyordum hiç :D
1'e 1 mülakat için biraz uzun geldi bana yoksa verilen task gün süreli mi
guzel olmus bu tarz videolar devam etsin lütfen :) ben suan junior'unda junioruyum cok yeniyim ama ik case gördüğümde aklıma gelen şu oldu , useSelectedText'e mouse ilen secilen texti atayıp, styled component kullanarak butonlara özel css verirdim , secilen butona göre seçilen texte css özelliğini atardım. umarım anlatabilmişimdir. deneyeceğim bunu bi :) useSelectedButton kullanıp secilen butona göre css atardım sonucta styled component şartlı css atama özelliği sunuyor, eger h1 butonuysa şu css özelliğini yap , h2 ise şu css özelliğini kullan gibi...
Eğer başarabilirsen codesandbox linki bekliyorum :)
@@BurakDemiryt birkaç detay dışında hallettim ama buradan link bırakılmıyor:) mesela orda girls yazısının üzeri çizili strike butona basınca üzerindeki çizgi gidiyor ama tüm kelimeyi seçince gitmiyor, bu bı detay o hariç her şey çalışıyor kodlarimda 🤙
@@sumeyyea instagram, twitter ve linkedin linklerimin olması lazım açıklamada, oradan ulaşabilirsen harika olur.
githb linkini atsan cokk süper bolur yaaw
Çok iyi ya baya güldüm 😂
Sevindim :D
@@BurakDemiryt baya baya tatlı bi video bu arada 2. Part merakla bekleniyor
@@ahmetcankaragoz4174 teşekkür ederim. Birkaç aksilik oldu fakat part 2'yi de çekip yükleyeceğim yakında.
ben artik bir problemi cozmeye calistigim zaman ilk once chatgpt gibi yapay zeka araclarini kullanmayi tercih ediyorum. hem aciklayarak iyice ogrenmemi sagliyor hem de zamandan kazaniyorum. sizlere de tavsiye ederim
Katılıyorum, ben de artık böyle yapıyorum.
Burak Kardeş çok samimisin😁 ins hedeflerine ulaşırsın bu arada react nasıl öğrendin
Teşekkür ederim, böyle bağıra bağıra öğrendim :D
Şaka bir yana, kendi dökümantasyonu türkçe fakat kafan biraz karışabilir. Onun dışında react dersleri ve prototürk kanallarina bakabilirsin.
@@BurakDemiryt bende js tam halledeyim başlayım diyorum ama akl8mi çekiyor simdiden
@@juniors7199 Kararsız kalmakta haklısın, ben de ne zaman geçeceğime karar verememiştim çünkü. Hatta bu konuda bir videom da var: ruclips.net/video/x51h68IpriU/видео.html
@@juniors7199 harika o zaman :)
hocam bu case'in adi tam olarak ne gidiyo internet aleminde?
WYSIWYG editor olarak geçiyor bu.
@@BurakDemiryt sagolun hocam
çözümünü atabilecek var mi?
MDN ya da W3Schools dan document.execCommand paylaşımlarına bakabilirsin. Link atmaya çalıştım ama youtube direkt siliyor galiba gönderileri.
Bu mülakatlar da yapay zeka izin veriliyor mu?
Pek bir bilgim yok ne yazık ki.
Sma case guzel
Bulunmaz nimet, ileride gercek mulakatlarda nabız cok yüksek olacaga benziyor ☺
Ahahahah, yok ya bence atlattım o gerginliği burada :D
@@BurakDemiryt o zaman kendi adima öyle diyim ahahah, ama o zamana da sen beni mulakata tutarsin 😁😅
@@zahiriyol umarım ben mülakat yapacak seviyeye gelmeden önce iş bulmuş olursun kendine :D
@@BurakDemiryt umarım öyle olur tek temennimiz o yönde bir an önce kariyer olarak basliyalim ☺🥰🤗
ben de senin seviyelerindeydim html css js react tam anlamıyla bitmişti ama yok iş bulamıyorsun ben de bıraktım 7-8 ay oldu kod yazmayalı bana boş iş gibi geliyor adam akıllı ing yoksa boşa uğraşırsın
İngilizcenin çok önemli olduğuna katılıyorum fakat boş iş değil, ingilizce öğrenmek imkansız da değil zaten.
Riyekt? Gogıldan riyekt ogrenmis bunlar 😂😂😂😂😂
Daha iyi bir kaynak var mı 😅
@@BurakDemiryt 7-8 yıllık iş ve yazılımcılık tecrübeme dayanarak paylaşayım o halde.. Maalesef yazılımcının alaylısının işi çok zor. Altyapı ve teorik bilgiler olmadan google ve tutoriallar üzerinden sadece pratikten yapılan öğrenimler yazılım alanı için buzdağının sadece görünen kısmı. Göstermiş olduğun case'i reel kurumsal bir şirkete sunmuş olsaydın, title'ın software developer, software enginner, full-stack developer, web programmer yerine junior frontend intern olurdu (bu optimistic bir yaklaşımım). Bu farkın kapanması için de normal şartlarda eğitimin temelden bir eğitim kurumu tarafından alımış, üzerine yüzlerce case ve proje gerçekleştirilmiş olması gerekirdi. Ancak sonrasında pişme evren tamamlanmış olurdu. Yani bu yapmış olduğunuz sözde 'mülakat' ancak Türkiye şartlarında bir startup veya kurumsal olmayan ve yazılımdan haberi olmayan firmalarda karşınıza çıkar. Sonra 15.000 tl maaşla başlayıp, herşeyi üstünüze(varsa) sormak zorunda kalırsınız ama linkedin profilinize full-stack developer yazarsınız ve kendinize bunu inandırırsınız. Durum, iş ve çalışan yapılar(scalable, maintainable, sustainable, modular, etc..) ve frameworkler kurmaya gelince teorik bilginiz sağlam olmadığı veya hiç olmadığı için patlarsınız. Bu dinamik ve teknolojik çözümler, aslında organik yapılar olduğu için sürekli içerisinde barınmak modern yazılımcılığın en zorlu, aynı zamanda da en heyecanlı süreçlerinden biridir. Günümüzde bunu başarabilene mesleki anlamda 'yazılımcı' diyebiliriz. Sizin göstermiş olduğunuz ve maalesef Türkiye'de yeterli kaynak ve yönlendirme olmadığı için sizin durumunuzda kalan insanların bu mesleğe haiz olmaları için kırk fırın ekmek yemesi gerekir. Lütfen yanlış anlamayın. Ben de yıllar yıllar önce alaylı başlayıp sonrasında eğitim almış bir meslektaşım. Demek istediğim asıl nokta şu ki; Google'dan 'yazılımcı' olamazsınız. Çünkü bunu yapmaya çalışırsanız öğrenmek istediğiniz kütüphanenin bile adını doğru telafüz edemezsiniz. Ancak yazılımcı olduğunuzu sanırsınız o da ta ki bir noktaya kadar. Sizin bu case için yapmış olduğunuzu bugün AI'da yapıyor üstelik bedava ve çok daha hızlı. Bunu yazmamdaki asıl amaç mesleğe girmek isteyen gençleri bir nebze aydınlatmak ve yol gösterici olmak. Çünkü gördüğüm şu ki herkes instagram reelslerinde izleyip state yazınca 100k maaşla yazılımcı olacağını sanıyor :) sonra hevesle bu tarz içeriklere yöneliyor. İş derinleşince de Z kuşağı olarak gençler direkt pes ediyor ve vakit kaybının yanı sıra 'ben o işi biliyorum abi state yazıyosun işte' gibi bir zihniyetle mesleği yanlış tanıyor ve tanıtıyor. Bu da bu söylemden etkilenen diğer arkadaşları 'e kolaymış ben de ek dal olarak yaparım' gibi inanılmaz büyük bir hatanın içine sürüklüyor. Hatta bu videonun yorumlarında @mhmtcyldrm1042 arkadaşın yaşadığı da tam olarak bu. Hayatımın en uzun yorumunu yazdım. Kusura bakmayın. Ben bu kadar sene içerisinde gördüğümü paylaşmak istedim. Eğitim hayatınızda başarılar dilerim.
@@rawarg reis peki ne önerirsin. Bir alaylı alaysız farktetmiyo şahsen benım okulumda yazılım ile alakalı çok bir şey gösterilmiyor ya kendimiz proje yaparız ya da temel algortima bilgileri mat vs var. Ben iyi bir jr olmak için neler yapabilirim e başka nasıl geliştiririm yani 8 yıllık tecrübesi olan bir insan olarak kendini 20 yaşında düşün ve okulun bitiyor seneye sen ne yapardın.
@rawarg reis peki ne önerirsin. Bir alaylı alaysız farktetmiyo şahsen benım okulumda yazılım ile alakalı çok bir şey gösterilmiyor ya kendimiz proje yaparız ya da temel algortima bilgileri mat vs var. Ben iyi bir jr olmak için neler yapabilirim e başka nasıl geliştiririm yani 8 yıllık tecrübesi olan bir insan olarak kendini 20 yaşında düşün ve okulun bitiyor seneye sen ne yapardın.
Bu case'in çözümü için en iyi kullanilabilecek yöntem document.execCommand galiba. Ben de kısa bir araştırmadan sonra denk geldim. Mdn ve W3Schools da açıklamalar yer alıyor. Bir şekilde ulaşabilirseniz sandbox linki atabilirim.
Twitter veya instagramdan bana yazabilirsin.
Instagram: burakdmr.dev
Twitter: burakdmr09
Yazilimdan uzak durun. Herkes yazilimci oldu ve binlercesi mulakata girecek. Bilgisayarin baska bolumlerindeki islere basvurun aksi halde isiniz cok zor!
yoo
cevabı merak edenler için yaptım bişeyler:
import React, { useRef } from 'react';
const App = () => {
const highlightedRef = useRef();
// const selection = () => {
// if (window.getSelection) {
// return window.getSelection();
// }
// };
const getSelectedText = () => {
let sel = window.getSelection ? window.getSelection() : document.selection.createRange(); // FF : IE
if (sel.getRangeAt) { // that's for FF
let range = sel.getRangeAt(0);
let newNode = document.createElement("span");
newNode.setAttribute('class', 'someclass');
newNode.style.border = '5px solid yellow'; // Apply yellow border
range.surroundContents(newNode);
} else { // and that's for IE7
sel.pasteHTML('' + sel.htmlText + '');
}
highlightedRef.current.textContent = sel.toString();
};
const H1MakerHandler = () => {
let sel = window.getSelection ? window.getSelection() : document.selection.createRange(); // FF : IE
if (sel.getRangeAt) { // that's for FF
let range = sel.getRangeAt(0);
let newNode = document.createElement("h1");
range.surroundContents(newNode);
} else { // and that's for IE7
sel.pasteHTML('' + sel.htmlText + '');
}
highlightedRef.current.textContent = sel.toString();
};
return (
Highlight something in this sentence, then click the button.
Get highlighted text
Make Text H1
You highlighted:
);
};
export default App;
Teşekkürler, bir türlü çözüm videosunu çekemedik barış abi ile, fakat yakın zamanda podcastlere devam edeceğiz :)